Table

<Table width="w-full">
  <TableHead>
    <TableRow>
      <TableHeaderCell scope="col">Query</TableHeaderCell>
      <TableHeaderCell scope="col">Searches</TableHeaderCell>
      <TableHeaderCell scope="col">
        <abbr title="Click Through Rate">CTR</abbr>
      </TableHeaderCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableDataCell>iPhone</TableDataCell>
      <TableDataCell>88,918</TableDataCell>
      <TableDataCell>78.2%</TableDataCell>
    </TableRow>
    <TableRow>
      <TableDataCell>Android</TableDataCell>
      <TableDataCell>72,873</TableDataCell>
      <TableDataCell>68.8%</TableDataCell>
    </TableRow>
    <TableRow>
      <TableDataCell>Switch</TableDataCell>
      <TableDataCell>42,908</TableDataCell>
      <TableDataCell>83.1%</TableDataCell>
    </TableRow>
  </TableBody>
</Table>

function SpacingExample() {
  const [spacing, setSpacing] = React.useState('cozy');
  return (
    <>
      <RadioGroup
        onChange={(e) => setSpacing(e.target.value)}
        value={spacing}
        name="spacing"
        inline
        spacing="space-x-4"
        margin="mb-4"
      >
        <Radio value="compact">Compact</Radio>
        <Radio value="cozy">Cozy</Radio>
        <Radio value="comfortable">Comfortable</Radio>
      </RadioGroup>
      <Table width="w-full" spacing={spacing}>
        <TableHead>
          <TableRow>
            <TableHeaderCell scope="col">Query</TableHeaderCell>
            <TableHeaderCell scope="col">Searches</TableHeaderCell>
            <TableHeaderCell scope="col">
              <abbr title="Click Through Rate">CTR</abbr>
            </TableHeaderCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableDataCell>iPhone</TableDataCell>
            <TableDataCell>88,918</TableDataCell>
            <TableDataCell>78.2%</TableDataCell>
          </TableRow>
          <TableRow>
            <TableDataCell>Android</TableDataCell>
            <TableDataCell>72,873</TableDataCell>
            <TableDataCell>68.8%</TableDataCell>
          </TableRow>
          <TableRow>
            <TableDataCell>Switch</TableDataCell>
            <TableDataCell>42,908</TableDataCell>
            <TableDataCell>83.1%</TableDataCell>
          </TableRow>
        </TableBody>
      </Table>
    </>
  );
}

function Example() {
  const SortableTable = ({ columns, data }) => {
    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = ReactTable.useTable(
      {
        data,
        columns,
      },
      ReactTable.useSortBy,
    );
    // We don't want to render all 2000 rows for this example, so cap
    // it at 20 for this use case
    const firstPageRows = rows.slice(0, 20);
    return (
      <>
        <Table width="w-full" {...getTableProps()}>
          <TableHead>
            {headerGroups.map((headerGroup) => (
              <TableRow {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column, i) => {
                  let sorted;
                  if (column.isSorted) {
                    sorted = column.isSortedDesc ? 'desc' : 'asc';
                  }
                  return (
                    <TableHeaderCell
                      width={i === 0 ? 'w-1/2' : 'w-1/4'}
                      {...column.getHeaderProps(column.getSortByToggleProps())}
                      sorted={sorted}
                    >
                      {column.render('Header')}
                    </TableHeaderCell>
                  );
                })}
              </TableRow>
            ))}
          </TableHead>
          <TableBody {...getTableBodyProps()}>
            {firstPageRows.map((row, i) => {
              prepareRow(row);
              return (
                <TableRow {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    return <TableDataCell {...cell.getCellProps()}>{cell.render('Cell')}</TableDataCell>;
                  })}
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
        <Text margin="mt-4">Showing the first 20 results of {rows.length} rows.</Text>
      </>
    );
  };
  const columns = React.useMemo(
    () => [
      {
        Header: 'Query',
        accessor: 'query',
      },
      {
        Header: 'Searches',
        accessor: 'searches',
      },
      {
        Header: 'CTR',
        accessor: 'ctr',
      },
    ],
    [],
  );
  const data = React.useMemo(() => makeData(2000), []);
  return <SortableTable columns={columns} data={data} />;
}