Change the displayed data dynamically v7

[FaisalFehad]

Not sure if there is a good way to change the displayed data dynamically. For instance I would like boolean values to be displayed as icons without slowing the rendering process too much. Thanks

`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> */}
      </pre>
    </>
  );
}

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(props);
  const { data, allowSelection, direct } = props;
  const addSelection = props.allowSelection ? props.allowSelection : false;

  if (columns && data.length)
    return (
      <>
        <Table
          columns={columns}
          data={data}
          allowSelection={addSelection}
          direct={direct}
        />
        <button className="btn-outline btn-sm">
          <CSVLink data={data}>Export to CSV </CSVLink>
        </button>
      </>
    );
  else return null;
}

export default SelectTable;
`