diff --git a/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.spec.tsx b/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.spec.tsx
index e1531e0c3b0..e20bd9793cc 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.spec.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.spec.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import expect from 'expect';
 
-import { Basic } from './SelectColumnsButton.stories';
+import { Basic, WithPreferenceKey } from './SelectColumnsButton.stories';
 
 describe('<SelectColumnsButton>', () => {
     it('should render a datagrid with configurable columns', async () => {
@@ -14,4 +14,14 @@ describe('<SelectColumnsButton>', () => {
         screen.getByLabelText('Year').click();
         expect(screen.queryByText('1869')).not.toBeNull();
     });
+
+    it('should render a datagrid with columns using the given preference key', async () => {
+        render(<WithPreferenceKey />);
+        screen.getByText('Columns').click();
+        expect(screen.queryByText('1869')).not.toBeNull();
+        screen.getByLabelText('Year').click();
+        expect(screen.queryByText('1869')).toBeNull();
+        screen.getByLabelText('Year').click();
+        expect(screen.queryByText('1869')).not.toBeNull();
+    });
 });
diff --git a/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.stories.tsx b/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.stories.tsx
index 1f06fe7a522..938c84da611 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.stories.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.stories.tsx
@@ -66,3 +66,28 @@ export const Basic = () => (
         </PreferencesEditorContextProvider>
     </ThemeProvider>
 );
+
+export const WithPreferenceKey = () => (
+    <ThemeProvider theme={theme}>
+        <PreferencesEditorContextProvider>
+            <MemoryRouter>
+                <Box p={2}>
+                    <Box textAlign="right">
+                        <SelectColumnsButton preferenceKey="just-a-key.to_test_with" />
+                    </Box>
+                    <DatagridConfigurable
+                        preferenceKey="just-a-key.to_test_with"
+                        data={data}
+                        sort={{ field: 'title', order: 'ASC' }}
+                        bulkActionButtons={false}
+                    >
+                        <TextField source="id" />
+                        <TextField source="title" label="Original title" />
+                        <TextField source="author" />
+                        <TextField source="year" />
+                    </DatagridConfigurable>
+                </Box>
+            </MemoryRouter>
+        </PreferencesEditorContextProvider>
+    </ThemeProvider>
+);
diff --git a/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx b/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx
index afcd272a31e..5dbfcc1aa83 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx
@@ -38,17 +38,22 @@ import { styled } from '@mui/material/styles';
  *   </List>
  * );
  */
-export const SelectColumnsButton = props => {
+export const SelectColumnsButton = (props: SelectColumnsButtonProps) => {
+    const { preferenceKey } = props;
+
     const resource = useResourceContext(props);
-    const preferenceKey =
-        props.preferenceKey || `preferences.${resource}.datagrid`;
+    const finalPreferenceKey = preferenceKey || `${resource}.datagrid`;
+
     const [anchorEl, setAnchorEl] = React.useState(null);
     const [availableColumns, setAvailableColumns] = useStore<
         ConfigurableDatagridColumn[]
-    >(`${preferenceKey}.availableColumns`, []);
-    const [omit] = useStore<string[]>(`${preferenceKey}.omit`, []);
+    >(`preferences.${finalPreferenceKey}.availableColumns`, []);
+    const [omit] = useStore<string[]>(
+        `preferences.${finalPreferenceKey}.omit`,
+        []
+    );
     const [columns, setColumns] = useStore<string[]>(
-        `${preferenceKey}.columns`,
+        `preferences.${finalPreferenceKey}.columns`,
         availableColumns
             .filter(column => !omit?.includes(column.source))
             .map(column => column.index)
@@ -130,6 +135,7 @@ export const SelectColumnsButton = props => {
                         color="primary"
                         onClick={handleClick}
                         size="large"
+                        {...sanitizeRestProps(props)}
                     >
                         <ViewWeekIcon />
                     </IconButton>
@@ -139,6 +145,7 @@ export const SelectColumnsButton = props => {
                     size="small"
                     onClick={handleClick}
                     startIcon={<ViewWeekIcon />}
+                    {...sanitizeRestProps(props)}
                 >
                     {title}
                 </StyledButton>
@@ -184,6 +191,14 @@ const StyledButton = styled(Button, {
     },
 });
 
-export interface SelectColumnsButtonProps {
-    preferenceKey: string;
+const sanitizeRestProps = ({
+    resource = null,
+    preferenceKey = null,
+    ...rest
+}) => rest;
+
+export interface SelectColumnsButtonProps
+    extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    resource?: string;
+    preferenceKey?: string;
 }