Sales Report

{/* Scoped Sheet for Settings - Renders inside this relative container */} } > Columns } > Format } > Filters

Custom filter configuration would go here.

Note: The settings panel opens *inside* the table container, respecting its boundaries.

); }; ``` Note: This component (`DataTable`) internally uses `ag-grid-react` as a customized version. Rely on it rather than naked AG Grid. --- ## 6. Built-in Clipboard Handlers for JSON Objects **All DataTable and AG Grid instances in Impact Nova automatically support copying and pasting JSON objects.** The `AgGridWrapper` component includes built-in clipboard handlers that: - **When copying**: Automatically stringify object values to JSON format - **When pasting**: Automatically parse JSON strings back to objects ### How it works ```tsx // When you copy a cell with an object value like: { wp: { value: 6479, _isDisabled: true, cellMetadata: {...} }, iaf: { value: 6090, _isDisabled: true, cellMetadata: {...} } } // It's automatically converted and split into separate Excel columns: // Column 1 Column 2 // WP: 6479 IAF: 6090 // Technical metadata (_isDisabled, cellMetadata) is hidden for clarity // Only the meaningful "value" is shown - perfect for PMs and non-technical users // Tab-separated format automatically expands into multiple columns in Excel ``` **Example with simple properties:** ```tsx // Copy this object: { name: "John", age: 30, status: "active" } // Expands into 3 Excel columns: // Column 1 Column 2 Column 3 // name: John age: 30 status: active ``` **When pasting:** ```tsx // You can paste JSON strings and they'll be parsed back to objects: '{"name":"Jane","age":25}' → { name: "Jane", age: 25 } ``` **Benefits:** - ✅ Simple and readable for non-technical users (PMs, stakeholders) - ✅ Extracts only meaningful values, hides technical metadata - ✅ Automatically expands object properties into separate Excel columns - ✅ Perfect for analysis - each property gets its own column - ✅ Works seamlessly for both single-cell and multi-cell copy operations - ✅ Still supports pasting JSON back for developers ### Usage **No configuration needed!** This works automatically for all DataTable instances: ```tsx ``` ### Override if needed You can override the default behavior by passing your own handlers: ```tsx { // Custom copy logic return customFormat(params.value); }} processCellFromClipboard={(params) => { // Custom paste logic return customParse(params.value); }} /> ``` **Key benefits:** - ✅ Works automatically for all tables - ✅ No code duplication needed - ✅ Handles complex object structures - ✅ Gracefully falls back to string if JSON parsing fails - ✅ Can be overridden when custom behavior is needed --- ## 6. Column autosize on container resize **AgGridWrapper** (from `impact-nova/ag-grid-react`) automatically re-runs `autoSizeStrategy` when the grid container width changes (accordion expand, viewport resize, responsive layout). - Pass `autoSizeStrategy` to DataTable/AgGridWrapper props (e.g. `{ type: 'fitCellContents', scaleUpToFitGridWidth: true }`). - **Do not** add app-level ResizeObserver hacks or deferred grid mount delays — the framework handles this. - When applying saved column views, wait for `firstDataRendered` or `newColumnsLoaded` grid events before applying column state — not `setTimeout(0)`. - Strip `width`/`flex` from saved column state when applying structural views so autosize can recalculate correctly. --- ## 6b. Truncated text in custom cell renderers **Do not** use `OverflowTooltip` inside AG Grid cells. Use the grid-native tooltip API via **`useAgGridTruncationTooltip`** from `impact-nova/ag-grid-react`: ```tsx import { useAgGridTruncationTooltip } from 'impact-nova/ag-grid-react'; const MyCellRenderer = (params: ICellRendererParams) => { const textRef = useRef(null); const displayValue = String(params.value ?? ''); useAgGridTruncationTooltip( params.setTooltip, displayValue, textRef, 'ellipsis', 'cell', ); return ( {displayValue} ); }; ``` - Pass AG Grid's `setTooltip` callback (from `ICellRendererParams` / header APIs). - Apply `truncate` (or `line-clamp`) on the measured element. - `location` is `'cell' | 'leaf' | 'group'` — affects tooltip show mode wiring. - For general (non-grid) truncated labels, use `OverflowTooltip` from `impact-nova/tooltip` instead. --- ## 7. AG Grid v36 version pin (mandatory) Impact Nova **2.2.0+** targets **AG Grid v36**. Consumer apps must install all three packages at the **exact same version**: ```bash npm install ag-grid-community@36.0.1 ag-grid-react@36.0.1 ag-grid-enterprise@36.0.1 ``` **Rules:** - Pin `36.0.1` in `package.json` — do not float `^36` across community/react/enterprise. - Vite/webpack: `resolve.dedupe: ['ag-grid-community', 'ag-grid-enterprise', 'ag-grid-react']` (see `create-impact-nova` template). - **Do not** import legacy AG Grid CSS theme files (`ag-grid.css`, `ag-theme-*`). Impact Nova `AgGridWrapper` applies the v36 Quartz theme (`themeQuartz.withPart(iconSetMaterial)`) via the `theme` prop. - Column settings (`DataTableColumnList`) sync pin/sort/filter from the live `GridApi` — do not mirror column state in app-level React state. **Column settings sheet pattern (scroll-safe — use compound layout components):** ```tsx {savedViews} Columns Format ``` Do **not** use raw `Tabs` + manual `overflow-y-auto` in sheet bodies — see `impact-nova://data-table-sheet-layout`. Storybook reference: `Data Display/DataTable/Sheet layout` (`CanonicalComposition`) and `Column settings scenarios` (`PinSortSearchAndReset`). ---