Codex
d8a29bfbdd
Implement approved specification #32 and tickets #33-#37. Keep host authentication server-verified and pin session interaction language. Compile scoped base selectors for browser compatibility and retain full gutters during CSS pruning.
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { AgGridReact } from "ag-grid-react";
|
|
import { useRef } from "react";
|
|
import { AllCommunityModule, ModuleRegistry, type GridState } from "ag-grid-community";
|
|
import { AG_GRID_LOCALE_EN, AG_GRID_LOCALE_IT } from "@ag-grid-community/locale";
|
|
import { useI18n } from "../i18n";
|
|
import "ag-grid-community/styles/ag-grid.css";
|
|
import "ag-grid-community/styles/ag-theme-alpine.css";
|
|
|
|
// Register AG Grid modules once at module load time
|
|
ModuleRegistry.registerModules([AllCommunityModule]);
|
|
|
|
interface Props {
|
|
columns: string[];
|
|
rows: unknown[][];
|
|
}
|
|
|
|
/** Reusable read-only preview grid: columns + row tuples → AG Grid. */
|
|
export function PreviewGrid({ columns, rows }: Props) {
|
|
const { locale } = useI18n();
|
|
const gridMessages: Readonly<Record<string, string>> = locale === "it" ? AG_GRID_LOCALE_IT : AG_GRID_LOCALE_EN;
|
|
const gridState = useRef<GridState>();
|
|
const columnDefs = columns.map((col) => ({ field: col, headerName: col }));
|
|
|
|
const rowData = rows.map((row) => {
|
|
const obj: Record<string, unknown> = {};
|
|
columns.forEach((col, i) => {
|
|
obj[col] = row[i];
|
|
});
|
|
return obj;
|
|
});
|
|
|
|
return (
|
|
<div className="overflow-hidden rounded-xl border border-border/70 shadow-xs">
|
|
<div className="ag-theme-alpine thot-preview-grid" style={{ height: 400, width: "100%" }}>
|
|
<AgGridReact
|
|
key={locale}
|
|
theme="legacy"
|
|
columnDefs={columnDefs}
|
|
rowData={rowData}
|
|
localeText={gridMessages}
|
|
initialState={gridState.current}
|
|
onStateUpdated={({ state }) => { gridState.current = state; }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|