Динамически изменяйте отображаемые данные в реакции-таблице v7

Question

Не уверен, что существует хороший способ динамического изменения отображаемых данных. Например, я хотел бы, чтобы логические значения отображались в таблице в виде значков и не слишком сильно замедляли процесс рендеринга. Я использую последнюю версию реактивной таблицы v7. Я добавил код из таблицы компонента Спасибо

<code>import React from "react";
import { useTable, useRowSelect, useSortBy, usePagination } from "react-table";
import { CSVLink, CSVDownload } from "react-csv";
import { navigate } from "@reach/router";

function handleColumnsClick(url, id) {
  if (url && id) navigate(`${url}${id}`);
}

const IndeterminateCheckbox = React.forwardRef(
  ({ indeterminate, ...rest }, ref) => {
    const defaultRef = React.useRef();
    const resolvedRef = ref || defaultRef;

    React.useEffect(() => {
      resolvedRef.current.indeterminate = indeterminate;
    }, [resolvedRef, indeterminate]);

    return (
      <>
        <input type="checkbox" ref={resolvedRef} {...rest} />
      </>
    );
  }
);

function Table({ columns, data, allowSelection, direct }) {
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    selectedFlatRows,

    // pagination
    page, // Instead of using 'rows', we'll use page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,
    state: { selectedRowIds, pageIndex, pageSize },
  } = useTable(
    {
      columns,
      data,
      initialState: { pageIndex: 0 },
    },
    useSortBy,
    usePagination,
    useRowSelect,
    (hooks) => {
      hooks.visibleColumns.push((columns) => [
        // Let's make a column for selection
        {
          id: "selection",
          // The header can use the table's getToggleAllRowsSelectedProps method
          // to render a checkbox
          Header: ({ getToggleAllRowsSelectedProps }) => (
            <div>
              {allowSelection && (
                <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
              )}
            </div>
          ),
          // The cell can use the individual row's getToggleRowSelectedProps method
          // to the render a checkbox
          Cell: ({ row }) => (
            <div>
              {allowSelection && (
                <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
              )}
            </div>
          ),
        },
        ...columns,
      ]);
    }
  );

  // Render the UI for your table
  return (
    <>
      <table
        className="table table-sm table-striped table table-hover"
        {...getTableProps()}
      >
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                // Add the sorting props to control sorting. For this example
                // we can add them into the header props
                <th
                  className="checkbox"
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                >
                  {column.render("Header")}
                  {/* Add a sort direction indicator */}
                  <span>
                    {column.isSorted
                      ? column.isSortedDesc
                        ? " ?"
                        : " ?"
                      : ""}
                  </span>
                </th>
              ))}
            </tr>
          ))}
        </thead>

        <tbody {...getTableBodyProps()}>
          {page.map((row, i) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return (
                    <td
                      onClick={(e) =>
                        handleColumnsClick(
                          direct[1],
                          cell.row.original[direct[0]]
                        )
                      }
                      {...cell.getCellProps()}
                    >
                      {cell.render("Cell")}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>

      <nav aria-label="Page navigation example">
        <ul className="pagination justify-content-center">
          <li className="page-item ">
            <a
              className="page-link"
              tabIndex={-1}
              aria-disabled="true"
              onClick={() => gotoPage(0)}
              disabled={!canPreviousPage}
            >
              {"<< First Page"}
            </a>
          </li>
          <li className="page-item">
            <a
              className="page-link"
              onClick={() => previousPage()}
              disabled={!canPreviousPage}
            >
              {"<"}
            </a>
          </li>
          <li className="page-item">
            <a
              className="page-link"
              onClick={() => nextPage()}
              disabled={!canNextPage}
            >
              {" >"}
            </a>
          </li>
          <li className="page-item">
            <a
              className="page-link"
              onClick={() => gotoPage(pageCount - 1)}
              disabled={!canNextPage}
            >
              {"Last Page >>"}
            </a>
          </li>
        </ul>

        <ul className="pagination justify-content-right">
          <div className="pagination">
            <span>
              <strong>
                {pageIndex + 1} of {pageOptions.length}
              </strong>{" "}
            </span>
            <span>
              | Go to page:{" "}
              <input
                type="number"
                defaultValue={pageIndex + 1}
                onChange={(e) => {
                  const page = e.target.value ? Number(e.target.value) - 1 : 0;
                  gotoPage(page);
                }}
                style={{ width: "100px" }}
              />
            </span>{" "}
            <select
              value={pageSize}
              onChange={(e) => {
                setPageSize(Number(e.target.value));
              }}
            >
              {[10, 20, 30, 40, 50].map((pageSize) => (
                <option key={pageSize} value={pageSize}>
                  Show {pageSize}
                </option>
              ))}
            </select>
          </div>
        </ul>

        <p>Selected Rows: {Object.keys(selectedRowIds).length}</p>
      </nav>

      <pre>
        {/* Display selected rows for debugging */}
        {/* <code>
          {JSON.stringify(
            {
              selectedRowIds: selectedRowIds,
              "selectedFlatRows[].original": selectedFlatRows.map(
                (d) => d.original
              ),
            },
            null,
            2
          )}
        </code> */}
      

); } function setColumns (props) {const {data} = props; if (data! == undefined && data.length! == 0) {const columnsKeys = Object.keys (data [0]); return columnsKeys.map ((column) => {return {Header: column, accessor: column,};}); }} function SelectTable (props) {const columns = props.columns? props.columns: setColumns (реквизиты); const {data, allowSelection, direct} = реквизит; const addSelection = props.allowSelection? props.allowSelection: false; if (columns && data.length) возвращает (<> Экспорт в CSV ); иначе вернуть ноль; } экспорт по умолчанию SelectTable;