在列数很少的列表视图中,列非常宽。我想至少限制其中一些列的宽度(最后一列除外):x1c 0d1x的数据还在努力跟上react-admin,react和material-ui的速度。我相信这里面涉及到一些样式。有人能给我指出正确的方向吗?谢谢。更新:我按照Jozef的建议添加了样式,但没有改变。下面是它在Inspect中的样子:
的
wgeznvg71#
有两个选项可自定义单元格宽度。如果您想均匀地设置宽度,可以更改Datagrid的table-layout
table-layout
<Datagrid style={{tableLayout: 'fixed'}} rowClick="edit"> <TextField source="sourceName" /> <BooleanField source="active" /> <TextField source="organizationName" /> </Datagrid>
字符串如果这还不够,那么,我们必须创建我们的自定义Datagrid及其所有依赖项,以便我们可以传递给TableCell组件特定的宽度。无论是百分比还是px值。这是不是很好地记录,所以你必须依赖于源代码,这是在ra-ui-materialui下面是一个例子
Datagrid
TableCell
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>
型
km0tfn4u2#
TextField是一个简单的Typography组件。由于默认Typography组件的display css属性是inline,所以width将不起作用。您可以将display属性值更改为block,这样width就可以起作用。:)
TextField
Typography
display
inline
width
block
<List> <Datagrid rowClick="edit"> <TextField source="id" sx={{ display: "block", width: 100 }} /> <TextField source="title" sx={{ display: "block", width: 200 }} /> <TextField source="content" /> </Datagrid> </List>
字符串
2条答案
按热度按时间wgeznvg71#
有两个选项可自定义单元格宽度。
如果您想均匀地设置宽度,可以更改Datagrid的
table-layout
字符串
如果这还不够,那么,我们必须创建我们的自定义
Datagrid
及其所有依赖项,以便我们可以传递给TableCell
组件特定的宽度。无论是百分比还是px值。这是不是很好地记录,所以你必须依赖于源代码,这是在ra-ui-materialui
下面是一个例子
型
km0tfn4u2#
TextField
是一个简单的Typography
组件。由于默认
Typography
组件的display
css属性是inline
,所以width
将不起作用。您可以将display
属性值更改为block
,这样width就可以起作用。:)字符串