Datatable Example

const columns = useMemo<ColumnDef<Person>[]>(
  () => [
    {
      id: 'select',
      size: 20,
      header: ({table}) => (
        <Checkbox
          className="flex"
          checked={
            table.getIsAllPageRowsSelected() ||
            (table.getIsSomePageRowsSelected() && 'indeterminate')
          }
          onCheckedChange={(value) =>
            table.toggleAllPageRowsSelected(!!value)
          }
          aria-label="Select all"
        />
      ),
      cell: ({row}) => (
        <Checkbox
          className="flex"
          checked={row.getIsSelected()}
          onClick={(e) => e.stopPropagation()}
          onCheckedChange={(value) => {
            row.toggleSelected(!!value)
          }}
          aria-label="Select row"
        />
      ),
      enableSorting: false,
      enableHiding: false,
      enableResizing: false
    },
    {
      id: 'firstName',
      accessorKey: 'firstName',
      enableHiding: true,
      enableSorting: false,
      cell: (info) => (
        <HighlightSearchTerm text={info.getValue() as string} />
      ),
      header: 'First name'
    },
    {
      accessorFn: (row) => row.lastName,
      id: 'lastName',
      enableHiding: false,
      cell: (info) => (
        <HighlightSearchTerm text={info.getValue() as string} />
      ),
      header: (header) => (
        <DataTableOptionsHeader
          column={header.column}
          title={'Last name'}
          menuItems={
            <>
              <DropdownMenuItem onClick={() => console.log(header.column)}>
                Log column
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => console.log(header.column)}>
                Log column 2
              </DropdownMenuItem>
            </>
          }
        />
      )
    },
    {
      id: 'age',
      accessorKey: 'age',
      header: 'Age'
    }], [])

<DataTable
      data={data}
      columns={columns}
      isLoading={loading}
      i18nKey={isCheckedI18n ? frenchI18nKey : {}}
      tableOptions={{
        onRowSelectionChange: setRowSelection,
        getSortedRowModel: getSortedRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        onPaginationChange: setPagination,
        enableRowSelection: (row) => row.original.age > 18, //only enable row selection for adults
        onColumnOrderChange: setColumnOrder
      }}
      tableState={{
        rowSelection,
        pagination,
        columnOrder,
        columnPinning: {
          left: ['select']
        } //Force left column on the left, can not be pinned.
      }}
      selection={{
        createDefaultSelectionColumn: true,
        totalSelectableCount: totalSelectable,
        defaultSelectionHeaderActions: ({ selectionState }) => (
          <>
            <Button
              variant="ghost-destructive"
              size="icon"
              className="border"
              onClick={() => console.log(selectionState)}>
              <Trash className="size-4" />
            </Button>
          </>
        ),
      }}
      onClickRow={(row) => console.log(row)} // Action on click
    />