feat(DataTable): bind header checkbox to current page

kronostechnologies · Jan 14, 2025 · bfc95ae · bfc95ae
1 parent 736ad7e
commit bfc95ae
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 153 deletions.
diff --git a/packages/react/src/components/table/table.test.tsx b/packages/react/src/components/table/table.test.tsx
@@ -215,45 +215,39 @@ describe('Table', () => {
         expect(callback).toHaveBeenCalledTimes(1);
     });
 
-    test('onSelectedRows callbacks are called when row-checkbox is checked', () => {
+    test('onSelectedRowIds is called when row-checkbox is checked', () => {
         const onSelectedRowIdsChange = jest.fn();
-        const onSelectedRowsChange = jest.fn();
         const wrapper = mountWithTheme(
             <Table<TestData>
                 rowSelectionMode="multiple"
                 columns={columns}
                 data={data}
                 rowIdField="id"
                 onSelectedRowIdsChange={onSelectedRowIdsChange}
-                onSelectedRowsChange={onSelectedRowsChange}
             />,
         );
 
         getByTestId(wrapper, 'row-checkbox-0').find('input').simulate('change', { target: { checked: true } });
 
         expect(onSelectedRowIdsChange).toHaveBeenCalledWith([data[0].id]);
-        expect(onSelectedRowsChange).toHaveBeenCalledWith([data[0]]);
     });
 
-    test('onSelectedRows callbacks are called with all rows when row-checkbox-all is checked', () => {
+    test('onSelectedRowIds is called with all rows when row-checkbox-all is checked', () => {
         const onSelectedRowIdsChange = jest.fn();
-        const onSelectedRowsChange = jest.fn();
         const wrapper = mountWithTheme(
             <Table<TestData>
                 rowSelectionMode="multiple"
                 columns={columns}
                 data={data}
                 rowIdField="id"
                 onSelectedRowIdsChange={onSelectedRowIdsChange}
-                onSelectedRowsChange={onSelectedRowsChange}
             />,
         );
 
         getByTestId(wrapper, SELECT_ALL_CHECKBOX_TESTID).find('input')
             .simulate('change', { target: { checked: true } });
 
         expect(onSelectedRowIdsChange).toHaveBeenCalledWith(data.map((row) => row.id));
-        expect(onSelectedRowsChange).toHaveBeenCalledWith(data);
     });
 
     test('should hide select all checkbox', () => {
@@ -503,56 +497,4 @@ describe('Table', () => {
             .find('input')
             .prop('checked')).toBe(true);
     });
-
-    test('should exclude group row from selectedRows callback', () => {
-        const onSelectedRowIdsChange = jest.fn();
-        const onSelectedRowChange = jest.fn();
-        const dataWithSubRows: TableData<TestData>[] = [
-            {
-                id: '0',
-                column1: 'Hello',
-                column2: 'World',
-                subRows: [
-                    {
-                        id: '1',
-                        column1: 'Hello',
-                        column2: 'Planet',
-                    },
-                    {
-                        id: '2',
-                        column1: 'Hello',
-                        column2: 'Galaxy',
-                    },
-                ],
-            },
-        ];
-        const wrapper = mountWithTheme(
-            <Table<TestData>
-                rowSelectionMode="multiple"
-                columns={columns}
-                data={dataWithSubRows}
-                rowIdField="id"
-                excludeGroupsFromSelection
-                onSelectedRowIdsChange={onSelectedRowIdsChange}
-                onSelectedRowsChange={onSelectedRowChange}
-                expandChildrenOnRowSelection
-            />,
-        );
-
-        getByTestId(wrapper, 'row-checkbox-0')
-            .find('input')
-            .simulate('change', { target: { checked: true } });
-
-        expect(onSelectedRowIdsChange).toHaveBeenLastCalledWith(['1', '2']);
-        expect(onSelectedRowChange).toHaveBeenLastCalledWith(dataWithSubRows[0].subRows);
-        expect(getByTestId(wrapper, 'row-checkbox-0')
-            .find('input')
-            .prop('checked')).toBe(true);
-        expect(getByTestId(wrapper, 'row-checkbox-1')
-            .find('input')
-            .prop('checked')).toBe(true);
-        expect(getByTestId(wrapper, 'row-checkbox-2')
-            .find('input')
-            .prop('checked')).toBe(true);
-    });
 });
diff --git a/packages/react/src/components/table/table.tsx b/packages/react/src/components/table/table.tsx
@@ -199,9 +199,9 @@ function getSelectionColumn<T extends object>(
             column.header = ({ table }) => (
                 <Checkbox
                     data-testid="row-checkbox-all"
-                    checked={table.getIsAllRowsSelected()}
-                    indeterminate={table.getIsSomeRowsSelected()}
-                    onChange={table.getToggleAllRowsSelectedHandler()}
+                    checked={table.getIsAllPageRowsSelected()}
+                    indeterminate={table.getIsSomePageRowsSelected()}
+                    onChange={table.getToggleAllPageRowsSelectedHandler()}
                 />
             );
         }
@@ -348,7 +348,6 @@ export interface TableProps<T extends object> {
     data: T[];
     defaultSort?: ColumnSort;
     columns: TableColumn<T>[];
-    excludeGroupsFromSelection?: boolean;
     expandableRows?: 'single' | 'multiple';
     expandChildrenOnRowSelection?: boolean;
     hideSelectAll?: boolean;
@@ -380,9 +379,7 @@ export interface TableProps<T extends object> {
 
     onRowClick?(row: Row<T>): void;
 
-    onSelectedRowIdsChange?(selectedRows: TableRowId[]): void;
-
-    onSelectedRowsChange?(selectedRows: T[]): void;
+    onSelectedRowIdsChange?(selectedRowIds: TableRowId[]): void;
 
     onSort?(sort: ColumnSort | null): void;
 }
@@ -394,7 +391,6 @@ export const Table = <T extends object>({
     rowIdField,
     defaultSort,
     columns: providedColumns,
-    excludeGroupsFromSelection = false,
     expandableRows,
     expandChildrenOnRowSelection,
     hideSelectAll = false,
@@ -408,7 +404,6 @@ export const Table = <T extends object>({
     manualSort = false,
     onRowClick,
     onSelectedRowIdsChange,
-    onSelectedRowsChange,
     onSort,
 }: TableProps<T>): ReactElement => {
     const { t } = useTranslation('table');
@@ -506,19 +501,7 @@ export const Table = <T extends object>({
             const currentTable = tableInstance.current;
 
             if (currentTable) {
-                const emittedRowIds = newSelectedRowIds.filter(
-                    (rowId) => !excludeGroupsFromSelection || !currentTable.getRow(rowId).subRows.length,
-                );
-
-                onSelectedRowIdsChange?.(emittedRowIds);
-
-                if (onSelectedRowsChange) {
-                    const emittedSelectedRows = emittedRowIds
-                        .map((rowId) => currentTable.getRow(rowId))
-                        .map((row) => row.original);
-
-                    onSelectedRowsChange(emittedSelectedRows);
-                }
+                onSelectedRowIdsChange?.(newSelectedRowIds);
             }
         },
     };