Блог

Я использую react-таблицу (https://react-table.tanstack.com/) для создания компонента, похожего на таблицу. Среди различных типов колонок лишь немногие из них являются трудноразрешимыми. Это означает, что на основе взаимодействия данные(предоставленные в таблице) должны быть обновлены. Например, на прилагаемом скриншоте вы заметите столбец с флажком типа. Теперь, основываясь на нажатии на флажок, данные также должны обновляться.

В качестве решения я использую useState крюк и передаю данные. и обновите их после нажатия события до флажка.

.

Это кажется мне рабочим решением, но я нашел плагин, задокументированный в документации react-table, который реализует базовое управление состоянием для подготовленных строк и их ячеек.https://react-table.tanstack.com/docs/api/useRowState, Поскольку с ним не связан рабочий образец, я не могу понять, как этот плагин можно использовать для решения моих текущих требований.

Вот ссылка на код для рабочего образца https://codesandbox.io/s/awesome-hill-vz7to?file=/src/App.js

В таблице react приведен пример, называемый редактируемыми данными. По сути, вы предоставляете пользовательский визуализатор ячеек массиву столбцов и передаете функцию обновления useTable крюку. Внутри пользовательского средства визуализации ячеек у вас есть доступ к этой функции, и вы вызываете ее всякий раз, когда данные изменяются.

Этот пример отредактирован так, чтобы он соответствовал вашему варианту использования: https://codesandbox.io/s/strange-flower-dkq5x

Соответствующие изменения заключаются в:

1. Средство визуализации пользовательских ячеек:

 // Create an editable cell renderer
const CheckBoxCell = ({
  value,
  row: { index },
  column: { id },
  updateMyData, // This is a custom function that we supplied to our table instance
}) => {
  const onChange = e => {
    updateMyData(index, id, !value)
  }

  return <input type='checkbox' checked={value} onChange={onChange} />
}
 

2. Мы не переопределяем средство визуализации ячеек по умолчанию в useTable крючке.
3. Мы передаем наш пользовательский визуализатор ячеек в массив столбцов:

   const columns = React.useMemo(
    () => [
      {
        Header: 'Name',
        columns: [
          {
            Header: 'First Name',
            accessor: 'firstName',
          },
          {
            Header: 'Last Name',
            accessor: 'lastName',
          },
        ],
      },
      {
        Header: 'Info',
        columns: [
          {
            Header: 'Age',
            accessor: 'age',
          },
          {
            Header: 'Visits',
            accessor: 'visits',
          },
          {
            Header: 'Status (available)',
            accessor: 'status',
            Cell: CheckBoxCell,
          },
          {
            Header: 'Profile Progress',
            accessor: 'progress',
          },
        ],
      },
    ],
    []
  )
 

4. Мы настраиваем данные таким образом, чтобы статус работал с флажками (только для этого примера).

 const newPerson = () => {
  const statusChance = Math.random()
  return {
    firstName: namor.generate({ words: 1, numbers: 0 }),
    lastName: namor.generate({ words: 1, numbers: 0 }),
    age: Math.floor(Math.random() * 30),
    visits: Math.floor(Math.random() * 100),
    progress: Math.floor(Math.random() * 100),
    status:
      statusChance > 0.5 ? true : false,
  }
}