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 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | 229x 229x 229x 229x 229x 1710x 585x 585x 3439x 3439x 143x 143x 194x 10x 143x 82x 82x 82x 228x 228x 228x 82x | 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", initialState = {} }) {
const newColumns = convertOldStyleColumnsToNewStyle(columns);
const memoizedData = useMemo(() => data, [data]);
const table = useReactTable({
data: memoizedData,
columns: newColumns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
initialState: initialState,
});
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;
}
export function DateColumn(label, getDate) {
const columnHelper = createColumnHelper();
const options = {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric",
hour12: false,
timeZone: "America/Los_Angeles",
};
const column = columnHelper.display({
header: label,
id: label,
cell: ({ cell }) => {
const date = new Date(getDate(cell));
const formattedDate = new Intl.DateTimeFormat("en-US", options).format(
date,
);
return <>{formattedDate}</>;
},
});
return column;
}
|