title: React table row selection
body: <p>I've followed below link and tried to construct a table grid which includes row selection.</p>
  
  <p><a href="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/row-selection" rel="nofollow noreferrer">https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/row-selection</a></p>
  
  <p>But for some reason it's not working. It's allowing me to select any two rows. When I select 3rd row the previous selection isn't remembered.</p>
  
  <p>Here is the code snippet.</p>
  
  <pre><code>import React, { useState, useEffect, useRef } from "react";
  import { useQuery } from "@apollo/react-hooks";
  import { ContentWrapper } from "@nextaction/components";
  import { useTable, useRowSelect, usePagination } from "react-table";
  import $ from "jquery";
  import { Row, Col, Button, Badge } from "reactstrap";
  
  import FETCH_XXXXX_QUERY from "../queries/FetchXXXXXQuery";
  import { Link } from "react-router-dom";
  
  const IndeterminateCheckbox = React.forwardRef(
    ({ indeterminate, ...rest }, ref) =&gt; {
      const defaultRef = React.useRef();
      const resolvedRef = ref || defaultRef;
  
      React.useEffect(() =&gt; {
        resolvedRef.current.indeterminate = indeterminate;
      }, [resolvedRef, indeterminate]);
  
      return (
        &lt;&gt;
          &lt;input type="checkbox" ref={resolvedRef} {...rest} /&gt;
        &lt;/&gt;
      );
    }
  );
  
  function XxxxxxGrid({ columns, data, prospectData }) {
    // Use the state and functions returned from useTable to build your UI
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      prepareRow,
      selectedFlatRows,
      state: { selectedRowIds },
    } = useTable(
      {
        columns,
        data,
        prospectData,
      },
      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: ({ getToggleAllRowsSelectedProps }) =&gt; (
              &lt;div&gt;
                &lt;IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} /&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,
        ]);
      }
    );
  
    // Render the UI for your table
    return (
      &lt;table {...getTableProps()}&gt;
        &lt;thead&gt;
          {headerGroups.map((headerGroup) =&gt; (
            &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
              {headerGroup.headers.map((column) =&gt; (
                &lt;th {...column.getHeaderProps()}&gt;{column.render("Header")}&lt;/th&gt;
              ))}
            &lt;/tr&gt;
          ))}
        &lt;/thead&gt;
        &lt;tbody {...getTableBodyProps()}&gt;
          {rows.slice(0, 10).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;
    );
  }
  
  const Xxxxxxxx = ({ actions, history }) =&gt; {
    const { data, loading, error } = useQuery(QUERY);
  
    const gridData = React.useMemo(() =&gt; (data ? data.xxxxx.data : []), [data]);
  
    const [activeTab, setActiveTab] = useState("ALL");
  
    const columns = React.useMemo(
      () =&gt; [
        {
          Header: "Name",
          accessor: "contactName",
          Cell: function (props) {
            return (
              &lt;span&gt;
                &lt;b&gt;
                  &lt;Link to={"/xxxxx/" + props.row.original.id}&gt;
                    {props.value}
                  &lt;/Link&gt;
                &lt;/b&gt;
                &lt;br&gt;&lt;/br&gt;
                &lt;span&gt;{props.row.original.title}&lt;/span&gt;
                &lt;br&gt;&lt;/br&gt;
                &lt;Link to={"/xxxxx/" + props.row.original.id}&gt;
                  {props.row.original.accountName}
                &lt;/Link&gt;
              &lt;/span&gt;
            );
          },
        },
        {
          Header: "Cadence",
          accessor: "accountName",
          Cell: function (props) {
            return (
              &lt;span&gt;
                &lt;b&gt;
                  &lt;Link to={"/xxxxxxxx/" + cadence.id}&gt;{props.value}&lt;/Link&gt;
                &lt;/b&gt;
              &lt;/span&gt;
            );
          },
        },
        {
          Header: "Tags",
          accessor: "tag",
          Cell: function (props) {
            return (
              &lt;Badge color="secondary" pill&gt;
                {props.value}
              &lt;/Badge&gt;
            );
          },
        },
        {
          Header: "C Outcome",
          accessor: "phone",
        },
        {
          Header: "E Outcome",
          accessor: "title",
        },
        {
          Header: "Last Contact",
          accessor: "createdDate",
        },
      ],
      []
    );
  
    const XxxxxxGrid = React.useMemo(
      () =&gt; (
        &lt;XxxxxxGrid
          columns={columns}
          data={gridData}
          prospectData={prospectData}
        /&gt;
      ),
      [gridData]
    );
  
    return (
      &lt;ContentWrapper&gt;
        &lt;div className="content-heading pb-0"&gt;
          &lt;div&gt;
            &lt;em className="fa fa-user fa-lg"&gt;&lt;/em&gt; Prospects
          &lt;/div&gt;
          &lt;div className="ml-auto"&gt;
            &lt;ul className="nav nav-tabs"&gt;
              &lt;li className="nav-item"&gt;
                &lt;a
                  href="#"
                  className={
                    "nav-link text-center" +
                    (activeTab === "xxxx" ? " active" : "")
                  }
                &gt;
                  &lt;h4 className="text-primary"&gt;1522&lt;/h4&gt;
                  &lt;h6&gt;xxx&lt;/h6&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li className="nav-item"&gt;
                &lt;a
                  href="#"
                  className={
                    "nav-link text-center" +
                    (activeTab === "xxxx" ? " active" : "")
                  }
                &gt;
                  &lt;h4 className="text-primary"&gt;1522&lt;/h4&gt;
                  &lt;h6&gt;xxxx&lt;/h6&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li className="nav-item"&gt;
                &lt;a
                  href="#"
                  className={
                    "nav-link text-center" +
                    (activeTab === "xxxx" ? " active" : "")
                  }
                &gt;
                  &lt;h4 className="text-primary"&gt;1522&lt;/h4&gt;
                  &lt;h6&gt;xxx&lt;/h6&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li className="nav-item"&gt;
                &lt;a
                  href="#"
                  className={
                    "nav-link text-center" +
                    (activeTab === "xxxxxx" ? " active" : "")
                  }
                &gt;
                  &lt;h4 className="text-primary"&gt;1522&lt;/h4&gt;
                  &lt;h6&gt;xxxxx&lt;/h6&gt;
                &lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;Row className="mb-3"&gt;
          &lt;Col sm={4}&gt;
            &lt;div className="input-group pl-0"&gt;
              &lt;input
                type="text"
                className="form-control"
                placeholder="Search"
                aria-label="Search"
                aria-describedby="button-addon2"
              /&gt;
              &lt;div className="input-group-append"&gt;
                &lt;Button
                  color="outline-secondary"
                  type="button"
                  id="button-addon2"
                &gt;
                  &lt;i className="fa fa-search"&gt;&lt;/i&gt;
                &lt;/Button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
        &lt;Row className="border-bottom border-top"&gt;
          &lt;div className="ml-auto"&gt;
            &lt;Button color="outline"&gt;
              &lt;em className="fas fa-file-csv text-primary"&gt;&lt;/em&gt;&amp;nbsp; Import CSV
            &lt;/Button&gt;
            &amp;nbsp;|
            &lt;Button color="outline"&gt;
              &lt;em className="fa fa-plus text-primary"&gt;&lt;/em&gt;&amp;nbsp; Add
            &lt;/Button&gt;
          &lt;/div&gt;
        &lt;/Row&gt;
        &lt;Row&gt;{!loading &amp;&amp; XxxxxxGrid}&lt;/Row&gt;
      &lt;/ContentWrapper&gt;
    );
  };
  
  export default Xxxxxxxx;
  </code></pre>