Please review the code for comments around the structure of the columns array that will be passed to the DataTable component.

A very basic version of search has been added. This could be modified to pass custom filter/search functions through to be used.

```jsx
import DataTable from "../data-table"
import { data } from "./sample-data/unc-basketball-players"
import SelectMenu from "../select-menu"

const [value, setValue] = React.useState(null)

const handleChange = (event) => {
  setValue(event.target.value)
}

const columns = [
  {
    // The header will be camelCased and used as the column identifier;
    // if this does not match the key for the data, you may pass an `id`.
    id: "name",
    header: "Player name",
    // In most cases, you can rely on the data table component to render the value.
    // If you want a custom style or need to transform the data in some way, you can use a function.
    // The cell value and the original data object will be passed as props. In this example,
    // we're using name (the data value), but position, jerseyNumber, careerPPG, etc are also available.
    cell: (data, dataObj) => (
      <a
        href={`https://www.google.com/search?q=${dataObj.name.replace(
          " ",
          "+"
        )}+unc+basketball`}
        className="font-semibold"
        target="_blank"
      >
        {data}
      </a>
    ),
    // By default, columns are not searchable. Enabling search is easy:
    searchable: true,
  },
  {
    header: "Position",
    searchable: true,
  },
  {
    // careerPPG is passed as id, as this is key in our data set
    id: "careerPPG",
    header: "Points per game",
    // By default, columns are not sortable. Sorting can easily be enabled
    sortable: true,
    searchable: true,
  },
  {
    header: "Rebounds per game",
    sortable: true,
    searchable: true,
  },
  {
    header: "Assists per game",
    sortable: true,
    searchable: true,
  },
]

const options = [
  { value: "point guard", label: "Point Guard" },
  { value: "shooting guard", label: "Shooting Guard" },
  { value: "small forward", label: "Small Forward" },
  { value: "power forward", label: "Power Forward" },
  { value: "center", label: "Center" },
]

;<>
  <div className="flex mb-4">
    <input
      type="text"
      onChange={handleChange}
      className="border border-gray-200 px-2 py-1 rounded  w-full mr-4"
      placeholder="Search..."
    />
    <SelectMenu
      aria-label="Position"
      options={options}
      className="text-gray-900"
      onChange={handleChange}
      value={value}
      placeholder="Filter"
    />
  </div>
  <DataTable columns={columns} data={data} search={value} />
</>
```

### Pagination

To add pagination information and actions below the table, make use of the
`DataTable.Pagination` component which supports three slots:

- `DataTable.Pagination.PageCount` - Text showing the how far the table is paged (`1 - 10 of 34`)
- `DataTable.Pagination.PerPageSelect` - Select how many records to show at a time (`10 per page`)
- `DataTable.Pagination.Navigation` - Buttons for paging forward and backward

```jsx
import DataTable from "../data-table"
import { data as allData } from "./sample-data/unc-basketball-players"

const columns = [
  { id: "name", header: "Player name" },
  { header: "Position" },
  { id: "careerPPG", header: "Points per game" },
  { header: "Rebounds per game" },
  { header: "Assists per game" },
]

/**
 * In this example we're paginating in React, but in the real world
 * these parameters would come from a controller that would only
 * provide the data on provided page.
 *
 * Additionally, whenever page or perPage needs to change, we would
 * append query parameters to refetch: ?page=page+1, ?per_page=25.
 */
const [page, setPage] = React.useState(1)
const [perPage, setPerPage] = React.useState(10)
const total = allData.length
const data = allData.slice((page - 1) * perPage, page * perPage)

;<>
  <DataTable columns={columns} data={data}>
    <DataTable.Pagination>
      <DataTable.Pagination.PageCount
        page={page}
        perPage={perPage}
        pageSize={data.length}
        total={total}
      />
      <DataTable.Pagination.PerPageSelect
        value={perPage}
        onSelect={(perPage) => setPerPage(perPage)}
      />
      <DataTable.Pagination.Navigation
        onPreviousPage={() => setPage(page - 1)}
        onNextPage={() => setPage(page + 1)}
        hasPreviousPage={page !== 1}
        hasNextPage={page * perPage < total}
      />
    </DataTable.Pagination>
  </DataTable>
</>
```

Any of these can be omitted as needed. For instance, the `PageCount` could be omitted if
using cursor-based pagination where you wouldn't have current page number.

```jsx
import DataTable from "../data-table"
import { data as allData } from "./sample-data/unc-basketball-players"

const columns = [
  { id: "name", header: "Player name" },
  { header: "Position" },
  { id: "careerPPG", header: "Points per game" },
  { header: "Rebounds per game" },
  { header: "Assists per game" },
]

const [page, setPage] = React.useState(1)
const [perPage, setPerPage] = React.useState(10)
const total = allData.length
const data = allData.slice((page - 1) * perPage, page * perPage)

;<>
  <DataTable columns={columns} data={data}>
    <DataTable.Pagination>
      <DataTable.Pagination.PerPageSelect
        value={perPage}
        onSelect={(perPage) => setPerPage(perPage)}
      />
      <DataTable.Pagination.Navigation
        onPreviousPage={() => setPage(page - 1)}
        onNextPage={() => setPage(page + 1)}
        hasPreviousPage={page !== 1}
        hasNextPage={page * perPage < total}
      />
    </DataTable.Pagination>
  </DataTable>
</>
```

### Row expansion

Row expansion is automatically enabled when your data includes a `subRows` array in each row/object of the data prop you pass to the table.
The expand button will be disabled for rows with an empty `subRows` array.

```jsx
import DataTable from "../data-table"
import { data } from "./sample-data/fake-ads-data"

const columns = [
  { header: "Date" },
  { header: "Impressions" },
  { header: "Clicks" },
  { id: "rpom", header: "RPO/M" },
  { id: "total_revenue", header: "Net revenue" },
]

;<>
  <DataTable columns={columns} data={data}>
    <DataTable.ClientSidePagination />
  </DataTable>
</>
```

### Row selection

Row selection is enabled when you pass the prop `selectableRows={true}` to the table.
You should define `rowSelection` and `setRowSelection` from the caller.
`rowSelection` is an object using the index of each row as the identifier, so if you have the first and third row selected,
`rowSelection` will be `{0: true, 2: true}`

```jsx
import DataTable from "../data-table"
import { data } from "./sample-data/unc-basketball-players"

const [rowSelection, setRowSelection] = React.useState({})
const rowSelectionLength = Object.keys(rowSelection).length

const columns = [
  {
    id: "name",
    header: "Player name",
    searchable: true,
  },
  {
    header: "Position",
    searchable: true,
  },
  {
    id: "careerPPG",
    header: "Points per game",
    sortable: true,
    searchable: true,
  },
  {
    header: "Rebounds per game",
    sortable: true,
    searchable: true,
  },
  {
    header: "Assists per game",
    sortable: true,
    searchable: true,
  },
]

;<>
  {rowSelectionLength > 0 && (
    <div className="w-full border border-gray mb-2 p-3 rounded">
      You have selected {rowSelectionLength} player{rowSelectionLength == 1 ? `` : `s`}.
      Unselect all
      <button
        className="font-bold text-blue-500"
        onClick={() => {
          setRowSelection({})
        }}
      >
        here.
      </button>
    </div>
  )}
  <DataTable
    columns={columns}
    data={data}
    selectableRows={true}
    rowSelection={rowSelection}
    setRowSelection={setRowSelection}
  />
</>
```
