DataGridConfigurable does not allow to edit the label of button column, beside the default Unlabeled column #<index>

[silversonicaxel]

What you were expecting:
Using DataGridConfigurable I am expecting to have the buttons columns labellable. For instance I would expect that

<ShowButton label="Show"/>
<EditButton label="Edit"/>

or

<div label="Actions">
  <ShowButton/>
  <EditButton/>
</div>

would give the proper label on the <SelectColumnsButton /> component.

What happened instead:
The label displayed is Unlabeled column #<index> where index is the index of the relative column.

Steps to reproduce:
Create a DataGridConfigurable, using SelectColumnsButton and add in the grid a column containing a react-admin button.

Related code:
this is the PostListActions component

    <TopToolbar>
      <SelectColumnsButton preferenceKey="companyList" />
    </TopToolbar>

and this is the List component containing DataGridConfigurable

    <List aside={(<Aside />)} actions={(<PostListActions />)}>
      <DatagridConfigurable preferenceKey="companyList">
        <TextField source="name" />
        <ShowButton label="Expected label"/>
      </DatagridConfigurable>
    </List>

Other information:

Environment

• React-admin version: ^4.8.4
• Last version that did not exhibit the issue (if applicable): /
• React version: ^18.2.0
• Browser: all
• Stack trace (in case of a JS error): /

[slax57]

I believe this actually does work, you just need to clear your localStorage to see it.

Have a look at this stackblitz: https://stackblitz.com/edit/github-iz2hnh?file=src/posts/PostList.tsx

[silversonicaxel]

I gave this snippet a try, meaning, I added this component:

const PostListActionToolbar = ({ children, ...props }) => (
  <Box sx={{ alignItems: 'center', display: 'flex' }}>{children}</Box>
);

and I set this code in the DatagridConfigurable:

<PostListActionToolbar label="Actions">
  <ShowButton />
  <EditButton />
</PostListActionToolbar>

I see the the label Actions in the header of the list view, and I see it also in the SelectColumnsButton section. Deleting local storage helped.

Although it seems a bit an hacky approach, defining a component that accepts label without using in the component itself.

[slax57]

I agree, but can't think of a better solution for now. I'll leave this issue open in case someone has an idea how to improve this.

[silversonicaxel]

What do you think about this @slax57 ?

<WrapperField label="Actions">
   <ShowButton />
   <EditButton />
</WrapperField>

It avoids the creation of an extra component and it does the job.

[slax57]

@silversonicaxel You are right to mention the <WrapperField> component, because it is basically a simpler version of your PostListActionToolbar component and it works well in this case.
However, I meant that we should find a better solution for naming columns that do not have a label prop.

[fzaninotto]

I think the solution you described is acceptable - we just need to document it better.

[fzaninotto]

Documented in #8928

[slax57]

Fixed by #8928