Как передать процентное значение по ширине столбцу React data grid

Question

Ниже мой код сетки Reactdata

    this._columns = [
          {
            key: 'id',
            name: 'ID',
            width: 40
          },
          {
            key: 'task',
            name: 'Title',
            width:100
          },
          {
            key: 'priority',
            name: 'Priority',
            width:100
          },
          {
            key: 'issueType',
            name: 'Issue Type',
            width:100
          },
          {
            key: 'complete',
            name: '% Complete',
            width:100
          },
          {
            key: 'startDate',
            name: 'Start Date',
            width:100
          },
          {
            key: 'completeDate',
            name: 'Expected Complete',
            width:100
          }
        ];

          render() {
        return  (
          <ReactDataGrid
            columns={this._columns}
            rowGetter={this.rowGetter}
            rowsCount={this._rows.length}
            minHeight={500}
            minColumnWidth={120} 
          />);
      }

Использование приведенной ниже таблицы данных React: https://github.com/adazzle/react-data-grid

Я хочу передать ширину в процентах, как мы можем достичь с помощью сетки данных React. Любая помощь будет оценена. Спасибо

Answer 1

Чтобы изменить размер столбца, установите column.resizable = true.

Если вам необходимо знать, когда размер column был изменен, используйте опору onColumnResize. Это сработает при изменении размера столбца и сообщит об индексе столбца и его новой ширине.

Их можно сохранить на сервере и использовать для восстановления ширины столбца при инициализации компонента, установив ключ width в каждом столбце.

pass resizable:true, размер которого вы хотите изменить, как показано ниже.

this._columns = [
  {
    key: 'id',
    name: 'ID',
    resizable: true,
    width: 40
  },
  {
    key: 'task',
    name: 'Title',
    resizable: true
  }]

см. Здесь для получения дополнительной информации

Answer 2

Я знаю, может быть, уже поздно, но вы можете достичь этого, установив значение в виде строки

const columns = [
  {
    key: 'Month',
    name: 'Mes',
    width: '50%',
  },
  {
    key: 'Tickets',
    name: 'Tickets',
    width: '10%',
  },
 ];

Надеюсь, это поможет

Answer 3

Чтобы передать в процентном выражении в реактивном компоненте, вам просто нужно сделать следующую ширину = '100%'.