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. 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. Here's what it looks like in 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 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. Be it percent or px value. This is not very well documented so you have to rely on source code which is in 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>