React table row selection - reactjs

Question

I've followed below link and tried to construct a table grid which includes row selection.
https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/row-selection
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.
Here is the code snippet.
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) => {
const defaultRef = React.useRef();
const resolvedRef = ref || defaultRef;
React.useEffect(() => {
resolvedRef.current.indeterminate = indeterminate;
}, [resolvedRef, indeterminate]);
return (
<>
<input type="checkbox" ref={resolvedRef} {...rest} />
</>
);
}
);
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) => {
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>
<IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
</div>
),
// The cell can use the individual row's getToggleRowSelectedProps method
// to the render a checkbox
Cell: ({ row }) => (
<div>
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
</div>
),
},
...columns,
]);
}
);
// Render the UI for your table
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.slice(0, 10).map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
})}
</tr>
);
})}
</tbody>
</table>
);
}
const Xxxxxxxx = ({ actions, history }) => {
const { data, loading, error } = useQuery(QUERY);
const gridData = React.useMemo(() => (data ? data.xxxxx.data : []), [data]);
const [activeTab, setActiveTab] = useState("ALL");
const columns = React.useMemo(
() => [
{
Header: "Name",
accessor: "contactName",
Cell: function (props) {
return (
<span>
<b>
<Link to={"/xxxxx/" + props.row.original.id}>
{props.value}
</Link>
</b>
<br></br>
<span>{props.row.original.title}</span>
<br></br>
<Link to={"/xxxxx/" + props.row.original.id}>
{props.row.original.accountName}
</Link>
</span>
);
},
},
{
Header: "Cadence",
accessor: "accountName",
Cell: function (props) {
return (
<span>
<b>
<Link to={"/xxxxxxxx/" + cadence.id}>{props.value}</Link>
</b>
</span>
);
},
},
{
Header: "Tags",
accessor: "tag",
Cell: function (props) {
return (
<Badge color="secondary" pill>
{props.value}
</Badge>
);
},
},
{
Header: "C Outcome",
accessor: "phone",
},
{
Header: "E Outcome",
accessor: "title",
},
{
Header: "Last Contact",
accessor: "createdDate",
},
],
[]
);
const XxxxxxGrid = React.useMemo(
() => (
<XxxxxxGrid
columns={columns}
data={gridData}
prospectData={prospectData}
/>
),
[gridData]
);
return (
<ContentWrapper>
<div className="content-heading pb-0">
<div>
<em className="fa fa-user fa-lg"></em> Prospects
</div>
<div className="ml-auto">
<ul className="nav nav-tabs">
<li className="nav-item">
<a
href="#"
className={
"nav-link text-center" +
(activeTab === "xxxx" ? " active" : "")
}
>
<h4 className="text-primary">1522</h4>
<h6>xxx</h6>
</a>
</li>
<li className="nav-item">
<a
href="#"
className={
"nav-link text-center" +
(activeTab === "xxxx" ? " active" : "")
}
>
<h4 className="text-primary">1522</h4>
<h6>xxxx</h6>
</a>
</li>
<li className="nav-item">
<a
href="#"
className={
"nav-link text-center" +
(activeTab === "xxxx" ? " active" : "")
}
>
<h4 className="text-primary">1522</h4>
<h6>xxx</h6>
</a>
</li>
<li className="nav-item">
<a
href="#"
className={
"nav-link text-center" +
(activeTab === "xxxxxx" ? " active" : "")
}
>
<h4 className="text-primary">1522</h4>
<h6>xxxxx</h6>
</a>
</li>
</ul>
</div>
</div>
<Row className="mb-3">
<Col sm={4}>
<div className="input-group pl-0">
<input
type="text"
className="form-control"
placeholder="Search"
aria-label="Search"
aria-describedby="button-addon2"
/>
<div className="input-group-append">
<Button
color="outline-secondary"
type="button"
id="button-addon2"
>
<i className="fa fa-search"></i>
</Button>
</div>
</div>
</Col>
</Row>
<Row className="border-bottom border-top">
<div className="ml-auto">
<Button color="outline">
<em className="fas fa-file-csv text-primary"></em> Import CSV
</Button>
|
<Button color="outline">
<em className="fa fa-plus text-primary"></em> Add
</Button>
</div>
</Row>
<Row>{!loading && XxxxxxGrid}</Row>
</ContentWrapper>
);
};
export default Xxxxxxxx;

Answer 1

Something similar happened to me,
in my case the bug was generated due to a conflict with the StrictMode generated by default in index.js.
Try to Delete it
ReactDOM.render (
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById ('root')
the Index should look like this:
ReactDOM.render (
<App />,
document.getElementById ('root')