laif-ds/dist/agent-docs/components/DataCrossTable.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # DataCrossTable
 
 ## Overview
 
 Cross table component that renders a matrix from two headers (top/left) with virtualized rows, sticky headers/first column, optional filtering/sorting, and an edit mode supported by a context provider and action buttons.
 
 ---
 
 ## Props
 
 | Prop               | Type                    | Default | Description |
 | ------------------ | ----------------------- | ------- | ----------- |
 | `crossTableData`   | `CrossTableData`        | —       | Matrix data and headers. |
 | `filterable`       | `boolean`               | `false` | Enables sorting via header buttons and row sorting by selected row. |
 | `loading`          | `boolean`               | `false` | Shows a skeleton table. |
 | `emptyComponent`   | `ReactNode`             | `undefined` | Shown when no data. |
 | `className`        | `string`                | `undefined` | Wrapper classes. |
 | `notFoundMessage`  | `string`                | `"Nessun risultato trovato."` | Fallback empty message. |
 | `cornerHeaderFrom` | `string`                | `"Da"`  | Corner label (top-left) from. |
 | `cornerHeaderTo`   | `string`                | `"A"`   | Corner label (top-left) to. |
 | `minWidthCell`     | `number`                | `160`   | Minimum cell width in px. |
 | `editable`         | `boolean`               | `false` | Enable edit mode features. |
 | `editMode`         | `boolean`               | `false` | Control edit mode from outside. |
 | `onEditModeChange` | `(editMode: boolean) => void` | `undefined` | Notified when edit mode changes. |
 | `onSelectedRow`    | `(row: CrossTableHeader) => void` | `undefined` | Emitted when selecting a row for sorting. |
 | `selectedRow`      | `CrossTableHeader`      | `undefined` | Controlled selected row. |
 | `rowSortAsc`       | `boolean`               | `true`  | Sort ascending when selecting a row. |
 
 ### Types
 
 - `CrossTableHeader` → `{ id: string; label: string }`
 - `CrossTableCell` → `{ render?:(fromId,toId,id?)=>ReactNode; value?: number|string|null; bgColor?: string; textColor?: string; fromId: string; toId: string; id?: string; editable?: boolean }`
 - `CrossTableData` → `{ headerTop: CrossTableHeader[]; headerLeft: CrossTableHeader[]; data: (CrossTableCell|null)[][] }`
 
 ---
 
 ## Provider & Actions
 
 Use `DataCrossTableProvider` to manage edit state across the table and expose a buttons group.
 
 - `DataCrossTableProvider` props:
   - `onConfirmedCells?(data: { editedCells: ConfirmedCell[]; toDefaultCells: ConfirmedCell[] })`
   - Labels: `editConfirmLabel`, `editCancelLabel`, `editRestoreDefaultLabel`
   - Flags: `initialEditMode` (default `false`), `showDefaultActionButton` (default `false`)
   - Editable input labels: `cellEditTitleLabel`, `cellEditModifiedLabel`, `cellConfirmButtonLabel`, `cellCancelButtonLabel`, `cellResetButtonLabel`
 - `DataCrossTableButtonsGroup`: shows Confirm/Cancel/Restore actions when `editMode=true`.
 
 ---
 
 ## Examples
 
 ### Default with Provider
 
 ```tsx
 import { DataCrossTable, DataCrossTableProvider, DataCrossTableButtonsGroup } from "laif-ds";
 
 export function CrossEditable({ data }: { data: CrossTableData }) {
   return (
     <DataCrossTableProvider initialEditMode onConfirmedCells={(cells) => console.log(cells)}>
       {({ editMode }) => (
         <div className="space-y-3">
           <DataCrossTableButtonsGroup />
           <DataCrossTable crossTableData={data} editable editMode={editMode} minWidthCell={200} />
         </div>
       )}
     </DataCrossTableProvider>
   );
 }
 ```
 
 ### Filterable
 
 ```tsx
 <DataCrossTableProvider>
   <DataCrossTable crossTableData={data} filterable minWidthCell={200} cornerHeaderFrom="From" cornerHeaderTo="To" />
 </DataCrossTableProvider>
 ```
 
 ### Loading State
 
 ```tsx
 <DataCrossTableProvider>
   <DataCrossTable loading crossTableData={{ headerTop: [], headerLeft: [], data: [] }} />
 </DataCrossTableProvider>
 ```
 
 ---
 
 ## Notes
 
 - **Virtualization**: Rows are virtualized for performance on large datasets.
 - **Sticky**: Top header row and first column are sticky; corner cell has higher z-index.
 - **Editing**: Editable cells open a popover editor; edited/reset markers are shown per cell.