Fix multi-row selection state issue when (de)selecting all rows for deletion.

Author: ignatz

trailbase-assets/js/admin/src/components/Table.tsx

@@ -1,6 +1,7 @@
 import {
   For,
   Show,
+  createEffect,
   createMemo,
   createSignal,
   splitProps,
@@ -14,9 +15,11 @@ import {
 } from "@tanstack/solid-table";
 import type {
   ColumnDef,
-  Table as TableType,
-  PaginationState,
   OnChangeFn,
+  PaginationState,
+  Row,
+  RowSelectionState,
+  Table as TableType,
 } from "@tanstack/solid-table";
 
 import { Button } from "@/components/ui/button";
@@ -60,13 +63,18 @@ type Props<TData, TValue> = {
   pagination?: PaginationState;
   onPaginationChange?: OnChangeFn<PaginationState>;
 
-  onRowSelection?: (idx: number, row: TData, value: boolean) => void;
+  onRowSelection?: (rows: Row<TData>[], value: boolean) => void;
   onRowClick?: (idx: number, row: TData) => void;
 };
 
 export function DataTable<TData, TValue>(props: Props<TData, TValue>) {
   const [local] = splitProps(props, ["columns", "data"]);
-  const [rowSelection, setRowSelection] = createSignal({});
+  const [rowSelection, setRowSelection] = createSignal<RowSelectionState>({});
+  createEffect(() => {
+    // NOTE: because we use our own state for row selection, reset it when data changes.
+    local.data();
+    setRowSelection({});
+  });
 
   const paginationEnabled = () => props.onPaginationChange !== undefined;
   const [paginationState, setPaginationState] =
@@ -82,7 +90,7 @@ export function DataTable<TData, TValue>(props: Props<TData, TValue>) {
       };
     });
 
