react-admin中能否在Datagrid同一列放置ShowButton与EditButton？

当然可行。react-admin的Datagrid（包括DatagridConfigurable）中，每个直接子组件对应一列，所以只要把多个按钮组件包裹在一个自定义容器组件里，就能让它们处于同一列。

具体实现方式：

• 自定义一个操作列组件，内部同时渲染ShowButton和EditButton，通过CSS或UI组件库的工具类调整按钮的排列样式（比如横向并排）。
• 将这个自定义组件作为DatagridConfigurable的子元素，替代原来分开的两个按钮。

修改后的代码示例：

import { DatagridConfigurable, TextField, ShowButton, EditButton } from 'react-admin';

// 自定义操作列组件
const ActionsColumn = () => (
    <div style={{ display: 'flex', gap: '8px' }}>
        <ShowButton />
        <EditButton />
    </div>
);

// 在DatagridConfigurable中使用
<DatagridConfigurable preferenceKey="userList">
    <TextField source="email" />
    <TextField source="firstName" />
    <TextField source="lastName" />
    <ActionsColumn />
</DatagridConfigurable>

如果需要更贴合react-admin风格的样式，也可以用Material UI的ButtonGroup组件（react-admin基于Material UI构建）来包裹按钮，它内置了合适的间距和布局：

import { ButtonGroup } from '@mui/material';
import { DatagridConfigurable, TextField, ShowButton, EditButton } from 'react-admin';

const ActionsColumn = () => (
    <ButtonGroup>
        <ShowButton />
        <EditButton />
    </ButtonGroup>
);

<DatagridConfigurable preferenceKey="userList">
    <TextField source="email" />
    <TextField source="firstName" />
    <TextField source="lastName" />
    <ActionsColumn />
</DatagridConfigurable>

这样就能实现和文档示例一致的效果，两个按钮处于同一列中。

内容的提问来源于stack exchange，提问作者axel