Merge pull request marmelab#11088 from marmelab/Fic-ColumnsSelector-cannot-hide-DataTable-cols-with-no-source

Fix ColumnsSelector cannot hide DataTable.Col items with no source

Author: slax57

packages/ra-ui-materialui/src/list/datatable/ColumnsButton.spec.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { Basic, FewColumns, LabelTypes } from './ColumnsButton.stories';
+import {
+    Basic,
+    FewColumns,
+    LabelTypes,
+    NoSource,
+} from './ColumnsButton.stories';
 
 describe('ColumnsButton', () => {
     it('should render one row per column unless they are hidden', async () => {
@@ -56,4 +61,11 @@ describe('ColumnsButton', () => {
             ).toHaveLength(8);
         });
     });
+    it('should work with columns that have no source', async () => {
+        render(<NoSource />);
+        await screen.findByText('c0 value');
+        fireEvent.click(await screen.findByText('ra.action.select_columns'));
+        fireEvent.click(await screen.findByLabelText('c_0'));
+        expect(screen.queryByText('c0 value')).toBeNull();
+    });
 });

packages/ra-ui-materialui/src/list/datatable/ColumnsButton.stories.tsx

@@ -101,3 +101,15 @@ export const LabelTypes = () => (
         </DataTable>
     </Wrapper>
 );
+
+export const NoSource = () => (
+    <Wrapper aside={<ColumnsButton />} actions={null}>
+        <DataTable bulkActionButtons={false}>
+            <DataTable.Col label="c_0">c0 value</DataTable.Col>
+            <DataTable.Col label="c_1">c1 value</DataTable.Col>
+            <DataTable.Col label="c_2">c2 value</DataTable.Col>
+            <DataTable.Col label="c_3">c3 value</DataTable.Col>
+            <DataTable.Col label="c_4">c4 value</DataTable.Col>
+        </DataTable>
+    </Wrapper>
+);

packages/ra-ui-materialui/src/list/datatable/ColumnsSelector.tsx

@@ -121,11 +121,10 @@ export const ColumnsSelector = ({ children }: ColumnsSelectorProps) => {
                         setColumnRanks(undefined);
                         setHiddenColumns(defaultHiddenColumns);
                     }}
-                >
-                    {translate('ra.action.reset', {
+                    label={translate('ra.action.reset', {
                         _: 'Reset',
                     })}
-                </Button>
+                />
             </Box>
         </MenuList>,
         container

packages/ra-ui-materialui/src/list/datatable/ColumnsSelectorItem.tsx

@@ -28,13 +28,14 @@ export const ColumnsSelectorItem = ({
     );
     const columnFilter = useDataTableColumnFilterContext();
     const translateLabel = useTranslateLabel();
-    if (!source && !label) return null;
+    if (!source && (!label || typeof label !== 'string')) return null;
+    const sourceOrLabel = source || (label as string);
     const fieldLabel = translateLabel({
         label: typeof label === 'string' ? label : undefined,
         resource,
         source,
     }) as string;
-    const isColumnHidden = hiddenColumns.includes(source!);
+    const isColumnHidden = hiddenColumns.includes(sourceOrLabel!);
     const isColumnFiltered = fieldLabelMatchesFilter(fieldLabel, columnFilter);
 
     const handleMove = (index1, index2) => {
@@ -76,16 +77,18 @@ export const ColumnsSelectorItem = ({
     return isColumnFiltered ? (
         <FieldToggle
             key={columnRank}
-            source={source!}
+            source={sourceOrLabel}
             label={fieldLabel}
             index={String(columnRank)}
             selected={!isColumnHidden}
             onToggle={() =>
                 isColumnHidden
                     ? setHiddenColumns(
-                          hiddenColumns.filter(column => column !== source!)
+                          hiddenColumns.filter(
+                              column => column !== sourceOrLabel!
+                          )
                       )
-                    : setHiddenColumns([...hiddenColumns, source!])
+                    : setHiddenColumns([...hiddenColumns, sourceOrLabel!])
             }
             onMove={handleMove}
         />

packages/ra-ui-materialui/src/list/datatable/DataTableCell.tsx

@@ -39,7 +39,9 @@ export const DataTableCell = React.memo(
                 defaultHiddenColumns
             );
             const record = useRecordContext();
-            const isColumnHidden = hiddenColumns.includes(source!);
+            const isColumnHidden = hiddenColumns.includes(
+                source ?? (label as string)
+            );
             if (isColumnHidden) return null;
             if (!render && !field && !children && !source) {
                 throw new Error(

packages/ra-ui-materialui/src/list/datatable/DataTableHeadCell.tsx

@@ -60,7 +60,9 @@ export const DataTableHeadCell = React.memo(
             const resource = useResourceContext();
             const translate = useTranslate();
             const translateLabel = useTranslateLabel();
-            const isColumnHidden = hiddenColumns.includes(source!);
+            const isColumnHidden = hiddenColumns.includes(
+                source ?? (label as string)
+            );
             if (isColumnHidden) return null;
             const nextSortOrder =
                 sort && sort.field === source