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 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 568x 3267x 3267x 568x 568x 568x 568x 568x 568x 568x 568x 1184x 1184x 1184x 1184x 1184x 1184x 8701x 8701x 8701x 8701x 8701x 8701x 8701x 1184x 568x 1x 1x 401x 401x 401x 401x 401x 401x 401x 401x 401x 401x 401x 401x 401x | 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;
}
|