How to rename "Unlabeled Column #N"

Question

I followed the SelectColumnsButton documentation and added an action column. I have the following code:

<DatagridConfigurable>
  <TextField source="id" />
  <TextField source="title" />
  <TextField source="author" />
  <TextField source="year" />
  <div> 
    // This column contains action buttons
  </div>
</DatagridConfigurable>

Why is the action button column called "Unlabeled Column #4" and how can I rename the column ?

I tried to add a label and a name to the div but nothing worked.

In other part of my app I have way bigger DatagridConfigurable with many custom columns, and it is not user friendly to have 10 columns called "Unlabeled Column #N".

Answer 1

From the <DatagridConfigurable> doc:

The inspector uses the field source (or label when it’s a string) to display the column name. If you use non-field children (e.g. action buttons), then it’s your responsibility to wrap them in a component with a label prop, that will be used by the inspector

const FieldWrapper = ({ children, label }) => children;
const PostList = () => (
    <List>
        <DatagridConfigurable>
            <TextField source="id" />
            <TextField source="title" />
            <TextField source="author" />
            <TextField source="year" />
            <FieldWrapper label="Actions">
                <EditButton />
            </FieldWrapper>
        </DatagridConfigurable>
    </List>
);