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 | 33x 33x 33x 33x 2758x 33x 33x 408x 1925x 1925x 1925x 24480x 33x 408x | import React, { useState } from "react";
import { Table } from "react-bootstrap";
import {
useReactTable,
getCoreRowModel,
getExpandedRowModel,
flexRender,
} from "@tanstack/react-table";
function SectionsTableBase({ data, columns, testid = "testid" }) {
const [expanded, setExpanded] = useState({});
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
});
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>
{table.getRowModel().rows.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>
);
}
export default SectionsTableBase;
|