select checkboxes

src/app/story/columns.tsx

@@ -6,11 +6,13 @@ import { Button } from "@/components/ui/button"
 import GenreBadges from "app/ui/genreBadges"
 import { actions } from "app/ui/tables/actions"
 import { TextInputCell } from "app/ui/inputs/textInput"
+import { selectCol } from "app/ui/tables/selectColumn"
 
 
 const columnHelper = createColumnHelper<StoryWithGenres>()
 
 export const columns: ColumnDef<StoryWithGenres>[] = [
+  selectCol,
   {
     accessorKey: "title",
     header: ({ column }) => {

src/app/tailwind.css

@@ -1072,10 +1072,6 @@ body {
   align-items: flex-start;
 }
 
-.items-end {
-  align-items: flex-end;
-}
-
 .items-center {
   align-items: center;
 }

src/app/ui/tables/data-table.tsx

@@ -46,11 +46,12 @@ import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, Di
 import pluralize from "app/lib/pluralize"
 import { updateTextField } from "app/lib/update"
 
-interface DataTableProps<TData, TValue> {
+export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
 }
 
+export type DataTable = ReturnType<typeof DataTable>
 
 export function DataTable<TData, TValue>({
   columns,
@@ -85,13 +86,12 @@ export function DataTable<TData, TValue>({
     //this is where you put arbitrary functions etc to make them accessible via the table api
     meta: {
       updateTextField,
-      //TODO - move select row action here so it can be accessed from within a cell
-      selectRow: () => { }
     }
   })
 
 
 
+
   const pathname: Pathname = usePathname()
   const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
@@ -221,8 +221,6 @@ export function DataTable<TData, TValue>({
                     key={row.id}
                     data-state={row.getIsSelected() && "selected"}
                     tabIndex={0}
-                    //check if context menu is open, so as not to select the row on clicking a menu item
-                    onClick={() => { if (!isContextMenuOpen) { row.toggleSelected() } }}
                   >
                     {row.getVisibleCells().map((cell) => (
                       <TableCell key={cell.id}>

src/app/ui/tables/selectColumn.tsx

@@ -0,0 +1,27 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import { CellContext, Column, ColumnDef, ColumnMeta, Header, HeaderContext, RowSelectionTableState, Table, TableState } from "@tanstack/react-table";
+import { DataTable, DataTableProps } from "./data-table";
+
+export const selectCol = {
+  id: "select",
+  header: (props: HeaderContext<DataTable, string>) => {
+    return (
+      <Checkbox
+        checked={props.table.getIsAllRowsSelected()}
+        onCheckedChange={props.table.toggleAllRowsSelected}
+      />
+
+    )
+  },
+
+  cell: (props: CellContext<DataTable, string>) => {
+
+    return (
+      <Checkbox
+        checked={props.row.getIsSelected()}
+        onCheckedChange={props.row.toggleSelected}
+      />
+    )
+  }
+}
+