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 | 636x 636x 636x 636x 636x 637x 4632x 1336x 1336x 9829x 9829x 395x 395x 875x 8x 395x | 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;
}
|