-  const columns = createMemo(() => {
+  const columns = () => {
     const onRowSelection = props.onRowSelection;
     if (!onRowSelection) {
       return local.columns();
@@ -93,18 +101,28 @@ export function DataTable<TData, TValue>(props: Props<TData, TValue>) {
         id: "select",
         header: (ctx) => (
           <Checkbox
-            indeterminate={ctx.table.getIsSomePageRowsSelected()}
             checked={ctx.table.getIsAllPageRowsSelected()}
-            onChange={(value) => ctx.table.toggleAllPageRowsSelected(!!value)}
+            onChange={(value: boolean) => {
+              console.debug(
+                "Select all",
+                value,
+                ctx.table.getIsSomeRowsSelected(),
+              );
+              ctx.table.toggleAllPageRowsSelected(value);
+
+              const allRows = ctx.table.getRowModel();
+              onRowSelection(allRows.rows, value);
+            }}
             aria-label="Select all"
           />
         ),
         cell: (ctx) => (
           <Checkbox
             checked={ctx.row.getIsSelected()}
-            onChange={(value) => {
-              onRowSelection(ctx.row.index, ctx.row.original, value);
+            onChange={(value: boolean) => {
               ctx.row.toggleSelected(value);
+
+              onRowSelection([ctx.row], value);
             }}
             aria-label="Select row"
             onClick={(event: Event) => {
@@ -118,13 +136,13 @@ export function DataTable<TData, TValue>(props: Props<TData, TValue>) {
       } as ColumnDef<TData, TValue>,
       ...local.columns(),
     ];
-  });
+  };
 
-  const table = createMemo(() =>
-    createSolidTable({
-      get data() {
-        return local.data() || [];
-      },
+  const table = createMemo(() => {
+    console.debug("table data rebuild");
+
+    return createSolidTable({
+      data: local.data() || [],
       state: {
         pagination: paginationState(),
         rowSelection: rowSelection(),
@@ -136,7 +154,7 @@ export function DataTable<TData, TValue>(props: Props<TData, TValue>) {
       // enableColumnResizing: true,
       // columnResizeMode: 'onChange',
 
-      // pagination {
+      // pagination:
       manualPagination: paginationEnabled(),
       onPaginationChange: (state) => {
         setPaginationState(state);
@@ -146,7 +164,6 @@ export function DataTable<TData, TValue>(props: Props<TData, TValue>) {
         }
       },
       rowCount: props.rowCount,
-      // } pagination
 
       // Just means, the input data is already filtered.
       manualFiltering: true,
@@ -157,10 +174,11 @@ export function DataTable<TData, TValue>(props: Props<TData, TValue>) {
       // NOTE: In our current setup this causes infinite reload cycles when paginating.
       autoResetPageIndex: false,
 
+      enableRowSelection: true,
       enableMultiRowSelection: props.onRowSelection ? true : false,
       onRowSelectionChange: setRowSelection,
-    }),
-  );
+    });
+  });
 
   return (
     <>

trailbase-assets/js/admin/src/components/tables/TablePane.tsx

@@ -8,6 +8,7 @@ import type {
 } from "@tanstack/solid-table";
 import { createWritableMemo } from "@solid-primitives/memo";
 import { createColumnHelper } from "@tanstack/solid-table";
+import type { Row } from "@tanstack/solid-table";
 import type { DialogTriggerProps } from "@kobalte/core/dialog";
 import { asyncBase64Encode } from "trailbase";
 
@@ -593,15 +594,19 @@ function RowDataTable(props: {
                   }
                   onRowSelection={
                     mutable()
-                      ? (_idx: number, row: RowData, value: boolean) => {
-                          const rows = new Set(selectedRows());
-                          const rowId = row[pkColumnIndex()] as string;
-                          if (value) {
-                            rows.add(rowId);
-                          } else {
-                            rows.delete(rowId);
+                      ? (rows: Row<RowData>[], value: boolean) => {
+                          const newSelection = new Set(selectedRows());
+                          for (const row of rows) {
+                            const rowId = row.original[
+                              pkColumnIndex()
+                            ] as string;
+                            if (value) {
+                              newSelection.add(rowId);
+                            } else {
+                              newSelection.delete(rowId);
+                            }
                           }
-                          setSelectedRows(rows);
+                          setSelectedRows(newSelection);
                         }
                       : undefined
                   }
@@ -644,20 +649,17 @@ function RowDataTable(props: {
             variant="destructive"
             disabled={selectedRows().size === 0}
             onClick={() => {
-              const ids = Array.from(selectedRows());
+              const ids = [...selectedRows()];
               if (ids.length === 0) {
                 return;
               }
 
+              setSelectedRows(new Set<string>());
               deleteRows(table().name.name, {
                 primary_key_column: columns()[pkColumnIndex()].name,
                 values: ids,
               })
-                // eslint-disable-next-line solid/reactivity
-                .then(() => {
-                  setSelectedRows(new Set<string>());
-                  rowsRefetch();
-                })
+                .finally(rowsRefetch)
                 .catch(console.error);
             }}
           >
@@ -868,18 +870,17 @@ export function TablePane(props: {
                         onRowSelection={
                           hidden()
                             ? undefined
-                            : (
-                                _idx: number,
-                                index: TableIndex,
-                                value: boolean,
-                              ) => {
-                                const rows = new Set(selectedIndexes());
-                                if (value) {
-                                  rows.add(index.name.name);
-                                } else {
-                                  rows.delete(index.name.name);
+                            : (rows: Row<TableIndex>[], value: boolean) => {
+                                const newSelection = new Set(selectedIndexes());
+                                for (const row of rows) {
+                                  const name = row.original.name.name;
+                                  if (value) {
+                                    newSelection.add(name);
+                                  } else {
+                                    newSelection.delete(name);
+                                  }
                                 }
-                                setSelectedIndexes(rows);
+                                setSelectedIndexes(newSelection);
                               }
                         }
                       />