How to limit column width on react-admin List View

Question

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:

Keos

Answer 1

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>

Smithereens

Thanks for the suggestion. I tried what you suggested with style={{ tableLayout: 'fixed'}} and it didn't make any difference in the column widths of the table. Sorry but my experience with react is limited. – Keos

Thats weird. are you sure you put it in Datagrid component? If you inspect html table tag in chrome dev tools, do you see its style overwritten? – Quarters

Yes, I added it just as you said. I'll put a pic in my question showing that it doesn't appear to be overridden??? – Keos

It is overwritten and column widths are split evenly. If you add few more columns i think you might notice a difference – Quarters

Ah yes, I see. Thanks. – Keos

Answer 2

TextField is a simple Typography component.
Since default Typography component's display css attribute is inline, width will not work. You can just change the display attribute value to block so width will work. :)

  <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>

Giraffe