Как ограничить ширину столбца в реакции на просмотр списка admin-admin

Question

В виде списка с несколькими столбцами столбцы очень широкие. Я хотел бы ограничить ширину хотя бы некоторых из этих столбцов (кроме последнего):

Все еще пытаюсь достичь скорости на реагировать-администратор, реагировать и материал-интерфейс. Я уверен, что есть некоторые стили. Может ли кто-нибудь указать мне правильное направление? Спасибо.

ОБНОВЛЕНИЕ: Я добавил стиль, как предложил Юзеф, но без изменений. Вот как это выглядит в Inspect:

Answer 1

Существует два варианта настройки ширины ячеек.

Если вы хотите установить ширину равномерно, вы можете изменить table-layout Datagrid

<Datagrid style={{tableLayout: 'fixed'}} rowClick="edit">
  <TextField source="sourceName" />
  <BooleanField source="active" />
  <TextField source="organizationName" />
</Datagrid>

Если этого недостаточно, хорошо Мы должны создать наш пользовательский Datagrid со всеми его зависимостями, чтобы мы могли перейти к TableCell компоненту, указывающему c ширину. Будь то процент или значение пикселя. Это не очень хорошо задокументировано , поэтому вы должны полагаться на исходный код, который находится в 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>