如何限制 react-admin 列表视图的列宽

Question

在列数较少的列表视图中，列很宽。我想限制至少其中一些列的宽度（最后一列除外）：

仍在努力加快反应管理、反应和 material-ui 的速度。我确定涉及一些样式。有人可以指出我正确的方向吗？谢谢

更新：我按照 Jozef 的建议添加了样式，但没有改变。这是它在 Inspect 中的样子：

Answer 1

有两个自定义单元格宽度的选项。

如果要均匀设置宽度，可以更改 Datagridtable-layout

<Datagrid style={{tableLayout: 'fixed'}} rowClick="edit">
  <TextField source="sourceName" />
  <BooleanField source="active" />
  <TextField source="organizationName" />
</Datagrid>

如果这还不够，那么，我们必须创建自定义 Datagrid 及其所有依赖项，以便我们可以传递给 TableCell 组件特定宽度。无论是百分比还是 px 值。这不是很好 documented 所以你必须依赖 ra-ui-materialui

中的源代码

示例如下

import {
  Datagrid,
  DatagridBody,
  DatagridCell,
  TextField,
  BooleanField
 } from 'react-admin';
import Checkbox from '@material-ui/core/Checkbox';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';

const CustomDatagridRow = ({ record, resource, id, onToggleItem, children, selected, basePath }) => (
    <TableRow key={id}>
        <TableCell style={{width="10%"}} padding="none">
            {record.selectable && <Checkbox
                checked={selected}
                onClick={() => onToggleItem(id)}
            />}
        </TableCell>
        {React.Children.map(children, field => (
            <TableCell style={{width: field.props.width}} key={`${id}-${field.props.source}`}>
                {React.cloneElement(field, {
                    record,
                    basePath,
                    resource,
                })}
            </TableCell>
        ))}
    </TableRow>
);

const CustomDatagridBody = props => <DatagridBody {...props} row={<CustomDatagridRow />} />;
const CustomDatagrid = props => <Datagrid {...props} body={<CustomDatagridBody />} />;

<CustomDatagrid style={{tableLayout: 'fixed'}} rowClick="edit">
  <TextField width="20%" source="sourceName" />
  <BooleanField width="20%" source="active" />
  <TextField width="50%" source="organizationName" />
</CustomDatagrid>

如何限制 react-admin 列表视图的列宽

How to limit column width on react-admin List View

reactjs

react-admin