c2-table

() => {
  // import {Table, Column} from '@clearc2/c2-table'
  const data = [
    { id: 1, firstName: 'Mickey', lastName: 'Patton', role: 'President' },
    { id: 2, firstName: 'Kevin', lastName: 'Bull', role: 'Developer' },
  ]
  return (
    <Table id="test-table" rowId="id" data={data}>
      <Column id="id" header="ID" />
      <Column
        id="name"
        header="Name"
        orderValue={row => row.lastName + ', ' + row.firstName}
        cell={row => (
          <React.Fragment>
            {row.firstName} {row.lastName}
          </React.Fragment>
        )}
      />
      <Column id="role" header="Role" />
    </Table>
  )
}

() => {
  // import {Table, Column} from '@clearc2/c2-table'
  const data = [
    { id: 1, firstName: 'Mickey', lastName: 'Patton', role: 'President' },
    { id: 2, firstName: 'Kevin', lastName: 'Bull', role: 'Developer' },
  ]
  return (
    <Table id="test-table" rowId="id" data={data}>
      <Column id="id" header="ID" />
      <ColumnGroup id="name" header="Name">
        <Column id="firstName" header="First" />
        <Column id="lastName" header="Last" />
      </ColumnGroup>
      <Column id="role" header="Role" />
    </Table>
  )
}

() => {
  // import {Table, Column} from '@clearc2/c2-table'
  const data = [
    { id: 1, name: 'Mickey Patton', role: 'President' },
    { id: 2, name: 'Kevin Bull', role: 'Developer' },
  ]
  return (
    <Table
      id="test-table"
      rowId="id"
      data={data}
      onExpand={({ row }) => <span>{row.role.toUpperCase()}</span>}
    >
      <Column id="id" header="ID" />
      <Column id="name" header="Name" />
    </Table>
  )
}

() => {
  // import {Table, Column, RowContext} from '@clearc2/c2-table'
  const Button = () => {
    const { expanded, toggleExpanded } = React.useContext(RowContext)
    return (
      <button onClick={toggleExpanded}>
        {expanded ? 'Hide' : 'Show'} Role
      </button>
    )
  }
  const data = [
    { id: 1, name: 'Mickey Patton', role: 'President' },
    { id: 2, name: 'Kevin Bull', role: 'Developer' },
  ]
  return (
    <Table
      id="test-table"
      rowId="id"
      data={data}
      onExpand={({ row }) => <span>{row.role.toUpperCase()}</span>}
    >
      <Column id="id" header="ID" />
      <Column id="name" header="Name" />
      <Column id="action" header=" " cell={() => <Button />} />
    </Table>
  )
}