Fix rendering of hidden columns

Author: fzaninotto

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/ColumnsSelectorItem.tsx

@@ -84,9 +84,11 @@ export const ColumnsSelectorItem = ({
             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