title: React-table combination of rows and pagination doesn't function as intended
body: <p>I'm using <code>react-table</code> to include the rows and pagination in the table as shown in this example: <a href="https://react-table.tanstack.com/docs/examples/row-selection-and-pagination" rel="nofollow noreferrer">https://react-table.tanstack.com/docs/examples/row-selection-and-pagination</a>.
  I've done my example as the tutorial says, but it doesn't function as intended. I can only select 1 row before it stops updating the <code>selectedRowsId</code>. Deselecting the row doesn't clear it either. What am I doing wrong?</p>
  <pre><code>import React, { useMemo, forwardRef, useRef, useEffect } from &quot;react&quot;;
  import {
    useTable,
    useSortBy,
    useFilters,
    useGlobalFilter,
    usePagination,
    useRowSelect
  } from &quot;react-table&quot;;
  import matchSorter from &quot;match-sorter&quot;;
  import '../../static/scss/table.scss'
  
  
  function DefaultColumnFilter({
    column: { filterValue, preFilteredRows, setFilter },
  }) {
    const count = preFilteredRows.length;
  
    return (
      &lt;input
        value={filterValue || &quot;&quot;}
        onChange={(e) =&gt; {
          setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
        }}
        placeholder={`Search ${count} records...`}
      /&gt;
    );
  }
  
  function SelectColumnFilter({
    column: { filterValue, setFilter, preFilteredRows, id },
  }) {
    // Calculate the options for filtering
    // using the preFilteredRows
    const options = React.useMemo(() =&gt; {
      const options = new Set();
      preFilteredRows.forEach((row) =&gt; {
        options.add(row.values[id]);
      });
      return [...options.values()];
    }, [id, preFilteredRows]);
  
    // Render a multi-select box
    return (
      &lt;select
        value={filterValue}
        onChange={(e) =&gt; {
          setFilter(e.target.value || undefined);
        }}
      &gt;
        &lt;option value=&quot;&quot;&gt;All&lt;/option&gt;
        {options.map((option, i) =&gt; (
          &lt;option key={i} value={option}&gt;
            {option}
          &lt;/option&gt;
        ))}
      &lt;/select&gt;
    );
  }
  
  function fuzzyTextFilterFn(rows, id, filterValue) {
    return matchSorter(rows, filterValue, { keys: [(row) =&gt; row.values[id]] });
  }
  
  fuzzyTextFilterFn.autoRemove = (val) =&gt; !val;
  
  const IndeterminateCheckbox = forwardRef(
    ({ indeterminate, ...rest }, ref) =&gt; {
      const defaultRef = useRef()
      const resolvedRef = ref || defaultRef
  
      useEffect(() =&gt; {
        resolvedRef.current.indeterminate = indeterminate
      }, [resolvedRef, indeterminate])
  
      return (
        &lt;&gt;
          &lt;input type=&quot;checkbox&quot; ref={resolvedRef} {...rest} /&gt;
        &lt;/&gt;
      )
    }
  )
  
  export default function Table({ data }) {
    console.log(data[0].title);
  
    const filterTypes = useMemo(
      () =&gt; ({
        // Add a new fuzzyTextFilterFn filter type.
        fuzzyText: fuzzyTextFilterFn,
        // Or, override the default text filter to use
        // &quot;startWith&quot;
        text: (rows, id, filterValue) =&gt; {
          return rows.filter((row) =&gt; {
            const rowValue = row.values[id];
            return rowValue !== undefined
              ? String(rowValue)
                  .toLowerCase()
                  .startsWith(String(filterValue).toLowerCase())
              : true;
          });
        },
      }),
      []
    );
  
    const defaultColumn = useMemo(
      () =&gt; ({
        // Let's set up our default Filter UI
        Filter: DefaultColumnFilter,
      }),
      []
    );
  
    const columns = useMemo(
      () =&gt; [
        {
          Header: &quot;Naziv&quot;,
          accessor: &quot;title&quot;,
        },
        {
          Header: &quot;Tip&quot;,
          accessor: &quot;activity_type_id&quot;,
          Filter: SelectColumnFilter,
          filter: &quot;includes&quot;,
        },
        {
          Header: &quot;Datum&quot;,
          accessor: &quot;start_time&quot;,
        },
        {
          Header: &quot;Mjesto&quot;,
          accessor: &quot;location&quot;,
        },
        {
          Header: &quot;Organizator&quot;,
          accessor: &quot;team_id&quot;,
          Filter: SelectColumnFilter,
          filter: &quot;includes&quot;,
        },
        {
          Header: &quot;Odgovorna osoba&quot;,
          accessor: &quot;user_id&quot;,
        },
      ],
      []
    );
  
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      page,
      prepareRow,
      canPreviousPage,
      canNextPage,
      pageOptions,
      pageCount,
      gotoPage,
      nextPage,
      previousPage,
      setPageSize,
      selectedFlatRows,
      state: { pageIndex, pageSize, selectedRowIds },
    } = useTable(
      {
        columns,
        data,
        defaultColumn,
        filterTypes,
        initialState: { pageIndex: 0 },
      },
      useFilters,
      useGlobalFilter,
      useSortBy,
      usePagination,
      useRowSelect,
      hooks =&gt; {
        hooks.visibleColumns.push(columns =&gt; [
          // Let's make a column for selection
          {
            id: 'selection',
            // The header can use the table's getToggleAllRowsSelectedProps method
            // to render a checkbox
            Header: ({ getToggleAllPageRowsSelectedProps }) =&gt; (
              &lt;div&gt;
                &lt;IndeterminateCheckbox {...getToggleAllPageRowsSelectedProps()} /&gt;
              &lt;/div&gt;
            ),
            // The cell can use the individual row's getToggleRowSelectedProps method
            // to the render a checkbox
            Cell: ({ row }) =&gt; (
              &lt;div&gt;
                &lt;IndeterminateCheckbox {...row.getToggleRowSelectedProps()} /&gt;
              &lt;/div&gt;
            ),
          },
          ...columns,
        ])
      }
    );
    return (
      &lt;div&gt;
        &lt;legend className=&quot;legend&quot;&gt;Popis aktivnosti&lt;/legend&gt;
        &lt;&gt;
        &lt;pre&gt;
          &lt;code&gt;
            {JSON.stringify(
              {
                pageIndex,
                pageSize,
                pageCount,
                canNextPage,
                canPreviousPage,
              },
              null,
              2
            )}
          &lt;/code&gt;
        &lt;/pre&gt;
          &lt;table {...getTableProps()}&gt;
            &lt;thead&gt;
              {
                // Loop over the header rows
                headerGroups.map((headerGroup) =&gt; (
                  // Apply the header row props
                  &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
                    {
                      // Loop over the headers in each row
                      headerGroup.headers.map((column) =&gt; (
                        // Apply the header cell props
                        &lt;th
                          {...column.getHeaderProps(
                            column.getSortByToggleProps()
                          )}
                        &gt;
                          {
                            // Render the header
                            column.render(&quot;Header&quot;)
                          }
                          &lt;span&gt;
                            {column.isSorted
                              ? column.isSortedDesc
                                ? &quot; &quot;
                                : &quot; &quot;
                              : &quot;&quot;}
                          &lt;/span&gt;
                        &lt;/th&gt;
                      ))
                    }
                    {}
                    &lt;th&gt;Nige&lt;/th&gt;
                    &lt;th&gt;Nei&lt;/th&gt;
                  &lt;/tr&gt;
                ))
              }
              {
                // Loop over the header rows
                headerGroups.map((headerGroup) =&gt; (
                  // Apply the header row props
                  &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
                    {
                      // Loop over the headers in each row
                      headerGroup.headers.map((column) =&gt; (
                        // Apply the header cell props
                        &lt;th&gt;
                          &lt;div&gt;
                            {column.canFilter ? column.render(&quot;Filter&quot;) : null}
                          &lt;/div&gt;
                        &lt;/th&gt;
                      ))
                    }
                    {}
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                  &lt;/tr&gt;
                ))
              }
            &lt;/thead&gt;
            {/* Apply the table body props */}
            &lt;tbody {...getTableBodyProps()}&gt;
            {page.map((row, i) =&gt; {
              prepareRow(row)
              return (
                &lt;tr {...row.getRowProps()}&gt;
                  {row.cells.map(cell =&gt; {
                    return &lt;td {...cell.getCellProps()}&gt;{cell.render('Cell')}&lt;/td&gt;
                  })}
                &lt;/tr&gt;
              )
            })}
          &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;div className=&quot;pagination&quot;&gt;
            &lt;button onClick={() =&gt; gotoPage(0)} disabled={!canPreviousPage}&gt;
              {&quot;&lt;&lt;&quot;}
            &lt;/button&gt;{&quot; &quot;}
            &lt;button onClick={() =&gt; previousPage()} disabled={!canPreviousPage}&gt;
              {&quot;&lt;&quot;}
            &lt;/button&gt;{&quot; &quot;}
            &lt;button onClick={() =&gt; nextPage()} disabled={!canNextPage}&gt;
              {&quot;&gt;&quot;}
            &lt;/button&gt;{&quot; &quot;}
            &lt;button
              onClick={() =&gt; gotoPage(pageCount - 1)}
              disabled={!canNextPage}
            &gt;
              {&quot;&gt;&gt;&quot;}
            &lt;/button&gt;{&quot; &quot;}
            &lt;span&gt;
              Page{&quot; &quot;}
              &lt;strong&gt;
                {pageIndex + 1} of {pageOptions.length}
              &lt;/strong&gt;{&quot; &quot;}
            &lt;/span&gt;
            &lt;span&gt;
              | Go to page:{&quot; &quot;}
              &lt;input
                type=&quot;number&quot;
                defaultValue={pageIndex + 1}
                onChange={(e) =&gt; {
                  const page = e.target.value ? Number(e.target.value) - 1 : 0;
                  gotoPage(page);
                }}
                style={{ width: &quot;100px&quot; }}
              /&gt;
            &lt;/span&gt;{&quot; &quot;}
            &lt;select
              value={pageSize}
              onChange={(e) =&gt; {
                setPageSize(Number(e.target.value));
              }}
            &gt;
              {[10, 20, 30, 40, 50].map((pageSize) =&gt; (
                &lt;option key={pageSize} value={pageSize}&gt;
                  Show {pageSize}
                &lt;/option&gt;
              ))}
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;p&gt;Selected Rows: {Object.keys(selectedRowIds).length}&lt;/p&gt;
        &lt;pre&gt;
          &lt;code&gt;
            {JSON.stringify(
              {
                selectedRowIds: selectedRowIds,
                'selectedFlatRows[].original': selectedFlatRows.map(
                  d =&gt; d.original
                ),
              },
              null,
              2
            )}
          &lt;/code&gt;
        &lt;/pre&gt;
        &lt;/&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>