ответная таблица 7.0.0-r c .16 не будет обновляться и сортироваться одновременно - PullRequest
Новая
       59

ответная таблица 7.0.0-r c .16 не будет обновляться и сортироваться одновременно

0 голосов
/ 27 февраля 2020

Я отчаянно пытаюсь использовать response-table-7.0.0-r c .16, и мне нужно, чтобы в моей таблице происходили только две вещи. сортировка и обновление.

Проект старый и использует классы, поэтому мне нужно создать файл js для заполнения таблицы на основе реквизитов, которые я отправляю. Массив реквизитов для данных «будет» изменяться (обновления, добавляет, удаляет .....)

код, который я предоставлю вниз, скопирован с официальной страницы github. и он работает для сортировки, но не обновляется при смене реквизита. так вот файл myTable. js: 

import React from 'react';
import { useTable, useSortBy } from 'react-table'

function Table({ columns, data }) {
    const {
      getTableProps, getTableBodyProps, headerGroups, rows, prepareRow,
    } = useTable({columns,data},useSortBy)

    return (
      <>
        <table {...getTableProps()}>
          <thead>
            {headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                    {column.render('Header')}
                    <span>
                      {column.isSorted
                        ? column.isSortedDesc
                          ? ' ?'
                          : ' ?'
                        : ''}
                    </span>
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map(
              (row, i) => {
                prepareRow(row);
                return (
                  <tr {...row.getRowProps()}>
                    {row.cells.map(cell => {
                      return (
                        <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                      )
                    })}
                  </tr>
                )}
            )}
          </tbody>
        </table>
      </>
    )
}


function MyTable(props) {
    const columns = React.useMemo(() => props.columns, [])

    const data = React.useMemo(() => props.data, [])

    return (
        <Table columns={columns} data={data} />
    )
  }

  export default MyTable

Я также использую этот файл в своем проекте следующим образом: 

                <MyTable
                    data={data}
                    columns={columns} 
                    sortable={true}
                    showPageSizeOptions={false}
                    showPagination={false}
                />

, и если я удалю useMemo и передам реквизиты как этот код ниже, сортировка не удастся, но обновление работает !!!! 

import React from 'react';
import { useTable, useSortBy } from 'react-table'

function Table({ columns, data }) {
    const {
      getTableProps, getTableBodyProps, headerGroups, rows, prepareRow,
    } = useTable({columns,data},useSortBy)

    return (
      <>
        <table {...getTableProps()}>
          <thead>
            {headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                    {column.render('Header')}
                    <span>
                      {column.isSorted
                        ? column.isSortedDesc
                          ? ' ?'
                          : ' ?'
                        : ''}
                    </span>
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map(
              (row, i) => {
                prepareRow(row);
                return (
                  <tr {...row.getRowProps()}>
                    {row.cells.map(cell => {
                      return (
                        <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                      )
                    })}
                  </tr>
                )}
            )}
          </tbody>
        </table>
      </>
    )
}


  export default Table
...