Data Table

import {
  DataTable,
  DataTableColumnHeader,
  createDataTableColumnHelper,
} from "@/components/ui/data-table"

const helper = createDataTableColumnHelper<Row>()

const columns = helper.columns([
  helper.accessor("path", {
    header: ({ column }) => <DataTableColumnHeader column={column} title="Page" />,
  }),
  helper.accessor("views", {
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Views" align="right" />
    ),
    cell: ({ row }) => <div className="text-right">{row.original.views}</div>,
  }),
])

<DataTable columns={columns} data={rows} searchKey="path" />

// Or own the instance and lay the parts out yourself.
const table = useDataTable({ columns, data: rows, pageSize: 5 })

<DataTableToolbar>
  <DataTableSearch table={table} column="path" />
  <DataTableViewOptions table={table} className="ml-auto" />
</DataTableToolbar>
<DataTableContent table={table} pending={isFetching} stickyHeader maxHeight={340} />
<DataTablePagination table={table} pageSizeOptions={[5, 10, 25]} />