Ограничение ширины столбца в таблице данных для столбцов командной кнопки

#react-admin

#react-admin

Вопрос:

в React-Admin я хочу ограничить ширину столбцов, отображающих редактирование, показывать кнопки в datagrid

Я знаю, что могу использовать стили для установки ширины других ячеек, таких как текстовые поля, но не могу найти способ сделать это с помощью кнопок

введите описание изображения здесь

Ответ №1:

Внутри Datagrid вы можете использовать headerClassName cellClassName реквизиты для оформления как ячейки в строке заголовка, так и в строках тела, как описано в документации в разделе Datagrid / CSS-Api

 <ShowButton
   headerClassName={classes.hiddenOnSmallScreens}
   cellClassName={classes.hiddenOnSmallScreens}
/>
 

* РЕДАКТИРОВАТЬ

Очевидно, что этот подход не работает при использовании typescript, возможно, ошибка — вы можете обойти это таким образом:

 const usePostListActionToolbarStyles = makeStyles({
  toolbar: {
    alignItems: "center",
    display: "flex",
    marginTop: -1,
    marginBottom: -1
  }
});

const PostListActionToolbar = ({ children, ...props }) => {
  const classes = usePostListActionToolbarStyles();
  return (
    <div className={classes.toolbar}>
      {Children.map(children, (button) => cloneElement(button, props))}
    </div>
  );
};
 

а затем внутри вашей Datagrid:

 <Datagrid>
   //...fields
  <PostListActionToolbar>
      <ShowButton/>
      <EditButton/>
  </PostListActionToolbar>
</Datagrid>
 

Комментарии:

1. Спасибо Киа Каха, но я не собираюсь стилизовать текстовые поля, а такие поля кнопок, как <showButton /> <EditButton />

2. Я скопировал вам пример из документации. Этот подход работает с любым типом столбца Datagrid, который вы стилизуете, будь то поле, кнопка или что-то еще. Пожалуйста, сначала прочтите раздел документации, на который я ссылался.

3. Спасибо, это не тот тип, который распознается для кнопок в TypeScript. Я получаю следующее: «ype ‘{ headerClassName: string; }’ не может быть присвоен типу ‘IntrinsicAttributes amp; Props amp; Props»

4. Я вижу, ознакомьтесь с обновленным ответом — если это также не решает вашу проблему, возможно, вам следует запустить проблему на github, потому что первый подход отлично работает в обычном js, и определения ts пропускают его по ошибке.