fix: row selection when grouping (#302)

src/components/Table/common/utils.ts

@@ -323,15 +323,8 @@ function filterGroupedColumn<T extends RowData>(column: Column<T>): boolean {
  * @returns true if a row is selected.
  */
 export function isAnyRowSelected<T extends RowData>(table: Table<T>): boolean {
-  const {
-    getIsAllPageRowsSelected,
-    getIsSomePageRowsSelected,
-    options: { enableRowSelection },
-  } = table;
-  return Boolean(
-    enableRowSelection &&
-      (getIsSomePageRowsSelected() || getIsAllPageRowsSelected())
-  );
+  const { getIsAllPageRowsSelected, getIsSomePageRowsSelected } = table;
+  return getIsSomePageRowsSelected() || getIsAllPageRowsSelected();
 }
 
 /**

src/components/Table/table.tsx

@@ -159,6 +159,7 @@ TableProps<T>): JSX.Element => {
 
   const onRowSelectionChange = useCallback(
     (updater: Updater<RowSelectionState>): void => {
+      // TODO(cc) refactor `onRowSelectionChange` to /options/rowSelection/hook.ts see onGroupingChange.
       exploreDispatch({
         payload:
           typeof updater === "function" ? updater(rowSelection) : updater,
@@ -198,7 +199,7 @@ TableProps<T>): JSX.Element => {
     data: items,
     enableColumnFilters: true, // client-side filtering.
     enableFilters: true, // client-side filtering.
-    enableMultiSort: clientFiltering,
+    enableMultiSort: clientFiltering, // TODO(cc) move to sorting options; default to false and let the table options in config flag this value.
     enableRowPreview,
     enableRowSelection,
     getCoreRowModel: getCoreRowModel(),

src/components/TableCreator/options/hook.ts

@@ -2,6 +2,7 @@ import { RowData, TableOptions } from "@tanstack/react-table";
 import { useConfig } from "../../../hooks/useConfig";
 import { useExpandedOptions } from "./expanded/hook";
 import { useGroupingOptions } from "./grouping/hook";
+import { useRowSelectionOptions } from "./rowSelection/hook";
 import { useSortingOptions } from "./sorting/hook";
 
 export function useTableOptions<T extends RowData>(): Partial<TableOptions<T>> {
@@ -12,10 +13,12 @@ export function useTableOptions<T extends RowData>(): Partial<TableOptions<T>> {
   } = useConfig();
   const expandedOptions = useExpandedOptions<T>();
   const groupingOptions = useGroupingOptions();
+  const rowSelectionOptions = useRowSelectionOptions<T>();
   const sortingOptions = useSortingOptions<T>();
   return {
     ...expandedOptions,
     ...groupingOptions,
+    ...rowSelectionOptions,
     ...sortingOptions, // TODO(cc) merge of all sorting options.
     ...tableOptions,
     initialState: {

src/components/TableCreator/options/rowSelection/constants.ts

@@ -0,0 +1,10 @@
+import { RowData, RowSelectionOptions } from "@tanstack/react-table";
+
+export const ROW_SELECTION_OPTIONS: Pick<
+  RowSelectionOptions<RowData>,
+  "enableRowSelection" | "enableSubRowSelection" | "enableMultiRowSelection"
+> = {
+  enableMultiRowSelection: false,
+  enableRowSelection: false,
+  enableSubRowSelection: false,
+};

src/components/TableCreator/options/rowSelection/hook.ts

@@ -0,0 +1,8 @@
+import { RowData, RowSelectionOptions } from "@tanstack/react-table";
+import { ROW_SELECTION_OPTIONS } from "./constants";
+
+export function useRowSelectionOptions<
+  T extends RowData
+>(): RowSelectionOptions<T> {
+  return { ...(ROW_SELECTION_OPTIONS as RowSelectionOptions<T>) };
+}

src/config/entities.ts

@@ -271,7 +271,6 @@ export interface ListViewConfig {
   disablePagination?: boolean;
   enableDownload?: boolean;
   enableRowPreview?: boolean;
-  enableRowSelection?: boolean;
   enableTab?: boolean;
   listHero?: ComponentsConfig;
   rowPreviewView?: ComponentsConfig; // Row preview view is expected to be a modal or drawer or similar.

src/providers/exploreState/initializer/utils.ts

@@ -153,18 +153,29 @@ function initColumnVisibility(entityConfig: EntityConfig): VisibilityState {
   const {
     list: {
       columns,
-      tableOptions: { initialState: { columnVisibility = {} } = {} } = {},
+      tableOptions: {
+        enableRowSelection,
+        initialState: { columnVisibility = {} } = {},
+      } = {},
     },
-    listView: { enableRowSelection = false } = {},
   } = entityConfig;
   return {
     [ACCESSOR_KEYS.ROW_POSITION]: false, // Explicitly setting row position to false; required - currently `columnVisibility` is initialized from columns configuration.
-    [ACCESSOR_KEYS.SELECT]: enableRowSelection,
+    [ACCESSOR_KEYS.SELECT]: Boolean(enableRowSelection),
     ...getInitialTableColumnVisibility(columns),
     ...columnVisibility, // `columnVisibility` is managed by ExploreState; use table options to override this setting.
   };
 }
 
+/**
+ * Returns the initial `enableRowSelection` option for the specified entity list configuration.
+ * @param entityConfig - Entity configuration.
+ * @returns initial `enableRowSelection` option.
+ */
+function initEnableRowSelection(entityConfig: EntityConfig): boolean {
+  return Boolean(entityConfig.list.tableOptions?.enableRowSelection);
+}
+
 /**
  * Initializes entity page state.
  * @param config - Site config.
@@ -177,7 +188,7 @@ function initEntityPageState(config: SiteConfig): EntityPageStateMapper {
       [entity.route]: {
         categoryGroupConfigKey: initCategoryGroupConfigKey(config, entity),
         columnsVisibility: initColumnVisibility(entity),
-        enableRowSelection: Boolean(entity.listView?.enableRowSelection),
+        enableRowSelection: initEnableRowSelection(entity),
         grouping: initGrouping(entity),
         rowPreview: undefined,
         rowSelection: {},