feat: row selection should clear when entity list is filtered (#84)

src/components/Table/common/utils.ts

@@ -341,12 +341,13 @@ function getVisibleRowsTableData<T>(rows: Row<T>[]): TableData[][] {
  */
 export function isAnyRowSelected<T>(table: Table<T>): boolean {
   const {
-    getIsAllRowsSelected,
-    getIsSomeRowsSelected,
+    getIsAllPageRowsSelected,
+    getIsSomePageRowsSelected,
     options: { enableRowSelection },
   } = table;
   return Boolean(
-    enableRowSelection && (getIsSomeRowsSelected() || getIsAllRowsSelected())
+    enableRowSelection &&
+      (getIsSomePageRowsSelected() || getIsAllPageRowsSelected())
   );
 }
 

src/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.tsx

@@ -14,16 +14,16 @@ export const HeadSelectionCell = <T extends RowData>({
   tableInstance,
 }: HeadSelectionCellProps<T>): JSX.Element => {
   const {
-    getIsAllRowsSelected,
-    getIsSomeRowsSelected,
+    getIsAllPageRowsSelected,
+    getIsSomePageRowsSelected,
     getToggleAllRowsSelectedHandler,
   } = tableInstance;
   return (
     <Checkbox
-      checked={getIsAllRowsSelected()}
+      checked={getIsAllPageRowsSelected()}
       checkedIcon={<CheckedIcon />}
       icon={<UncheckedIcon />}
-      indeterminate={getIsSomeRowsSelected()}
+      indeterminate={getIsSomePageRowsSelected()}
       indeterminateIcon={<IndeterminateIcon />}
       onChange={getToggleAllRowsSelectedHandler()}
     />

src/components/Table/table.tsx

@@ -14,6 +14,7 @@ import {
   useReactTable,
   VisibilityState,
 } from "@tanstack/react-table";
+import { CoreOptions } from "@tanstack/table-core";
 import React, { useEffect } from "react";
 import { track } from "../../common/analytics/analytics";
 import {
@@ -52,6 +53,7 @@ import { GridTable } from "./table.styles";
 export interface TableProps<T extends object> {
   columns: ColumnDef<T>[];
   count?: number;
+  getRowId?: CoreOptions<T>["getRowId"];
   initialState: InitialTableState;
   items: T[];
   listView?: ListViewConfig;
@@ -68,6 +70,7 @@ export interface TableProps<T extends object> {
  * Uncontrolled table will take advantage of React Table's state and will be used for static loads.
  * @param tableProps - Set of props required for displaying the table.
  * @param tableProps.columns - Set of columns to display.
+ * @param tableProps.getRowId - Function to customize the row ID.
  * @param tableProps.initialState - Initial table state.
  * @param tableProps.items - Row data to display.
  * @param tableProps.listView - List view configuration.
@@ -76,6 +79,7 @@ export interface TableProps<T extends object> {
  */
 export const TableComponent = <T extends object>({
   columns,
+  getRowId,
   initialState,
   items,
   listView,
@@ -160,6 +164,7 @@ TableProps<T>): JSX.Element => {
       : undefined,
     getFilteredRowModel: clientFiltering ? getFilteredRowModel() : undefined,
     getPaginationRowModel: getPaginationRowModel(),
+    getRowId,
     getSortedRowModel: clientFiltering ? getSortedRowModel() : undefined,
     initialState,
     manualPagination: clientFiltering,

src/components/TableCreator/tableCreator.tsx

@@ -1,5 +1,5 @@
 import { CellContext, ColumnDef, ColumnSort } from "@tanstack/react-table";
-import { HeaderContext, RowData } from "@tanstack/table-core";
+import { CoreOptions, HeaderContext, RowData } from "@tanstack/table-core";
 import React, { useMemo } from "react";
 import { Pagination } from "../../common/entities";
 import { ColumnConfig, ListViewConfig } from "../../config/entities";
@@ -21,6 +21,7 @@ import { TableCreator as TableCreatorContainer } from "./tableCreator.styles";
 export interface TableCreatorProps<T> {
   columns: ColumnConfig<T>[];
   defaultSort: ColumnSort | undefined;
+  getRowId?: CoreOptions<T>["getRowId"];
   items: T[];
   listView?: ListViewConfig;
   loading?: boolean;
@@ -54,6 +55,7 @@ const createRowSelectionCell = <T extends RowData>() =>
 export const TableCreator = <T extends object>({
   columns,
   defaultSort,
+  getRowId,
   items,
   listView,
   loading,
@@ -97,6 +99,7 @@ export const TableCreator = <T extends object>({
       <Table<T>
         columns={columnDefs}
         count={pageCount}
+        getRowId={getRowId}
         initialState={initialState}
         items={items}
         listView={listView}

src/providers/exploreState.tsx

@@ -50,6 +50,7 @@ import {
   getFilterCount,
   patchEntityListItems,
   resetPage,
+  resetRowSelection,
   updateEntityPageState,
   updateEntityPageStateSorting,
   updateEntityStateByCategoryGroupConfigKey,
@@ -611,6 +612,7 @@ function exploreReducer(
       });
       return {
         ...state,
+        entityPageState: resetRowSelection(state),
         filterCount: getFilterCount(filterState),
         filterState,
         paginationState: resetPage(state.paginationState),

src/providers/exploreState/utils.ts

@@ -155,6 +155,30 @@ export function resetPage(paginationState: PaginationState): PaginationState {
   return nextPaginationState;
 }
 
+/**
+ * Resets row selection for the current entity and entities that share the same category group config key.
+ * @param state - Explore state.
+ * @returns entity page state mapper with row selection reset.
+ */
+export function resetRowSelection(state: ExploreState): EntityPageStateMapper {
+  const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
+    state.tabValue,
+    state.entityPageState
+  );
+  return Object.entries(state.entityPageState).reduce(
+    (acc, [entityPath, entityPageState]) => {
+      if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) {
+        return {
+          ...acc,
+          [entityPath]: { ...entityPageState, rowSelection: {} },
+        };
+      }
+      return { ...acc, [entityPath]: entityPageState };
+    },
+    {} as EntityPageStateMapper
+  );
+}
+
 /**
  * Sets entity state for the given category group config key.
  * @param categoryGroupConfigKey - Category group config key.

src/views/ExploreView/exploreView.tsx

@@ -292,7 +292,7 @@ function renderList(
     relatedListItems,
     tabValue,
   } = exploreState;
-  const { list, listView } = entityConfig;
+  const { getId: getRowId, list, listView } = entityConfig;
   const { columns: columnsConfig, defaultSort } = list;
 
   if (!exploreState || !tabValue) {
@@ -309,6 +309,7 @@ function renderList(
     <TableCreator
       columns={columnsConfig}
       defaultSort={defaultSort}
+      getRowId={getRowId}
       items={
         isRelatedView && relatedListItems ? relatedListItems : listItems ?? []
       }