Как указать ширину столбца для первого столбца с помощью React-Table

При использовании useRowSelect и useTable как я могу указать ширину столбца для первого столбца, чтобы она никогда не превышала ширину флажков? Я не хочу использовать useFlex, так как хочу сохранить ширину столбцов в зависимости от ширины заголовка.

Вы заметите, что когда таблица установлена ​​на 100% ширину, первый столбец начинает расти, если вы расширяете окно браузера.

Вот пример:

https://codesandbox.io/s/youthful-hamilton-j0rev?file=/src/App.js

Я также готов просто взять заголовок и ячейку, откуда я вставляю в массив столбцов и добавляю className, но не смог найти способ сделать это. Как я могу добавить className, чтобы ячейка таблицы, которая окружает данные этого столбца, имела className для присоединения:

    (hooks) => {
      isRowSelectable &&
        hooks.allColumns.push((columns) => [
          {
            id: 'selection',
            minWidth: 35,
            width: '35px',
            maxWidth: 35,
            Header: ({ getToggleAllRowsSelectedProps }) => (
              <Checkbox alignSelf="center" {...getToggleAllRowsSelectedProps()} />
            ),
            Cell: ({ row }: any) => {
              row.className = '123';
              return <Checkbox alignSelf="center" {...row.getToggleRowSelectedProps()} />;
            }
          },
          ...columns
        ]);
    }

reactjs css react-table react-table-v6 react-table-v7
person Corey Bruyere    schedule 10.03.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Поскольку Array.map может передавать индекс элемента, довольно просто условно добавить className к ячейке, если индекс строки равен 0:

{
  rows.map((row, i) => {
    prepareRow(row);
    return (
      <td className={i === 0 ? "class-name" : ""} {...cell.getCellProps()>
         {cell.render("Cell")}
      </td>
    ) ​
}

Если вы хотите, чтобы тот же класс применялся к заголовкам, вы можете сделать то же самое с элементами <th> или <tr>, поскольку они также отображаются с помощью Array.map. Вам вообще не нужно прикасаться к объекту columns для этого изменения.

person toki    schedule 07.04.2021