Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 51x 51x 51x 51x 51x 51x 3834x 51x 51x 51x 370x 370x | import React, { useState } from "react";
import { Table } from "react-bootstrap";
import {
useReactTable,
getCoreRowModel,
getExpandedRowModel,
flexRender,
} from "@tanstack/react-table";
import OurPagination from "main/components/Utils/OurPagination";
function SectionsTableBase({ data, columns, testid = "testid" }) {
const [expanded, setExpanded] = useState({});
const [page, setPage] = useState(1); // State for current page
const pageSize = 10; // Limit to 10 items
const altColor = "#e3ebfc";
const whiteColor = "#ffffff";
const table = useReactTable({
data: data,
columns: columns,
state: {
expanded,
},
onExpandedChange: setExpanded,
getSubRows: (row) => row.subRows, // This tells TanStack Table how to find sub-rows
getCoreRowModel: getCoreRowModel(),
getExpandedRowModel: getExpandedRowModel(), // Required for expansion
});
// Pagination Logic: Slice the rows based on the current page
const rows = table.getRowModel().rows;
const totalPages = Math.ceil(rows.length / pageSize);
const rowsToDisplay = rows.slice((page - 1) * pageSize, page * pageSize);
return (
<>
<Table data-testid={testid} bordered hover className="table-hover">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{rowsToDisplay.map((row) => {
const rowStyle = {
backgroundColor: row.index % 2 === 0 ? altColor : whiteColor,
};
const rowId = `row-${row.id}`;
return (
<tr
key={rowId}
style={rowStyle}
data-testid={`${testid}-${rowId}`}
>
{row.getVisibleCells().map((cell) => (
<td
key={cell.id}
data-testid={`${testid}-cell-row-${cell.row.id}-col-${cell.column.id}`}
style={{
backgroundColor: "inherit",
fontWeight: row.depth === 0 ? "bold" : "normal",
}}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
);
})}
</tbody>
<tfoot>
{table.getFooterGroups().map((footerGroup) => (
<tr key={footerGroup.id}>
{footerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.footer,
header.getContext(),
)}
</th>
))}
</tr>
))}
</tfoot>
</Table>
{totalPages > 1 && (
<OurPagination
activePage={page}
changePage={setPage}
totalPages={totalPages}
/>
)}
</>
);
}
export default SectionsTableBase;
|