Добавление функциональности диапазона строк или диапазона столбцов в таблицу при создании таблицы данных с использованием таблицы материалов (React) - PullRequest
Новая
       38

Добавление функциональности диапазона строк или диапазона столбцов в таблицу при создании таблицы данных с использованием таблицы материалов (React)

0 голосов
/ 29 января 2020

Я генерирую таблицу данных, используя material-table плагин в ReactJS. Я не смог найти какой-либо прямой способ или вариант для генерации rowspan или span column в dataTable с помощью плагина. Есть ли способ сделать это?

Вот примерный скриншот того, как может выглядеть таблица, но она будет показана через dataTable

enter image description here

1 Ответ

0 голосов
/ 29 января 2020

Объяснение того, что вы пытаетесь сделать, немного неясно.

Если вы хотите добавить что-то вроде кнопки в каждую строку в диапазоне столбцов, вы можете определить это в столбце «столбцы» вашей таблицы следующим образом: 

columns={[
      { title: 'Update', field: '', render: rowData => <button onClick={() => doSomethingWithId(rowData.id)} className="myTableButtonStyle" /> },
      { title: 'Name', field: 'name' },
      ....
    ]}

Это добавит кнопка обновления, которая будет вызывать функцию doSomethingWithId (), передавая идентификатор строки в качестве параметра. Это то, что вы ищете? Еще вы не могли бы объяснить немного больше, что вы хотите?

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

Вот что я получаю enter image description here

со следующим кодом 

<MaterialTable
      data={[
        { name: '', nationality: 'British', address: '', country: 'England' },
        { name: 'Noor', nationality: 'American', address: 'California', country: 'US' },
        { name: '', nationality: 'Chinese', address: '', country: 'China' },
        { name: '', nationality: '', address: '', country: '' },
      ]}
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Nationality', field: 'nationality' },
        { title: 'Address', field: 'address' },
        { title: 'Country', field: 'country' },
      ]}
      options={{
        rowStyle: {
          height: '25px',
        },
      }}
      title="Display Data"
    />

Вам не нужно добавлять строки или colspan для достижения этого рендера, достаточно дать хороший набор данных и определение столбцов.

В ваших данных реквизитах вам нужно дать список объектов со всеми необходимыми данными. Затем вы определяете, какие данные отображаются, где с помощью столбцов реквизиты. если вы хотите более персонализированный рендер в одном столбце (например, вы хотите отобразить страну жирным шрифтом), вы можете определить его, задав рендер в объекте столбцов, например: 

{title: 'Country', field: '', render: rowData => <strong>{rowData.country}</strong>

для пустой строки чтобы иметь такой же размер, как другие, используйте реквизиты options на вашем столе. Вам это поможет?

...