Выбор и удаленная разбивка данных на страницы в таблице материалов React

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

const Table = () => {
const [selectedRows, setSelectedRows] = useState([]);

function handleSelectChange(rows) {
setSelectedRows(rows)
}
return (
<MaterialTable
      title="Remote Data Preview"
      columns={[
        {
          title: 'Avatar',
          field: 'avatar',
          render: rowData => (
            <img
              style={{ height: 36, borderRadius: '50%' }}
              src={rowData.avatar}
            />
          ),
        },
        { title: 'Id', field: 'id' },
        { title: 'First Name', field: 'first_name' },
        { title: 'Last Name', field: 'last_name' },
      ]}
      options={{
        selection:true,
      }}
      onSelectionChange={(rows) => handleSelectChange(rows)}
      data={query =>
        new Promise((resolve, reject) => {
          let url = 'https://reqres.in/api/users?'
          url += 'per_page=' + query.pageSize
          url += '&page=' + (query.page + 1)
          fetch(url)
            .then(response => response.json())
            .then(result => {
              resolve({
                data: result.data,
                page: result.page - 1,
                totalCount: result.total,
              })
            })
        })
      }
    />
)
}

я уже создал проблему, поставлю это ссылку. https://github.com/mbrn/material-table/issues/1189


reactjs material-table
person Dark    schedule 15.10.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Поскольку вы уже знаете выбранные строки, вам просто нужно изменить полученные данные следующим образом:

data: result.data.map(row => selectedRows.find(selected => selected.id === row.id) ? { ...row, tableData: { checked: true } } : row)

Это добавит ключ tableData.checked к полученным данным и отобразит их как выбранные.

Вот codeandbox.

person Domino987    schedule 15.10.2019

arrow_upward
2
arrow_downward

Это решение работает только в том случае, если вы не выберете другую строку на новой странице, поскольку новый rows из onSelectionChange перезапишет существующие выбранные строки с предыдущих страниц. Чтобы иметь возможность выбирать строки на страницах, я изменил функцию handleSelectionChange, чтобы сначала проверить, включены ли текущие selectedRows в отображаемые данные, а для тех, которые не включены, я распространил это на вызов setState.

function handleSelectionChange(rows) {
    const displayedIds = data.results.map(result => result.id)
    const selectedRowsNotDisplayed = selectedRows.filter(selectedRow => {
        return !displayedIds.includes(selectedRow.id)
    })

    setSelectedRows([...selectedRowsNotDisplayed, ...rows])
}
person Howard Shelburne    schedule 22.11.2019