# 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.