Merge pull request marmelab#10802 from marmelab/fix-datatable-header-button

Fix `<DataTable>` does not allow to put a button in the column's header

Author: djhi

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

@@ -37,6 +37,7 @@ import {
 import {
     BulkDeleteButton,
     BulkExportButton,
+    CreateButton,
     EditButton,
     SelectAllButton as RaSelectAllButton,
 } from '../../button';
@@ -896,3 +897,17 @@ export const NonPrimitiveData = () => (
         </DataTable>
     </Wrapper>
 );
+
+export const HeaderButton = () => (
+    <Wrapper i18nProvider={polyglotI18nProvider(() => defaultMessages, 'en')}>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col label="Author" source="author.name" disableSort />
+            <DataTable.Col source="year" />
+            <DataTable.Col label={<CreateButton />}>
+                <EditButton />
+            </DataTable.Col>
+        </DataTable>
+    </Wrapper>
+);

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

@@ -120,13 +120,11 @@ export const DataTableHeadCell = React.memo(
                             </TableSortLabel>
                         </Tooltip>
                     ) : (
-                        <TableSortLabel disabled>
-                            <FieldTitle
-                                label={label}
-                                source={source}
-                                resource={resource}
-                            />
-                        </TableSortLabel>
+                        <FieldTitle
+                            label={label}
+                            source={source}
+                            resource={resource}
+                        />
                     )}
                 </TableCellStyled>
             );