[英]How to limit column width on react-admin List View
On a list view with few columns, the columns are very wide.在具有少量列的列表视图中,列非常宽。 I'd like to limit the width of at least some of these columns (except the last one):
我想限制至少其中一些列的宽度(最后一列除外):
Still trying to come up to speed on react-admin, react, and material-ui.仍在尝试加快 react-admin、react 和 material-ui 的速度。 I'm sure there's some styling involved.
我敢肯定,其中涉及一些样式。 Could someone please point me in the right direction?
有人可以指出我正确的方向吗? Thanks.
谢谢。
UPDATE: I added the style as Jozef suggested but no change.更新:我按照 Jozef 的建议添加了样式,但没有改变。 Here's what it looks like in Inspect:
这是 Inspect 中的样子:
There are two options to customize width of cells.有两个选项可以自定义单元格的宽度。
If you want to set width evenly you can change table-layout
of Datagrid如果要均匀设置宽度,可以更改 Datagrid 的
table-layout
<Datagrid style={{tableLayout: 'fixed'}} rowClick="edit">
<TextField source="sourceName" />
<BooleanField source="active" />
<TextField source="organizationName" />
</Datagrid>
If it is not enough, well, we have to create our custom Datagrid
with all of its dependencies so we can pass to TableCell
component specific width.如果这还不够,那么我们必须创建自定义
Datagrid
及其所有依赖项,以便我们可以将特定宽度传递给TableCell
组件。 Be it percent or px value.无论是百分比还是 px 值。 This is not very well documented so you have to rely on source code which is in
ra-ui-materialui
这没有很好的记录,因此您必须依赖
ra-ui-materialui
中的源代码
Here's the example这是示例
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.