@opencorestack/opengridx 3.0.0 → 3.1.0

package/docs/API_REFERENCE.md

@@ -27,7 +27,7 @@ The main component for displaying and interacting with data.
 | `onPaginationModelChange` | `(model: GridPaginationModel) => void` | — | Fired when page or page size changes. |
 | `pageSizeOptions` | `number[]` | `[10, 25, 50, 100]` | Available page size options. The uncontrolled default page size is 100 when offered, else the first option. |
 | `rowCount` | `number` | — | Server total for `paginationMode="server"` when you fetch pages yourself (read on every render). With a `dataSource`, the response's `rowCount` is used and this is only the fallback before the first response. |
-| `height` | `number \| string` | `undefined` | Total height of the grid container. |
+| `height` | `number \| string` | `undefined` | Total height of the grid. Without it the grid fills its container (`height: 100%`, or `flex: 1 1 auto; min-height: 0` as a flex item; v3.0.1+), and grows to fit every row in an auto-height container. |
 | `density` | `'compact' \| 'standard' \| 'comfortable'` | `'standard'` | Visual row density: compact = the theme's `grid.rowHeightCompact` or 32 px, standard = `rowHeight`, comfortable = the theme's `grid.rowHeightComfortable` or 72 px. |
 | `initialState` | `GridInitialState` | `undefined` | Starting state (sort, filter, pagination, columns, density), read on mount. Seeds the grid's uncontrolled state; see [State Persistence](features/state-persistence.md). |
 | `slots` | `GridSlots` | — | Custom component overrides: `toolbar`, `pagination`, `noRowsOverlay`, `loadingOverlay`, `footer`. See [`GridSlots`](#gridslots-and-gridslotprops) and the [Slots API](customization/slots-api.md). |
@@ -156,7 +156,7 @@ The main component for displaying and interacting with data.
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
-| `apiRef` | `React.MutableRefObject<GridApi>` | — | Reactive ref to the imperative API. Create with `useGridApiRef()`. |
+| `apiRef` | `React.MutableRefObject<GridApi<R>> \| React.MutableRefObject<GridApi>` | — | Reactive ref to the imperative API. Create with `useGridApiRef()`, or `useGridApiRef<Row>()` for typed row getters (v3.0.1+). |
 
 #### List View
 
@@ -197,7 +197,7 @@ const columns: GridColDef<Employee>[] = [
 - A `GridColDef<Row>` for a type-alias row (or an interface that extends `GridRowModel`) can be used where a `GridColDef` is expected: the row callbacks are declared as methods, so they are checked bivariantly.
 - `params.value` stays `unknown`; read typed values from `params.row`, or render `params.formattedValue`.
 - The export functions, `usePivot` and `useAggregation` accept the same typed or untyped columns, and their options' `getRowId` takes your row type.
-- `apiRef` methods (`getRow`, `getAllRows` …) return `GridRowModel`: the API object is not generic.
+- `apiRef` row getters (`getRow`, `getAllRows`, `getVisibleRows`, `getAllFilteredRows`) return your row type when the ref is created with `useGridApiRef<Row>()` (v3.0.1+); a plain `useGridApiRef()` returns `GridRowModel`.
 - For the component's props type, use `DataGridProps<R>`. `React.ComponentProps<typeof DataGrid>` resolves to the untyped-columns overload.
 
 ### `GridSlots` and `GridSlotProps`
@@ -279,9 +279,9 @@ Access these methods via the `apiRef` prop.
 
 | Method | Return | Description |
 | :--- | :--- | :--- |
-| `getRow(id)` | `GridRowModel \| null` | Get row data by ID (your row object, unchanged). |
-| `getAllRows()` | `GridRowModel[]` | Get all loaded rows. |
-| `getVisibleRows()` | `GridRowModel[]` | Get the rows on screen after filtering/sorting: pinned-top rows, the current page (or all rows without pagination), pinned-bottom rows. Under row grouping and tree data this is the visible hierarchy, group rows included. |
+| `getRow(id)` | `R \| null` | Get row data by ID (your row object, unchanged). `R` is the type passed to `useGridApiRef<R>()`, `GridRowModel` by default. |
+| `getAllRows()` | `R[]` | Get all loaded rows. |
+| `getVisibleRows()` | `R[]` | Get the rows on screen after filtering/sorting: pinned-top rows, the current page (or all rows without pagination), pinned-bottom rows. Under row grouping and tree data this is the visible hierarchy, group rows included. |
 | `getColumn(field)` | `GridColDef \| null` | Get column definition by field. |
 | `getVisibleColumns()` | `GridColDef[]` | Get the columns on screen, in render order (hidden columns excluded): left-pinned, unpinned, right-pinned, as the header shows them (v3.0+; before, pinned columns kept their unpinned position). |
 | `selectRow(id, isSelected = true)` | `void` | Set selection for a single row. Fires `onRowSelectionModelChange`, unless nothing changes (selecting a selected row, deselecting an unselected one; v3.0+). Ids of rows the grid made (group headers, subtotals, auto-created tree parents, the pivot Grand Total) are ignored, as they are for the checkbox, click and keyboard (v3.0+). |
@@ -294,10 +294,12 @@ Access these methods via the `apiRef` prop.
 | `setPage(page)` | `void` | Change current page (0-indexed). Fires `onPaginationModelChange`. |
 | `setPageSize(pageSize)` | `void` | Change the page size and go to page 0. Fires `onPaginationModelChange`. |
 | `scrollToIndexes(params)` | `void` | Scroll to specific row/column index. Uses the current layout, also when called from a layout effect right after an update (v3.0+). |
+| `autosizeColumn(field)` | `void` | Fit a column to its header and the cells in the current render window, clamped to `minWidth` (default 50px) / `maxWidth`; same as double-clicking its resize handle. No-op for `resizable: false` or a column that is not rendered. A flex column gets a fixed width (v3.1.0+). |
+| `autosizeColumns(fields?)` | `void` | `autosizeColumn` for several columns; every column when `fields` is omitted (v3.1.0+). |
 | `getAllColumns()` | `GridColDef[]` | Get all defined columns. |
 | `getAggregationResult()` | `Record<string, unknown> \| null` | Get current aggregation results (`null` without an `aggregationModel`, and in pivot mode). Live in a parent's `useLayoutEffect` on mount and current after every update (v3.0+; before, it was installed in a passive effect). The same holds for `getAggregationModel()` and `getGroupedExportRows()`. |
 | `getAggregationModel()` | `GridAggregationModel \| null` | Get the active aggregation configuration. |
-| `getAllFilteredRows()` | `GridRowModel[]` | Get every row that passes the filter, sorted, regardless of pagination, including pinned rows. Under row grouping and tree data it returns the data rows (no group rows) in hierarchy order with every group expanded, ordered like the screen (also when sorting by the hierarchy column; v3.0+). With tree data and a filter, ancestors shown only to give a match its context are left out: the result is the set select-all and the aggregation footer act on (v3.0+). Use for full-dataset exports. |
+| `getAllFilteredRows()` | `R[]` | Get every row that passes the filter, sorted, regardless of pagination, including pinned rows. Under row grouping and tree data it returns the data rows (no group rows) in hierarchy order with every group expanded, ordered like the screen (also when sorting by the hierarchy column; v3.0+). With tree data and a filter, ancestors shown only to give a match its context are left out: the result is the set select-all and the aggregation footer act on (v3.0+). Use for full-dataset exports. |
 | `getGroupedExportRows()` | `GridGroupedExportRow[] \| null` | Get a flat ordered list reflecting the active row-grouping tree (group-header, leaf, subtotal, grand-total), sorted and filtered like the screen. Collapsed groups are included with their rows, and subtotals are computed over each group's exported rows. Group-header and subtotal entries carry `groupLabel`, the label the grid shows (v3.0+). Returns `null` when row grouping is not active. |
 | `copySelectedRows()` | `Promise<void>` | Copy every selected row that passes the filter (other pages, collapsed groups and pinned rows included) as TSV, with the visible columns in screen order. Resolves without writing when no selected row is found; rejects when the clipboard write fails. |
 
@@ -391,8 +393,9 @@ Span values are floored; `Infinity` means "to the end"; `NaN`, `0` and negative
 | Property | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
 | `sortable` | `boolean` | `true` | Enable/disable sorting for this column. |
+| `sortComparator` | `(v1, v2, params1, params2) => number` | — | Custom ascending comparator for client-side sorting (v3.1.0+). `v1`/`v2` are `valueGetter` values **including `null`/`undefined`**; `params` are `GridSortCellParams` `{ id, field, row, value }`. Negated for `desc`, chained in multi-sort, used for group ordering under row grouping, tree-data siblings and pivot row labels. Throw / `NaN` reads as 0 (dev warning once). Ignored with `sortingMode="server"`. |
 | `filterable` | `boolean` | `true` | Enable/disable filtering for this column. `false` also removes it from the quick-filter search. |
-| `resizable` | `boolean` | `true` | Allow the user to drag-resize this column. |
+| `resizable` | `boolean` | `true` | Allow the user to drag-resize this column; double-click the handle (or Enter on it) to auto-size to content (v3.1.0+). |
 | `hideable` | `boolean` | `true` | Allow the user to hide this column from the UI. `false` removes it from the Columns panel (unless `showNonHideableColumns`) and removes **Hide Column** from its column menu. |
 | `pinnable` | `boolean` | `true` | Allow this column to be pinned via the UI. `false` removes the pin actions from its column menu. Does not affect drag-reordering (v3.0+). |
 | `disableColumnMenu` | `boolean` | `false` | Hide the column header kebab/context menu. |
@@ -476,6 +479,10 @@ const apiRef = useGridApiRef();
 // Then call methods imperiously
 apiRef.current.scrollToIndexes({ rowIndex: 0 });
 apiRef.current.setFilterModel({ items: [] });
+
+// Typed row getters (v3.0.1+)
+const invoiceApi = useGridApiRef<Invoice>();
+const invoice = invoiceApi.current.getRow(42); // Invoice | null
 ```
 
 See the [Imperative API (`GridApi`)](#%EF%B8%8F-imperative-api-gridapi) table above for the full method list.

package/docs/architecture/datagrid-orchestration.md

@@ -56,6 +56,7 @@ in an effect, so **keep the call order when you move or add a hook**. In particu
 | 29 | `useGridSpanning` | `hooks/features/useGridSpanning.ts` | Row/column spans |
 | 30 | `useGridClipboardApi` | `hooks/core/useGridClipboardApi.ts` | Ctrl/Cmd+C and `copySelectedRows` |
 | 31 | `useGridScrollToIndexesApi` | `hooks/core/useGridScrollToIndexesApi.ts` | `scrollToIndexes` |
+| 31a | `useGridColumnAutosize` | `hooks/core/useGridColumnAutosize.ts` | `autosizeColumn` / `autosizeColumns` on the API, and the resize handle's auto-size handler (v3.1) |
 | 32 | `useGridViewport` | `hooks/core/useGridViewport.ts` | Scroll sync, viewport measurement, viewport callback ref |
 | 33 | `useGridVirtualization` | `hooks/core/useGridVirtualization.ts` | Render window |
 | 34 | `useGridSortHandlers` | `hooks/core/useGridHeaderHandlers.ts` | Header sort / shift-sort |

package/docs/components/column-resize.md

@@ -3,12 +3,13 @@
 OpenGridX supports dynamic column resizing, allowing users to adjust the width of any column on the fly for better visibility of data. This is facilitated by the `ColumnResizeHandle`, an internal component (not exported) that `<Header />` renders invisibly on the edge of each resizable column header.
 
 ## 📑 Overview
-- **Where the handle is**: on the right edge of each resizable column header. Right-pinned columns are anchored to the right edge of the grid and grow leftwards, so their handle is on their **left** edge, and the edge you grab follows the pointer.
+- **Where the handle is**: on the right edge of each resizable column header. Right-pinned columns are anchored to the right edge of the grid and grow leftwards, so their handle is on their **left** edge, and the edge you grab follows the pointer. The handle is an 8px strip just inside the column, against that edge, and all of it can be grabbed (v3.0.1+; before, the neighbouring header cell clipped half of it).
 - **Mouse, touch and pen**: the handle uses pointer events with pointer capture, so a resize keeps following the pointer outside the header and works on tablets and phones.
 - **Keyboard**: with a column header focused, **Alt+ArrowRight** / **Alt+ArrowLeft** widen / narrow the column by 10px (hold **Shift** for 50px). The handle is a `role="separator"` that reports the width in `aria-valuenow` (and `aria-valuemin` / `aria-valuemax`).
 - **Constraints**: `minWidth` and `maxWidth` from your `GridColDef` apply. Without `minWidth` a column can be narrowed to 50px; a column that is already narrower (a 30px icon column) is never snapped up to 50px. Without `maxWidth` there is no upper limit.
 - **Clicks are not resizes**: pressing and releasing the handle without moving it changes nothing (a flex column stays flex), and ending a resize with the pointer over the header never sorts the column.
-- **Double-click** does nothing (it is swallowed, so it does not sort). There is no auto-size to content.
+- **Double-click to auto-size** (v3.1.0+): double-clicking the handle fits the column to its content — the header (title, sort icon, menu button) and the cells rendered right now, i.e. the rows and pinned rows in the current virtualization window, not the whole data set. The width is clamped to `minWidth` (default 50px) and `maxWidth`; a flex column gets a fixed width, like after a manual drag. The double-click never sorts. With the handle focused, **Enter** does the same. Columns with `resizable: false` have no handle and are never auto-sized.
+- **Programmatic auto-size**: `apiRef.current.autosizeColumn(field)` and `apiRef.current.autosizeColumns(fields?)` (every column when `fields` is omitted) use the same measurement. The new width lands in `columnWidths` state like a drag, so `onStateChange` reports it; there is no dedicated resize callback.
 
 ---
 
@@ -34,6 +35,17 @@ const columns: GridColDef[] = [
 ];
 ```
 
+### Auto-size to content
+
+```tsx
+const apiRef = useGridApiRef();
+
+<DataGrid apiRef={apiRef} rows={rows} columns={columns} />
+<button onClick={() => apiRef.current.autosizeColumns()}>Fit all columns</button>
+```
+
+Measurement reads the DOM (each cell's `.ogx__cell-content` laid out at `max-content`, plus the cell's padding and borders), so only rendered rows count: scroll first, or turn off virtualization for a small grid, if off-screen rows are wider. Cells that span several columns (`colSpan`) are skipped.
+
 ---
 
 ## ⚙️ How it Works

package/docs/components/datagrid.md

@@ -25,7 +25,7 @@ function MyGrid() {
 | `rows` | `R[]` | — | **Required.** The dataset to display (`[]` when a `dataSource` supplies the rows). |
 | `columns` | `GridColDef<R>[]` | — | **Required.** Column definitions. |
 | `getRowId` | `(row: R) => GridRowId` | `row.id` | Unique ID for each row. Only keys the grid's store; row objects are never copied or given an `id` (v3.0+). Duplicate ids keep the first row and log a development warning. |
-| `height` | `number \| string` | `undefined` | Height of the grid container. |
+| `height` | `number \| string` | `undefined` | Height of the grid. Without it the grid fills its container (v3.0.1+); the container needs a bounded height for virtualization. See [Virtualization](../features/virtualization.md#the-grid-needs-a-bounded-height). |
 | `loading` | `boolean` | `false` | Displays a loading skeleton/shimmer. |
 | `density` | `'compact' \| 'standard' \| 'comfortable'` | `'standard'` | Row height preset: compact = 32 px, standard = `rowHeight`, comfortable = 72 px. Inside a `DataGridThemeProvider`, the theme's `grid.rowHeightCompact` / `rowHeightStandard` / `rowHeightComfortable` replace these defaults (an explicit `rowHeight` still wins for standard). |
 | `checkboxSelection` | `boolean` | `false` | Enable row checkboxes. |

package/docs/customization/theming.md

@@ -46,7 +46,7 @@ How the provider builds the variables (v3.0+):
 - **Toolbar tokens follow the grid surface.** Unless you set `toolbar.*`, the toolbar uses the header background, header text and grid border colours.
 - **Row and header heights reach the layout.** `grid.rowHeightStandard` / `grid.headerHeight` (and `rowHeightCompact` / `rowHeightComfortable` with `density`) are read by the grid itself, which virtualizes from them. They must be pixel values (`'36px'` or `'36'`); other units are ignored. The `rowHeight` / `headerHeight` props win over the theme.
 
-> **Sizing:** the wrapper `div` (`.ogx-theme-provider`) is a normal auto-height block. If the grid uses `height="100%"`, pass `style={{ height: '100%' }}` (or a `className` that sets a height) to the provider too. Otherwise the wrapper grows to fit every row and row virtualization is effectively off. See [Virtualization → The grid needs a bounded height](../features/virtualization.md#the-grid-needs-a-bounded-height).
+> **Sizing:** the wrapper `div` (`.ogx-theme-provider`) is a normal auto-height block. A grid without a `height` prop (or with `height="100%"`) fills its parent, which here is the wrapper, so inside a bounded container pass `style={{ height: '100%' }}` (or a `className` that sets a height) to the provider too. Otherwise the wrapper grows to fit every row and row virtualization is effectively off. See [Virtualization → The grid needs a bounded height](../features/virtualization.md#the-grid-needs-a-bounded-height).
 
 ---
 

package/docs/features/list-view.md

@@ -78,7 +78,7 @@ List view pages exactly like the grid view: with `pagination`, one page of the (
 
 `onRowsScrollEnd` fires when the list is scrolled to within 100px of its bottom, so the [infinite scroll](./infinite-scroll.md) pattern works in list view too. As in the grid view, it fires once per arrival: it fires again only after the list leaves that zone or the row count changes (for example, when the next page has loaded).
 
-The list view is **not virtualized**: it renders every row it shows (one page with `pagination`, otherwise all rows). Use pagination for large datasets. `slots.footer` is rendered below the list (in place of its pagination controls); the aggregation footer row is not shown in list view.
+The list view is **not virtualized**: it renders every row it shows (one page with `pagination`, otherwise all rows). Use pagination for large datasets: rendering tens of thousands of cards freezes the page, and in development the grid warns when the list view renders more than 2,000 items (v3.0.1+). `slots.footer` is rendered below the list (in place of its pagination controls); the aggregation footer row is not shown in list view.
 
 ## ♿ Accessibility
 

package/docs/features/pdf-export.md

@@ -10,6 +10,14 @@ Generate a styled PDF report from grid data using `exportToPdf()`.
 npm install jspdf jspdf-autotable
 ```
 
+> **Currency symbols such as `₹` print as `?` by default.** The built-in Helvetica font only covers Latin-1. Pass the [`font` option](#non-latin-text-and-unicode-fonts) with a Unicode `.ttf`:
+>
+> ```ts
+> await exportToPdf(rows, columns, { fileName: 'invoices', font: { name: 'NotoSans', data: notoSansBase64 } });
+> ```
+
+> **Large datasets:** PDF generation runs on the main thread, and time and file size grow with every row: 50,000 grouped rows took 10–16 s (the page is unresponsive meanwhile) and produced a file of about 120 MB. For more than a few thousand rows, export CSV (`exportToCsv`) or `.xlsx` (`exportToExcelAdvanced`) instead, or export a filtered subset.
+
 ## Basic Usage
 
 ```tsx
@@ -134,6 +142,14 @@ System columns (`__check__`, `__actions__`) and spacer columns (`isSpacer: true`
 
 ## Troubleshooting
 
+**`₹` or other characters print as `?`**
+
+Pass the `font` option with a Unicode TrueType font. See [Non-Latin text](#non-latin-text-and-unicode-fonts).
+
+**Export is slow or the file is huge**
+
+PDF is not suited to tens of thousands of rows (see Installation above). Use CSV or `.xlsx` for large exports.
+
 **Error: "exportToPdf requires 'jspdf' and 'jspdf-autotable'"**
 
 Run: `npm install jspdf jspdf-autotable`

package/docs/features/pinning.md

@@ -20,6 +20,7 @@ Columns can be pinned to the left or right edges of the grid. Pinned columns rem
 
 ### Order and widths
 - Pinned columns render in the order of `pinnedColumns.left` / `pinnedColumns.right`, not in column order. Pinning from the column menu appends the column to the end of its side, so it lands next to the scrolling columns.
+- When the columns are narrower than the grid, right-pinned columns sit at the grid's right edge, and the free space is between the scrolling columns and them (v3.0.1+).
 - A pinned column is sized exactly as it would be unpinned: numbers, percentages, `flex` and `'auto'` all apply, clamped to `minWidth` / `maxWidth`. The sticky offsets use those widths, so pinned columns never overlap.
 
 ### Column Configuration

package/docs/features/sorting-pagination.md

@@ -48,6 +48,32 @@ Each active sort column shows a numbered priority badge (`1`, `2`, `3`…) next
 - A column that mixes kinds of value (numbers and strings, say) is ordered by kind first — numbers, dates, booleans, strings — so the order does not depend on the input order.
 - Ties keep the rows' original order.
 
+### Custom comparator: `sortComparator` (v3.1.0+)
+
+Give a column `sortComparator(v1, v2, params1, params2)` to replace the built-in comparison for that column. Return a negative number when `v1` sorts before `v2` **in ascending order**, a positive number when after, `0` when equal.
+
+```tsx
+const SIZE_ORDER: Record<string, number> = { S: 0, M: 1, L: 2, XL: 3 };
+
+const columns: GridColDef<Product>[] = [
+  {
+    field: 'size',
+    sortComparator: (a, b) => (SIZE_ORDER[String(a)] ?? 99) - (SIZE_ORDER[String(b)] ?? 99),
+  },
+];
+```
+
+- `v1` / `v2` are the cell values **after `valueGetter`** (the same values the built-in sort reads). `params1` / `params2` are `{ id, field, row, value }` (`GridSortCellParams`), for tie-breaking on other fields of the row.
+- **The comparator sees every value, including `null` and `undefined`**, so you decide where empty values go. The built-in "empty values last in asc" rule does not apply to a column with a comparator. (Why: a custom order often has its own idea of "empty" — `'N/A'`, `0`, a sentinel — and hiding nulls from the comparator would make those impossible to place consistently with real nulls.)
+- **Direction**: write the ascending order only. For `desc` the grid negates the result, so values the comparator puts last in asc (nulls, typically) come first in desc — the same as the built-in behaviour.
+- **Multi-sort**: the comparator is one key in the chain; when it returns `0` the next sort key decides, then the original row order.
+- **Row grouping**: sorting by the grouping column (or by the grouping/label column) orders the groups by their grouping value using the grouping column's comparator; for a group row, `params.row` is the synthetic group row. Leaf rows inside a group use the sorted column's comparator.
+- **Tree data**: siblings are sorted with the comparator at every level. Auto-created parents (no row of their own) are compared by label with the built-in comparison.
+- **Pivot**: sorting a pivot row-label column uses that source column's comparator on the label values.
+- Everything that reuses the pipeline order uses it too: `apiRef.getAllFilteredRows()`, exports, clipboard.
+- A comparator that throws, or returns `NaN`, reads as `0` (equal) with a one-time dev warning per column; the grid does not crash.
+- **Ignored with `sortingMode="server"`**: the server sorts, the grid shows `rows` as given.
+
 ```tsx
 // Controlled multi-sort — set programmatically or drive from UI with multiSort:
 const [sortModel, setSortModel] = useState<GridSortItem[]>([

package/docs/features/virtualization.md

@@ -53,37 +53,39 @@ Without the stylesheet the viewport does not scroll, so the grid renders every r
 
 Virtualization renders as many rows as fit in the grid's viewport. If the grid's container has no bounded height, the viewport grows to fit **every** row, so every row is rendered. Nothing errors; the grid just stops virtualizing.
 
-The most common cause is a flex child that is missing `min-height: 0`. A flex item defaults to `min-height: auto`, which lets it grow to its content:
+**Without a `height` prop the grid fills its container** (since 3.0.1): its root gets `height: 100%` and, as a flex item, `flex: 1 1 auto; min-height: 0`. So it fills a sized block parent, or the free space of a flex column, and virtualizes. In a container with no definite height, `100%` resolves to `auto` and the grid grows to fit its rows, exactly as before. Passing `height` (a number or any CSS length) sets the height instead; `autoHeight` always grows to fit every row.
+
+The most common cause of an unbounded container is a flex child that is missing `min-height: 0`. A flex item defaults to `min-height: auto`, which lets it grow to its content:
 
 ```tsx
-// ❌ Grows to fit all rows — virtualization is effectively off
+// ❌ The wrapper grows to fit all rows — virtualization is effectively off
 <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
   <div style={{ flex: 1 }}>
-    <DataGrid rows={rows} columns={columns} height="100%" />
+    <DataGrid rows={rows} columns={columns} />
   </div>
 </div>
 
 // ✅ Bounded — only visible rows render
 <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
   <div style={{ flex: 1, minHeight: 0 }}>
-    <DataGrid rows={rows} columns={columns} height="100%" />
+    <DataGrid rows={rows} columns={columns} />
   </div>
 </div>
 ```
 
-`height="100%"` only helps if every ancestor up to a fixed-height element also has a definite height.
+Every flex (or grid) item between the grid and the element with a fixed height (`100vh`, `600px`, …) needs `min-height: 0`. The grid itself can also be the flex item: `<div style={{ display: 'flex', flexDirection: 'column', height: 600 }}><Toolbar /><DataGrid … /></div>` gives the grid the space left after the toolbar.
 
-**`DataGridThemeProvider` counts as an ancestor.** It renders a plain `<div class="ogx-theme-provider">` around the grid, and that wrapper is auto-height like any other `div`. When you use `height="100%"` inside it, give the wrapper a height as well:
+**`DataGridThemeProvider` counts as an ancestor.** It renders a plain `<div class="ogx-theme-provider">` around the grid, and that wrapper is auto-height like any other `div`. Inside a bounded container, give the wrapper a height as well:
 
 ```tsx
 <div style={{ flex: 1, minHeight: 0 }}>
   <DataGridThemeProvider theme={theme} style={{ height: '100%' }}>
-    <DataGrid rows={rows} columns={columns} height="100%" />
+    <DataGrid rows={rows} columns={columns} />
   </DataGridThemeProvider>
 </div>
 ```
 
-In development builds the grid logs a `console.warn` when it detects that it is rendering every row of a dataset larger than 200 rows because its viewport is unbounded.
+In development builds the grid logs a `console.warn` when it is rendering every row of a dataset larger than 200 rows and its viewport is at least as tall as those rows, that is, when its container really is unbounded. The warning names the fixes above.
 
 Pagination can hide this problem, because a paginated grid only has one page of rows to render. Row grouping switches pagination off (see below), so an unbounded container that looked fine with pagination can freeze the tab once grouping is enabled.
 
@@ -205,7 +207,7 @@ When using detail panels, row heights become variable. The grid automatically:
 
 ## Virtualization with Grouping/Tree Data
 
-Grouped and tree rows go through the same virtualizer as flat rows. Expanding a group of any size adds its rows to the virtual row list, not to the DOM: in a bounded container, expanding a 25,000-row group renders ~20 DOM rows (verified in Chromium by `DataGrid.virtualization.browser.test.tsx`).
+Grouped and tree rows go through the same virtualizer as flat rows. Expanding a group of any size adds its rows to the virtual row list, not to the DOM: in a bounded container, expanding a 25,000-row group renders ~20 DOM rows (verified in Chromium, Firefox and WebKit by `DataGrid.virtualization.browser.test.tsx`).
 
 ```tsx
 // Tree data with virtualization

package/docs/migration/v2-to-v3.md

@@ -53,6 +53,8 @@ import '@opencorestack/opengridx/styles';
 
 Without it the grid is unstyled and its viewport has no bounded height, so **every row renders** (virtualization is effectively off). If your v2 app looked fine, you already have this import. In development, 3.0.0 logs a warning when the stylesheet is not loaded.
 
+> **3.0.1 note — height.** Without a `height` prop the grid now fills its container (root class `ogx--fill`: `height: 100%`, and as a flex item `flex: 1 1 auto; min-height: 0`). In 3.0.0 the root was auto-height, so inside a bounded flex layout it grew to fit every row. The container still needs a bounded height (a definite height, or `min-height: 0` on every flex / grid ancestor up to the sized one); in an auto-height container the grid still grows to fit. An explicit `height`, `style.height` or `autoHeight` is never stretched. The unbounded-container dev warning is only logged when the viewport really is as tall as its rows.
+
 ### Know the size limit
 
 A single scrolling grid tops out at about 645,000 rows at the default 52px row height in Chromium (the browser's maximum element height). Above that, use pagination or a `dataSource`. The grid logs a dev warning when content is taller than browsers can scroll.
@@ -282,7 +284,7 @@ Multi-sort:
 
 **Who is affected:** apps with snapshot tests of sorted output, or server code that expects the old client order.
 
-**Fix it:** update the snapshots. There is no per-column comparator; to sort by a different key, return that key from a `valueGetter` and format it for display with `valueFormatter` (or sort on the server with `sortingMode="server"`):
+**Fix it:** update the snapshots. Since **v3.1.0** a column can take a custom `sortComparator(v1, v2, params1, params2)` (see `docs/features/sorting-pagination.md`), which is the simplest way to get a custom order. On 3.0.x there is no per-column comparator; to sort by a different key, return that key from a `valueGetter` and format it for display with `valueFormatter` (or sort on the server with `sortingMode="server"`):
 
 ```tsx
 import type { GridColDef, GridRowModel } from '@opencorestack/opengridx';
@@ -427,6 +429,8 @@ Pruning applies when the grid owns the rows: no `dataSource`, client pagination
 
 **Fix it:** call the setter and let your change callback update controlled state; remove duplicate `setState` calls.
 
+> **3.0.1 note — typed row getters.** `useGridApiRef<MyRow>()` returns a `GridApi<MyRow>` whose `getRow`, `getAllRows`, `getVisibleRows` and `getAllFilteredRows` return `MyRow`, so the casts v2 needed can go. `useGridApiRef()` without a type argument and `DataGridProps.apiRef` with an untyped ref still compile.
+
 ---
 
 ## 11. Editing
@@ -714,6 +718,8 @@ Keep `getRows` stable (`useCallback` or module scope) if you do not want a refet
 | Sticky header and pinned rows | `.ogx__pinned-rows--top` / `--bottom` were sticky | wrapped in `div.ogx__sticky-top` / `div.ogx__sticky-bottom` (see [§24](#24-dom-and-css-class-changes)) |
 | z-index of sticky body system cells | 4 / 5 / 11 | 12; header drag / expand cells have no inline z-index |
 | Returning from list view | scroll reset | scroll position restored |
+| Right-pinned columns when columns are narrower than the grid | followed the last unpinned column | at the grid's right edge (3.0.1; free space sits before the right-pinned section) |
+| No `height` prop | auto height (3.0.0) | fills the container, `ogx--fill` (3.0.1; see [Before you start](#import-the-stylesheet)) |
 
 **Who is affected:** apps with `onRowsScrollEnd` loaders that relied on repeated firing, apps with custom z-index or sticky CSS, and apps whose pinned columns were pinned out of column order.
 
@@ -751,6 +757,7 @@ export function Pinned({ rows, columns }: { rows: GridRowModel[]; columns: GridC
 | Click on the resize handle without moving | resized / sorted | nothing |
 | Resize events | mouse events on `document` | pointer events with capture on the handle (touch and pen work) |
 | Right-pinned column resize | right edge | left edge (`ogx-column-resize-handle--start`); drag left to widen |
+| Resize handle position | straddled the cell border (`right: -4px`); half was clipped, 3–4px grabbable | inside its own header cell against the resizing edge (`right: 0` / `left: 0`), all 8px grabbable (3.0.1) |
 | `dragstart` data types | `text/plain` | `application/x-ogx-row` / `application/x-ogx-column` plus `text/plain` |
 | Toolbar, pivot and standalone panels | portal mounted in render | mounted one layout effect later (invisible to users; matters for tests) |
 
@@ -967,6 +974,8 @@ CSS: `.ogx-col-group-row` no longer has `overflow: hidden`; new `ogx-col-group-c
 | Tree data and grouping | no expand control | expand chevron and depth indent (`.ogx-list-view__expand`) |
 | Summary and paging with a `dataSource` | loaded rows | server total |
 | `onRowsScrollEnd` | never fired | fires once per arrival at the bottom, like the grid view |
+| Large lists | not virtualized | still not virtualized; 3.0.1 warns in development above 2,000 rendered items — use pagination |
+| Tab in Firefox | — | lands on the focused row, not the rows container (3.0.1, `tabIndex={-1}` on `.ogx-list-view__rows`) |
 
 ---
 
@@ -1002,6 +1011,7 @@ CSS: `.ogx-col-group-row` no longer has `overflow: hidden`; new `ogx-col-group-c
 | `ogx__row--group-footer` | subtotal rows in `'footer'` position |
 | `ogx__cell-image` | default `<img>` for `type: 'image'` |
 | `ogx-column-resize-handle--start` | resize handle on the left edge (right-pinned columns) |
+| `ogx--fill` (3.0.1) | grid root when no `height`, `style.height` or `autoHeight` is set |
 | `ogx-col-group-cell--pinned`, `ogx-col-group-cell--pinned-left`, `ogx-col-group-cell--pinned-right` | pinned column-group cells |
 | `ogx-filter__hidden-note`, `ogx-filter__value-multiselect` | filter panel |
 | `ogx-list-view__expand`, `ogx-list-view__loading` | list view |
@@ -1019,7 +1029,8 @@ CSS: `.ogx-col-group-row` no longer has `overflow: hidden`; new `ogx-col-group-c
 | `.ogx-global-search--expanded` | shows the input border while expanded and unfocused; the primary border and focus shadow moved to `:focus-within` |
 | `.ogx__cell--focused`, `.ogx__header-cell--focused`, `.ogx__header-cell--focus-visible` | outline colour reads `--ogx-grid-cell-focus-border` (falls back to `--ogx-color-primary`) |
 | `.ogx__header-cell--drag-over` | background `--ogx-color-primary-light` (was the undefined `--ogx-color-blue-50`) |
-| `.ogx-column-resize-handle` | `touch-action: none`; a `:focus-visible` line colour |
+| `.ogx-column-resize-handle` | `touch-action: none`; a `:focus-visible` line colour; 3.0.1: `right: 0` (was `-4px`), `justify-content: flex-end`; `--start` is `left: 0`, `flex-start` |
+| `.ogx__header-cell--pinned-right-first`, `.ogx__cell--pinned-right-first`, `.ogx__aggregation-cell--pinned-right-first`, first right-pinned `.ogx-col-group-cell` (3.0.1) | `margin-left: auto`; `.ogx__content` width is `max(100%, <total>px)` when right-pinned columns exist |
 | `.ogx-list-view__row` | `:focus-visible` outline (rows are focusable) |
 | `.ogx-toolbar` and its buttons / chips, `.ogx-global-search`, scrollbars, filter-panel delete button | read the `--ogx-toolbar-*`, `--ogx-scrollbar-*` and `--ogx-overlay-item-danger-*` variables the theme provider sets (the filter-panel delete button used `--ogx-toolbar-btn-danger-*`); fallbacks match the v2 colours except the danger-button hover |
 

package/docs/roadmap.md

@@ -90,7 +90,7 @@ This document tracks the current status of features in `OpenGridX` and outlines
 - `slots.footer`, `slots.noRowsOverlay` and `slots.loadingOverlay` are rendered (they were typed but ignored).
 - New `onRowDoubleClick`; `ColumnVisibilityPanel` exported; `exportToExcelAdvanced` accepts `groupedRows`.
 - Dev-mode warnings for an unbounded grid container and for `pagination` with row grouping.
-- Real-browser test project (Vitest browser mode + Playwright/Chromium), `npm run test:browser`; the npm publish workflow now runs unit and browser tests before publishing.
+- Real-browser test project (Vitest browser mode + Playwright; Chromium, Firefox and WebKit), `npm run test:browser`; the npm publish workflow now runs unit and browser tests before publishing.
 - Already shipped, previously listed as upcoming: npm publishing (since 0.1.0), native PDF export (v1.2.1), GitHub Pages deployment.
 
 ### Library Hardening *(completed 2026-09-02)*

package/lib/components/Cell/Cell.css

@@ -58,6 +58,10 @@
 .ogx__cell--pinned-right {
   border-left: 1px solid var(--ogx-grid-border-color);
 }
+/* When the columns are narrower than the grid, the free space goes before the right-pinned section. */
+.ogx__cell--pinned-right-first {
+  margin-left: auto;
+}
 .ogx:not(.ogx--row-spanning) .ogx__row:hover .ogx__cell--pinned-left,
 .ogx:not(.ogx--row-spanning) .ogx__row:hover .ogx__cell--pinned-right {
   background-color: var(--ogx-grid-row-hover-background);

package/lib/components/ColumnResizeHandle/ColumnResizeHandle.css

@@ -1,14 +1,15 @@
 .ogx-column-resize-handle {
   position: absolute;
   top: 0;
-  right: -4px;
+  /* Inside the header cell: the cell clips overflow, so a handle straddling the border lost its outer half. */
+  right: 0;
   width: 8px;
   height: 100%;
   cursor: col-resize;
   z-index: 10;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
   user-select: none;
   /* Touch and pen drags resize the column instead of scrolling the grid. */
   touch-action: none;
@@ -16,7 +17,8 @@
 /* Right-pinned columns grow leftwards: their handle sits on the left edge. */
 .ogx-column-resize-handle--start {
   right: auto;
-  left: -4px;
+  left: 0;
+  justify-content: flex-start;
 }
 .ogx-column-resize-handle:focus-visible .ogx-column-resize-handle__line {
   background: var(--ogx-color-primary);

package/lib/components/ColumnResizeHandle/ColumnResizeHandle.tsx

@@ -6,6 +6,8 @@ export interface ColumnResizeHandleProps {
     field: string;
     currentWidth: number;
     onResize: (field: string, newWidth: number) => void;
+    /** Fits the column to its content: called on double-click and on Enter. */
+    onAutosize?: (field: string) => void;
     /** Defaults to 50 (the layout's default minimum), or the current width if that is smaller. */
     minWidth?: number;
     /** Defaults to no limit. */
@@ -43,7 +45,7 @@ function suppressNextClick(): void {
 }
 
 export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
-    const { field, currentWidth, onResize, minWidth, maxWidth, edge = 'end' } = props;
+    const { field, currentWidth, onResize, onAutosize, minWidth, maxWidth, edge = 'end' } = props;
     const [isDragging, setIsDragging] = useState(false);
     const activeRef = useRef<ActiveResize | null>(null);
 
@@ -103,17 +105,24 @@ export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
     }, [field, onResize, widthAt]);
 
     const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'Enter' && onAutosize) {
+            event.preventDefault();
+            event.stopPropagation();
+            onAutosize(field);
+            return;
+        }
         if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
         event.preventDefault();
         event.stopPropagation();
         const step = (event.shiftKey ? 50 : 10) * (event.key === 'ArrowRight' ? 1 : -1);
         onResize(field, clampResizeWidth(currentWidth + step, currentWidth, minWidth, maxWidth));
-    }, [field, currentWidth, onResize, minWidth, maxWidth]);
+    }, [field, currentWidth, onResize, onAutosize, minWidth, maxWidth]);
 
     const handleDoubleClick = useCallback((event: React.MouseEvent) => {
         event.preventDefault();
         event.stopPropagation();
-    }, []);
+        onAutosize?.(field);
+    }, [field, onAutosize]);
 
     const classNames = [
         'ogx-column-resize-handle',

package/lib/components/DataGrid/DataGrid.css

@@ -88,6 +88,13 @@
   justify-content: center;
   z-index: var(--ogx-z-index-modal);
 }
+/* No height prop: fill the container, as a block child of a sized box (height: 100%) or as a
+   flex item (flex: 1 with min-height: 0). In an auto-height parent 100% resolves to auto. */
+.ogx--fill {
+  height: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
+}
 .ogx--auto-height {
   height: auto;
 }
@@ -274,6 +281,7 @@
   box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.1);
 }
 .ogx__aggregation-cell--pinned-right-first {
+  margin-left: auto;
   overflow: visible;
 }
 .ogx__aggregation-cell--pinned-right-first::before {

package/lib/components/DataGrid/DataGrid.tsx

@@ -51,6 +51,7 @@ import { useStableColumns } from '../../hooks/core/useStableColumns';
 import { useGridAggregationApi } from '../../hooks/core/useGridAggregationApi';
 import { useGridClipboardApi } from '../../hooks/core/useGridClipboardApi';
 import { useGridScrollToIndexesApi } from '../../hooks/core/useGridScrollToIndexesApi';
+import { useGridColumnAutosize } from '../../hooks/core/useGridColumnAutosize';
 import { useGridSortHandlers, useGridColumnMenuHandlers } from '../../hooks/core/useGridHeaderHandlers';
 import { useGridKeyboardMode, useGridPointerFocusHandlers } from '../../hooks/core/useGridFocusHandlers';
 import { getPaginationRowCount, pickPaginationLocaleText } from '../../utils/pagination';
@@ -500,6 +501,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         disableKeyboardShortcut: disableClipboardCopy,
     });
     useGridScrollToIndexesApi<R>({ apiRef, viewportRef, layout, rowHeight: effectiveRowHeight });
+    const handleColumnAutosize = useGridColumnAutosize<R>({ apiRef, containerRef, columns: orderedColumns, onColumnResize: handleColumnResize });
 
     const { scrollTop, scrollLeft, overscanRows, handleScroll, setViewportElement } = useGridViewport({
         onRowsScrollEnd, overscanRowCount, rowCount: layout.unpinnedRowsLength, autoHeight, setDimensions, viewportRef,
@@ -595,6 +597,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         pinnedRowsIgnored: isHierarchyEnabled && Boolean(pinnedRows?.top?.length || pinnedRows?.bottom?.length),
         scrollHeight: virtualization.totalHeight,
         listViewWithoutColumn: listViewRequested && !listViewColumn,
+        listViewRowCount: listView && listViewColumn ? allRenderableRows.length : 0,
     });
 
     const { allSelected, someSelected } = rowSelection;
@@ -660,7 +663,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     return (
         <div
             ref={containerRef}
-            className={['ogx', className, autoHeight && 'ogx--auto-height', hasRowSpanning && 'ogx--row-spanning', listView && 'ogx--list-view'].filter(Boolean).join(' ')}
+            className={['ogx', className, autoHeight && 'ogx--auto-height', !autoHeight && height === undefined && style?.height === undefined && 'ogx--fill', hasRowSpanning && 'ogx--row-spanning', listView && 'ogx--list-view'].filter(Boolean).join(' ')}
             style={{
                 ...style,
                 height: height ?? style?.height,
@@ -755,7 +758,10 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                     <div
                         className="ogx__content"
                         style={{
-                            width: virtualization.totalWidth
+                            // With right-pinned columns the content spans at least the viewport, so they sit at its right edge.
+                            width: effectivePinnedColumns?.right?.length
+                                ? `max(100%, ${virtualization.totalWidth}px)`
+                                : virtualization.totalWidth
                         }}
                         role="presentation"
                     >
@@ -775,6 +781,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                                 multiSort={multiSort}
 
                                 onColumnResize={handleColumnResize}
+                                onColumnAutosize={handleColumnAutosize}
                                 columnWidths={columnWidths}
                                 pinnedColumns={effectivePinnedColumns}
 

package/lib/components/DataGrid/GridListView.tsx

@@ -202,7 +202,8 @@ export function GridListView<R extends GridRowModel>({
                 </span>
             </div>
 
-            <div className="ogx-list-view__rows" onScroll={handleScroll} onKeyDown={handleKeyDown} ref={rowsRef}>
+            {/* tabIndex -1: Firefox otherwise makes this scroll container a Tab stop of its own; the rows carry the roving tab stop. */}
+            <div className="ogx-list-view__rows" tabIndex={-1} onScroll={handleScroll} onKeyDown={handleKeyDown} ref={rowsRef}>
                 {allRenderableRows.length === 0 && loading ? (
                     // The grid's live region announces loading; the list shows no "No Data" meanwhile.
                     <div className="ogx-list-view__loading">

package/lib/components/Header/Header.css

@@ -148,6 +148,9 @@
 .ogx__header-cell--pinned-left {
   box-shadow: var(--ogx-grid-pinned-left-shadow, 4px 0 12px -4px rgba(0, 0, 0, 0.05)); 
 }
+.ogx__header-cell--pinned-right-first {
+  margin-left: auto;
+}
 .ogx__header-cell--pinned-right {
   box-shadow: var(--ogx-grid-pinned-right-shadow, -4px 0 12px -4px rgba(0, 0, 0, 0.05));
 }

package/lib/components/Header/Header.tsx

@@ -43,6 +43,8 @@ export interface HeaderProps<R extends GridRowModel = GridRowModel> {
     onSort?: (field: string, direction: GridSortDirection) => void;
     sortModel?: Array<{ field: string; sort: 'asc' | 'desc' }>;
     onColumnResize?: (field: string, newWidth: number) => void;
+    /** Fits a column to its content (double-click or Enter on its resize handle). */
+    onColumnAutosize?: (field: string) => void;
     columnWidths?: Record<string, number>;
     pinnedColumns?: GridColumnPinning;
     hasDetailPanel?: boolean;
@@ -81,6 +83,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
         onSort,
         sortModel = [],
         onColumnResize,
+        onColumnAutosize,
         columnWidths = {},
         pinnedColumns,
         hasDetailPanel = false,
@@ -263,7 +266,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                                 aria-hidden="true"
                             />
                         )}
-                        {cells.map(cell => {
+                        {cells.map((cell, cellIndex) => {
                             const pinnedClass = cell.pinned ? ` ogx-col-group-cell--pinned ogx-col-group-cell--pinned-${cell.pinned}` : '';
                             const style: React.CSSProperties = {
                                 width: cell.width,
@@ -277,6 +280,8 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                             } else if (cell.pinned === 'right') {
                                 style.position = 'sticky';
                                 style.right = pinnedPositions[cell.fields[cell.fields.length - 1]];
+                                // Free space goes before the right-pinned section, as in the column header row.
+                                if (cells[cellIndex - 1]?.pinned !== 'right') style.marginLeft = 'auto';
                             }
                             if (!cell.isGroup) {
                                 return (
@@ -523,6 +528,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                                     field={colDef.field}
                                     currentWidth={getRenderedColumnWidth(colDef, columnWidths)}
                                     onResize={onColumnResize}
+                                    onAutosize={onColumnAutosize}
                                     minWidth={colDef.minWidth}
                                     maxWidth={colDef.maxWidth}
                                     edge={pinnedPosition === 'right' ? 'start' : 'end'}