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 | 1x 1x 1x 1x 1x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 550x 3157x 3157x 550x 550x 550x 550x 550x 550x 550x 550x 1128x 1128x 1128x 1128x 1128x 1128x 8125x 8125x 8125x 8125x 8125x 8125x 8125x 1128x 550x 1x 1x 398x 398x 398x 398x 398x 398x 398x 398x 398x 398x 398x 398x 398x | import React, { useMemo } from "react";
import {
createColumnHelper,
flexRender,
getCoreRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import { Button } from "react-bootstrap";
import SortCaret from "main/components/Common/SortCaret";
import { convertOldStyleColumnsToNewStyle } from "main/components/OurTableUtils";
function OurTable({ data, columns, testid = "testid" }) {
const newColumns = convertOldStyleColumnsToNewStyle(columns);
const memoizedData = useMemo(() => data, [data]);
const memoizedColumns = useMemo(() => newColumns, [newColumns]);
const table = useReactTable({
data: memoizedData,
columns: memoizedColumns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
});
return (
<table className="table table-striped table-bordered" data-testid={testid}>
<thead>
{table.getHeaderGroups().map((headerGroup, i) => (
<tr
data-testid={`${testid}-header-group-${i}`}
// Stryker disable next-line StringLiteral : React key property not exposed in dom
key={`${testid}-header-group-${i}`}
>
{headerGroup.headers.map((header) => (
<th
data-testid={`${testid}-header-${header.column.id}`}
key={`${testid}-header-${header.column.id}`}
colSpan={header.colSpan}
>
{header.isPlaceholder ? null : (
<div
// Add onClick handler for sorting if the column is sortable
{...(header.column.getCanSort() && {
onClick: header.column.getToggleSortingHandler(),
style: { cursor: "pointer" }, // Add cursor style for visual cue
})}
data-testid={`${testid}-header-${header.column.id}-sort-header`}
>
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
<SortCaret header={header} testId={testid} />
</div>
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => {
const rowTestId = `${testid}-row-${row.index}`;
return (
<tr
data-testid={rowTestId}
// Stryker disable next-line StringLiteral : React key property not exposed in dom
key={rowTestId}
>
{row.getVisibleCells().map((cell) => {
const testId = `${testid}-cell-row-${cell.row.index}-col-${cell.column.id}`;
return (
<td
data-testid={testId}
// Stryker disable next-line StringLiteral : React key property not exposed in dom
key={testId}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
);
}
export default OurTable;
export function ButtonColumn(label, variant, callback, testid) {
const columnHelper = createColumnHelper();
const buttonColumn = columnHelper.display({
id: label, // Unique ID for display columns
header: label,
cell: ({ cell }) => (
<Button
variant={variant}
onClick={() => callback(cell)}
data-testid={`${testid}-cell-row-${cell.row.index}-col-${cell.column.id}-button`}
>
{label}
</Button>
),
});
return buttonColumn;
}
|