Checkbox and Pagination - Typescript

[blindibrasil]

I am facing a problem that I have not yet identified if it is in the IndeterminateCheckbox or if it is in my Pagination.
Because when my pagination is activated, on the first page the checkboxes work correctly but when I change the page I can no longer select the checkboxes correctly.

When there is no pagination with a single list then all my checkboxes work correctly.

What I hope:
Select items on multiple pages.

IndeterminateCheckbox

import React, { useEffect, forwardRef, MutableRefObject } from 'react';

interface Props {
  indeterminate?: boolean;
}

const useCombinedRefs = (...refs: any): MutableRefObject<any> => {
  const targetRef = React.useRef();

  React.useEffect(() => {
    refs.forEach((ref: any) => {
      if (!ref) return;

      if (typeof ref === 'function') {
        ref(targetRef.current);
      } else {
        ref.current = targetRef.current;
      }
    });
  }, [refs]);

  return targetRef;
};

const IndeterminateCheckbox = forwardRef<HTMLInputElement, Props>(
  ({ indeterminate, ...rest }, ref: React.Ref<HTMLInputElement>) => {
    const defaultRef = React.useRef(null);
    const combinedRef = useCombinedRefs(ref, defaultRef);

    useEffect(() => {
      if (combinedRef?.current) {
        combinedRef.current.indeterminate = indeterminate ?? false;
      }
    }, [combinedRef, indeterminate]);

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

export default IndeterminateCheckbox;

Table

import React, { useState, useEffect } from 'react';

import {
  useTable,
  useRowSelect,
  HeaderProps,
  CellProps,
  useFilters,
  useGlobalFilter,
  usePagination,
} from 'react-table';
import IndeterminateCheckbox from '../../components/Table/IndeterminateCheckbox';
import makeData from '../../components/Table/makeData';

function ReactTable({
  columns,
  data,
  setSelectedRows,
  selectedRows,
}: any): any {
  const [filterInput, setFilterInput] = useState('');
  const {
    setGlobalFilter,
    pageCount,
    previousPage,
    nextPage,
    canPreviousPage,
    state: { selectedRowIds, pageIndex, pageSize },
    canNextPage,
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    page,
    prepareRow,
  } = useTable(
    {
      columns,
      data,
      initialState: { pageIndex: 0, pageSize: 5 },
      state: {
        selectedRowPaths: selectedRows,
      },
    },
    useFilters,
    useGlobalFilter,
    usePagination,
    useRowSelect,
  );

  function handleFilterChange(value: string): void {
    setGlobalFilter(value); 
    setFilterInput(value);
  }
  useEffect(() => {
    setSelectedRows(selectedRows);
  }, [setSelectedRows, selectedRows]);

  return (
    <>
      <div>
        <div>
          <input
            value={filterInput}
            onChange={(change) => handleFilterChange(change.target.value)}
            placeholder="Search..."
          />
        </div>
      </div>
      <div>
        {Object.keys(selectedRowIds).length ? (
          <div>
            <span>
              {Object.keys(selectedRowIds).length} contacts selected
            </span>
          </div>
        ) : (
          <>
            <div >
              <span>
                <strong>
                  {pageSize * pageIndex + 1} -{' '}
                  {pageCount - (pageIndex + 1) === 0
                    ? rows.length
                    : (pageIndex + 1) * 5}
                </strong>{' '}
                of <strong>{rows.length}</strong>
              </span>
              <button
                type="button"
                onClick={() => previousPage()}
                disabled={!canPreviousPage}
              >
               back
              </button>{' '}
              <button
                type="button"
                className="btn-steps"
                onClick={() => nextPage()}
                disabled={!canNextPage}
              >
                next
              </button>{' '}
            </div>
          </>
        )}
      </div>

      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {page.map((row) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  // const { id } = cell.row.original;
                  if (cell.column.id === 'selection') {
                    return (
                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                    );
                  }
                  return (
                    <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
      <div>
        <div>
          <span>
            <strong>
              {pageSize * pageIndex + 1} -{' '}
              {pageCount - (pageIndex + 1) === 0
                ? rows.length
                : (pageIndex + 1) * 5}
            </strong>{' '}
            of <strong>{rows.length}</strong>
          </span>
          <button
            type="button"
            onClick={() => previousPage()}
            disabled={!canPreviousPage}
          >
           back
          </button>{' '}
          <button
            type="button"
            onClick={() => nextPage()}
            disabled={!canNextPage}
          >
            next
          </button>{' '}
        </div>
      </div>
    </>
  );
}

const Table: React.FC = () => {
  const columns = React.useMemo(
    () => [
      {
        id: 'selection',
        Header: ({ getToggleAllRowsSelectedProps }: HeaderProps<any>) => (
          <CheckBox>
            <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
          </CheckBox>
        ),
        Cell: ({ row }: CellProps<any>) => (
          <CheckBox>
            <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
          </CheckBox>
        ),
      },
      {
        Header: 'Name',
        columns: [
          {
            Header: 'First Name',
            accessor: 'name',
          },
          {
            Header: 'Email',
            accessor: 'email',
          },
        ],
      },
      {
        Header: 'Info',
        columns: [
          {
            Header: 'Age',
            accessor: 'age',
          },
          {
            Header: 'Visits',
            accessor: 'visits',
          },
          {
            Header: 'Status',
            accessor: 'status',
          },
          {
            Header: 'Profile Progress',
            accessor: 'progress',
          },
        ],
      },
    ],
    [],
  );

  const data = React.useMemo(() => makeData(10), []);
 
  const [selectedRows, setSelectedRows] = useState([]);
  return (
            <div className="table">
              <ReactTable
                columns={columns}
                data={data}
                selectedRows={selectedRows}
                setSelectedRows={setSelectedRows}
              />
              {/* <p>Selected Rows: {selectedRows.length}</p>
              <p>Data: </p>
              <pre>
                <code>
                  {JSON.stringify(
                    {
                      selectedRows,
                    },
                    null,
                    2,
                  )}
                </code>
              </pre> */}
            </div>
      
  );
};

export default Table;

Help plz.

[07harish]

I had the same situation while doing server pagination, my selected rows were reset.

• Row ID starts from 0 in all of the pages, Use getRowId (from table options) to generate unique Row ID's, Now you get all selected rows in state.selectedRowIDs
• Check faq's, You will have to skip reset by using autoResetSelectedRows: !skipPageResetRef.current

[blindibrasil]

I tried to implement the suggestion you informed in the code but without success.
I think the error is in the IndeterminateCheckbox part especially in useCombinedRefs.
Do you know of an example link for the application of React-Table with Typescript using the checkbox?

[Aycom366]

hi there, gotten an ans to your question?

[blindibrasil]

No. There I took a break from developing this functionality and waiting for new updates for this package.

[adrianowy]

Hi @blindibrasil, check another example in React-Table documentation, https://react-table.tanstack.com/docs/examples/kitchen-sink.
On this example there is row select function and it's working checkbox as you want.

[adrianowy]

Also try to change in the hook option from "getToggleAllPageRowsSelectedProps" to "getToggleAllRowsSelectedProps"

[Therunner05]

I unfortunately ran into the same issue, trying to make an ignore checkbox. I wasn't able to find a way to preserve the state but you can instead create a use Effect containing an async function that can make calls to a database, grabbing the info you need, and setting a state variable (attached to the checkbox) to the values grabbed.
if (grabbed data != state variable data){ setState(grabbed data) }
there must a way to preserve this state differently though, and there will be a 'blip' on changed checkboxes when you switch table pages.