在一个列数较少的列表视图中,列数非常宽。我想至少限制其中一些列的宽度(除了最后一个)。
我还在努力学习 react -admin, react, 和 material -ui. 我相信这其中肯定涉及到一些样式设计。谁能告诉我正确的方向?谢谢。
UPDATE:我按照Jozef的建议添加了样式,但没有变化。下面是它在Inspect中的样子。
有两个选项可以自定义单元格的宽度。
如果你想均匀地设置宽度,你可以改变 table-layout
Datagrid的
<Datagrid style={{tableLayout: 'fixed'}} rowClick="edit">
<TextField source="sourceName" />
<BooleanField source="active" />
<TextField source="organizationName" />
</Datagrid>
如果这还不够,那么,我们必须创建我们的自定义的 Datagrid
和它的所有依赖关系,这样我们就可以把它传递给 TableCell
组件的特定宽度。是百分比还是px值。这不是很好 有据可查 所以,你必须依靠源代码,这在 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>