react-gridix 0.2.0 → 0.2.2

package/README.md

@@ -1,4 +1,4 @@
-# react-gridix Docs
+# react-gridix
 
 A React `DataGrid` with row selection, server-side mode, typed per-column filters, date columns, in-cell editing, resizing and pinning, virtualization, CSV export and 8 themes, plus the `Checkbox` it uses.
 
@@ -11,8 +11,9 @@ A React `DataGrid` with row selection, server-side mode, typed per-column filter
 5. [Checkbox](#5-checkbox)
 6. [DataGrid](#6-datagrid)
 7. [Demos](#7-demos)
-8. [Troubleshooting](#9-troubleshooting)
-9. [Migrating from the earlier version](#10-migrating-from-the-earlier-version)
+8. [Development, building and publishing](#8-development-building-and-publishing)
+9. [Troubleshooting](#9-troubleshooting)
+10. [Migrating from the earlier version](#10-migrating-from-the-earlier-version)
 
 ---
 
@@ -149,14 +150,14 @@ Pass a theme name to the grid. **Without a `theme` prop nothing changes**: the g
 | --- | --- |
 | `"ocean"` | Light, cool blues, blue gradient header, soft shadow |
 | `"midnight"` | Dark slate, indigo accent, dark popups and inputs |
-| `"sunset"` | Warm cream, orange-to-pink gradient header, serif font, rounded corners |
+| `"sunset"` | Warm cream, burnt-orange-to-raspberry gradient header, serif font, rounded corners |
 | `"forest"` | Calm greens, solid dark-green header, sharper corners |
-| `"lavender"` | Light purple, soft violet gradient header, rounded corners |
+| `"lavender"` | Light purple, deep violet gradient header, rounded corners |
 | `"coffee"` | Warm browns and cream, serif font, rich brown header |
 | `"graphite"` | Dark neutral grey with a teal accent, flat and sharp |
-| `"aurora"` | Deep night blue with a green-to-blue-to-violet gradient header and a soft glow |
+| `"aurora"` | Deep night blue with an emerald-to-blue-to-violet gradient header and a soft glow |
 
-A theme is only a set of CSS variables on `[data-rk-theme="name"]`, written with `:where()` (zero specificity). So you can still override any variable or any class on top of a theme. Popups (the filter popup, the column menu) are drawn in `document.body`, and the grid copies the theme attribute onto them, so they follow the theme too.
+A theme is only a set of CSS variables on `[data-rg-theme="name"]`, written with `:where()` (zero specificity). So you can still override any variable or any class on top of a theme. Popups (the filter popup, the column menu) are drawn in `document.body`, and the grid copies the theme attribute onto them, so they follow the theme too.
 
 **Switching themes at run time** is just a state change:
 
@@ -182,18 +183,18 @@ const dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
 ```css
 /* make the aurora header a single colour */
-[data-rk-theme="aurora"] { --rk-header-bg: #0f766e; }
+[data-rg-theme="aurora"] { --rg-header-bg: #0f766e; }
 ```
 
 **Making your own theme.** Any other string works as a theme name. Define the variables you want:
 
 ```css
-[data-rk-theme="brand"] {
-  --rk-header-bg: #7c3aed;
-  --rk-header-text: #fff;
-  --rk-row-hover: #f5f3ff;
-  --rk-selected-bg: #ede9fe;     /* selected rows */
-  --rk-primary: #7c3aed;
+[data-rg-theme="brand"] {
+  --rg-header-bg: #7c3aed;
+  --rg-header-text: #fff;
+  --rg-row-hover: #f5f3ff;
+  --rg-selected-bg: #ede9fe;     /* selected rows */
+  --rg-primary: #7c3aed;
 }
 ```
 
@@ -201,7 +202,7 @@ const dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 <DataGrid theme="brand" ... />
 ```
 
-A dark custom theme should also set the colours that the light defaults assume, for example `--rk-surface`, `--rk-text`, `--rk-border`, `--rk-pinned-bg`, `--rk-skeleton-a` and `--rk-skeleton-b`. Copy the `graphite` block in `themes.css` as a starting point.
+A dark custom theme should also set the colours that the light defaults assume, for example `--rg-surface`, `--rg-text`, `--rg-border`, `--rg-pinned-bg`, `--rg-skeleton-a` and `--rg-skeleton-b`. Copy the `graphite` block in `themes.css` as a starting point.
 
 ### 4.2 CSS variables
 
@@ -209,59 +210,60 @@ Every variable is optional and is read with a fallback, so nothing is declared o
 
 | Variable | Default | Used for |
 | --- | --- | --- |
-| `--rk-font` | system UI stack | Font family |
-| `--rk-text` | `#111827` | Main text |
-| `--rk-muted` | `#6b7280` | Secondary text, empty state |
-| `--rk-border` | `#d1d5db` | Borders |
-| `--rk-surface` | `#ffffff` | Background of the grid, inputs, buttons |
-| `--rk-bg-subtle` | `#f3f4f6` | Header and footer background |
-| `--rk-primary` | `#4f46e5` | Focus rings, active editor border |
-| `--rk-danger` | `#dc2626` | Invalid editor border |
-| `--rk-invalid-bg` | `#fef2f2` | Invalid editor background |
-| `--rk-grid-bg` | `--rk-surface` | Grid background |
-| `--rk-grid-radius` | `10px` | Grid corner radius |
-| `--rk-grid-shadow` | `none` | Grid shadow |
-| `--rk-toolbar-bg` | `transparent` | Toolbar background |
-| `--rk-input-bg`, `--rk-input-border`, `--rk-input-text` | surface, border, inherit | Search box, filter inputs, editor, page controls |
-| `--rk-header-bg` | `--rk-bg-subtle` | Header background. Any CSS background, so gradients work |
-| `--rk-header-text` | inherit | Header text colour |
-| `--rk-header-hover-bg` | `rgba(0,0,0,.06)` | Header hover |
-| `--rk-header-border` | `--rk-border` | Line under the header |
-| `--rk-cell-border` | `#eef0f3` | Lines between rows |
-| `--rk-row-hover` | `#f3f4f6` | Row hover |
-| `--rk-selected-bg` | `#eef2ff` | Background of selected rows |
-| `--rk-pinned-bg` | `--rk-grid-bg` | Opaque background behind pinned body cells (so scrolled cells do not show through) |
-| `--rk-pinned-header-bg` | `--rk-bg-subtle` | Opaque background behind pinned header cells |
-| `--rk-skeleton-a`, `--rk-skeleton-b` | `#e5e7eb`, `#f3f4f6` | The two colours of the shimmering loading bars |
-| `--rk-stripe-a`, `--rk-stripe-b` | `transparent`, `#fafafa` | Alternating row colours (see [stripes](#striped-rows)) |
-| `--rk-footer-bg`, `--rk-footer-text` | subtle, muted | Pagination bar |
-| `--rk-btn-hover` | `#e5e7eb` | Page button, toolbar button and Clear button hover |
-| `--rk-filter-active` | `--rk-primary` | Filter dot colour while a filter is set |
-| `--rk-filter-glow` | `rgba(79,70,229,.25)` | Ring around an active filter dot |
-| `--rk-popup-bg`, `--rk-popup-text`, `--rk-popup-border` | white, dark, grey | Filter popup and column menu |
-| `--rk-popup-radius`, `--rk-popup-shadow` | `10px`, soft shadow | Popup shape |
-| `--rk-row-duration` | `0.38s` | Row entrance animation length |
-| `--rk-row-stagger` | `28ms` | Extra delay per row in the entrance animation |
-| `--rk-checkbox-size` | `20px` | Checkbox width and height |
-| `--rk-checkbox-border-width` | `1px` | Checkbox border width |
-| `--rk-checkbox-radius` | `0` | Checkbox corner radius (no rounding by default) |
-| `--rk-checkbox-color` | `#4f46e5` | Checked colour (also the focus ring and the native accent) |
-| `--rk-checkbox-border` | `#9ca3af` | Border colour of an unchecked `"button"` / `"tick"` checkbox |
-| `--rk-checkbox-bg` | `#ffffff` | Background of an unchecked `"button"` / `"tick"` checkbox |
-| `--rk-checkbox-tick` | `#ffffff` | Colour of the tick, and of a custom character in the `"tick"` variant |
+| `--rg-font` | system UI stack | Font family |
+| `--rg-text` | `#111827` | Main text |
+| `--rg-muted` | `#6b7280` | Secondary text, empty state |
+| `--rg-border` | `#d1d5db` | Borders |
+| `--rg-surface` | `#ffffff` | Background of the grid, inputs, buttons |
+| `--rg-bg-subtle` | `#f3f4f6` | Header and footer background |
+| `--rg-primary` | `#4f46e5` | Focus rings, active editor border |
+| `--rg-danger` | `#dc2626` | Invalid editor border |
+| `--rg-invalid-bg` | `#fef2f2` | Invalid editor background |
+| `--rg-grid-bg` | `--rg-surface` | Grid background |
+| `--rg-grid-radius` | `10px` | Grid corner radius |
+| `--rg-grid-shadow` | `none` | Grid shadow |
+| `--rg-toolbar-bg` | `transparent` | Toolbar background |
+| `--rg-input-bg`, `--rg-input-border`, `--rg-input-text` | surface, border, inherit | Search box, filter inputs, editor, page controls |
+| `--rg-header-bg` | `--rg-bg-subtle` | Header background. Any CSS background, so gradients work |
+| `--rg-header-text` | inherit | Header text colour |
+| `--rg-header-hover-bg` | `rgba(0,0,0,.06)` | Header hover |
+| `--rg-header-border` | `--rg-border` | Line under the header |
+| `--rg-cell-border` | `#eef0f3` | Lines between rows |
+| `--rg-row-hover` | `#f3f4f6` | Row hover |
+| `--rg-selected-bg` | `#eef2ff` | Background of selected rows |
+| `--rg-on-primary` | `#ffffff` | Text colour on top of `--rg-primary` (the selected day in the calendar). Dark themes set a dark colour |
+| `--rg-pinned-bg` | `--rg-grid-bg` | Opaque background behind pinned body cells (so scrolled cells do not show through) |
+| `--rg-pinned-header-bg` | `--rg-bg-subtle` | Opaque background behind pinned header cells |
+| `--rg-skeleton-a`, `--rg-skeleton-b` | `#e5e7eb`, `#f3f4f6` | The two colours of the shimmering loading bars |
+| `--rg-stripe-a`, `--rg-stripe-b` | `transparent`, `#fafafa` | Alternating row colours (see [stripes](#striped-rows)) |
+| `--rg-footer-bg`, `--rg-footer-text` | subtle, muted | Pagination bar |
+| `--rg-btn-hover` | `#e5e7eb` | Page button, toolbar button and Clear button hover |
+| `--rg-filter-active` | `--rg-primary` | Filter dot colour while a filter is set |
+| `--rg-filter-glow` | `rgba(79,70,229,.25)` | Ring around an active filter dot |
+| `--rg-popup-bg`, `--rg-popup-text`, `--rg-popup-border` | white, dark, grey | Filter popup and column menu |
+| `--rg-popup-radius`, `--rg-popup-shadow` | `10px`, soft shadow | Popup shape |
+| `--rg-row-duration` | `0.38s` | Row entrance animation length |
+| `--rg-row-stagger` | `28ms` | Extra delay per row in the entrance animation |
+| `--rg-checkbox-size` | `17px` | Checkbox width and height |
+| `--rg-checkbox-border-width` | `1px` | Checkbox border width |
+| `--rg-checkbox-radius` | `0` | Checkbox corner radius (square by default). The inner mark of the `"button"` variant is rounded half as much. The sunset and lavender themes use `2px` |
+| `--rg-checkbox-color` | `#4f46e5` | Checked colour (also the focus ring and the native accent) |
+| `--rg-checkbox-border` | `#9ca3af` | Border colour of an unchecked `"button"` / `"tick"` checkbox |
+| `--rg-checkbox-bg` | `#ffffff` | Background of an unchecked `"button"` / `"tick"` checkbox |
+| `--rg-checkbox-tick` | `#ffffff` | Colour of the tick, and of a custom character in the `"tick"` variant |
 
 ```css
 :root {
-  --rk-primary: #0d9488;
-  --rk-row-hover: #f0fdfa;
-  --rk-selected-bg: #ccfbf1;
+  --rg-primary: #0d9488;
+  --rg-row-hover: #f0fdfa;
+  --rg-selected-bg: #ccfbf1;
 }
 ```
 
 Scoped to one grid through its `style` prop:
 
 ```tsx
-<DataGrid style={{ "--rk-header-bg": "#0f172a", "--rk-header-text": "#fff" } as React.CSSProperties} ... />
+<DataGrid style={{ "--rg-header-bg": "#0f172a", "--rg-header-text": "#fff" } as React.CSSProperties} ... />
 ```
 
 ---
@@ -315,16 +317,16 @@ A checkbox in three looks. Every variant toggles with **one click** (or the Spac
    />
    ```
 
-   (`aria-checked:` works for the `"button"` and `"tick"` variants. The native input has no `aria-checked`, so use the `--rk-checkbox-color` variable for it.)
-2. **CSS variables**: `--rk-checkbox-size`, `--rk-checkbox-border-width`, `--rk-checkbox-radius`, `--rk-checkbox-color`, `--rk-checkbox-border`, `--rk-checkbox-bg` and `--rk-checkbox-tick` (see [Theming](#42-css-variables)). Set them anywhere above the checkbox:
+   (`aria-checked:` works for the `"button"` and `"tick"` variants. The native input has no `aria-checked`, so use the `--rg-checkbox-color` variable for it.)
+2. **CSS variables**: `--rg-checkbox-size`, `--rg-checkbox-border-width`, `--rg-checkbox-radius`, `--rg-checkbox-color`, `--rg-checkbox-border`, `--rg-checkbox-bg` and `--rg-checkbox-tick` (see [Theming](#42-css-variables)). Set them anywhere above the checkbox:
 
    ```tsx
-   <Checkbox styles={{ root: { "--rk-checkbox-color": "#dc2626" } as CSSProperties }} ... />
+   <Checkbox styles={{ root: { "--rg-checkbox-color": "#dc2626" } as CSSProperties }} ... />
    ```
-3. **A custom character**, for example `indicator="★"` (any text, emoji or React node). It shows when the box is checked, in the `"button"` and `"tick"` variants. The default fill is dropped; the character is sized to the box (70% of `--rk-checkbox-size`) and coloured with `--rk-checkbox-color` in the button variant and `--rk-checkbox-tick` in the tick variant. Restyle it through `classNames.indicator` / `styles.indicator`.
-4. **Plain CSS** with these stable classes: `.rk-checkbox`, `.rk-checkbox--button`, `.rk-checkbox--tick`, `.rk-checkbox--native`, `.rk-checkbox--checked`, `.rk-checkbox--indeterminate`, `.rk-checkbox--disabled`, `.rk-checkbox__control`, `.rk-checkbox__indicator`, `.rk-checkbox__indicator--custom` and `.rk-checkbox__label`. State is also exposed as `data-state="checked"`, `"unchecked"` or `"indeterminate"` and, on the button variants, `aria-checked` (`"true"`, `"false"` or `"mixed"`).
+3. **A custom character**, for example `indicator="★"` (any text, emoji or React node). It shows when the box is checked, in the `"button"` and `"tick"` variants. The default fill is dropped; the character is sized to the box (70% of `--rg-checkbox-size`) and coloured with `--rg-checkbox-color` in the button variant and `--rg-checkbox-tick` in the tick variant. Restyle it through `classNames.indicator` / `styles.indicator`.
+4. **Plain CSS** with these stable classes: `.rg-checkbox`, `.rg-checkbox--button`, `.rg-checkbox--tick`, `.rg-checkbox--native`, `.rg-checkbox--checked`, `.rg-checkbox--indeterminate`, `.rg-checkbox--disabled`, `.rg-checkbox__control`, `.rg-checkbox__indicator`, `.rg-checkbox__indicator--custom` and `.rg-checkbox__label`. State is also exposed as `data-state="checked"`, `"unchecked"` or `"indeterminate"` and, on the button variants, `aria-checked` (`"true"`, `"false"` or `"mixed"`).
 
-**Defaults:** a 1px border and square corners (`--rk-checkbox-border-width: 1px`, `--rk-checkbox-radius: 0`). Round them with `--rk-checkbox-radius: 999px` or a Tailwind `rounded-*` class on `classNames.control`.
+**Defaults:** a 1px border and square corners (`--rg-checkbox-border-width: 1px`, `--rg-checkbox-radius: 0`). Round them with `--rg-checkbox-radius: 999px` or a Tailwind `rounded-*` class on `classNames.control`.
 
 The checkbox CSS is written with `:where()` (zero specificity), so any class you add wins without `!important`.
 
@@ -332,6 +334,8 @@ The checkbox CSS is written with `:where()` (zero specificity), so any class you
 
 ---
 
+---
+
 ## 6. DataGrid
 
 ### 6.1 Concepts
@@ -406,7 +410,8 @@ The grid is generic: `DataGrid<T>` infers `T` from `rows`, and `ColumnDef<T>` ch
 | `serverSide` | `boolean` | `false` | Your server sorts, filters, searches and pages |
 | `rowCount` | `number` | | Total rows on the server (for the page count) |
 | `onQueryChange` | `(query: GridQuery) => void \| Promise<unknown>` | | Called on mount and whenever the query changes. A returned promise drives the loading state |
-| `queryDebounce` | `number` | `250` | Milliseconds to wait after the last keystroke before querying |
+| `queryDebounce` | `number` | `250` | Milliseconds to wait after the last keystroke in the search box before querying |
+| `filterDebounce` | `number` | `300` | Milliseconds to wait after the last keystroke in a typed column filter (text, exact, number) before it is applied. A column can override it. See [Debouncing typed filters](#debouncing-typed-filters) |
 | `loading` | `boolean` | follows the promise | Force the loading state on or off |
 | `loadingRows` | `number` | page size (max 20), or 5 | How many skeleton rows to draw |
 | `skeletonRow` | `ComponentType<SkeletonRowProps<T>>` | shimmer bars | Your own component for each placeholder row |
@@ -435,6 +440,7 @@ The grid is generic: `DataGrid<T>` infers `T` from `rows`, and `ColumnDef<T>` ch
 | `striped` | `boolean` | `false` | Alternate row shading |
 | `stripeColors` | `[string, string]` | | Two colours for the alternating rows. Implies `striped`. See [striped rows](#striped-rows) |
 | `animateRows` | `boolean` | `true` | Rows slide up and fade in when they render. See [row animation](#row-animation) |
+| `rowAnimationClassName` | `string \| (row, rowIndex) => string` | | Your own CSS class for the entrance animation. Replaces the built-in slide-up. See [custom row animation](#custom-row-animation) |
 | `checkboxVariant` | `"button" \| "tick" \| "native"` | `"native"` | Checkbox look for boolean columns and row selection. Columns can override it |
 | `maxHeight` | `number \| string` | | Makes the body scroll, with a sticky header. Example: `400` or `"60vh"` |
 | `className` | `string` | | Classes for the root element (Tailwind works). The grid is `width: 100%` of its container by default |
@@ -458,7 +464,9 @@ const columns: ColumnDef<Employee>[] = [
 | --- | --- | --- |
 | `field` | `FieldPath<T>` | **Required.** Key of the row object this column reads and writes. Use dot notation for nested objects: `"contact.phone"` |
 | `headerName` | `string` | Header text. Defaults to the field name, except in `type: "boolean"` columns, where it defaults to an empty string |
-| `type` | `"text" \| "number" \| "boolean" \| "date"` | `"number"` columns edit and parse as numbers, `"boolean"` columns show a checkbox, `"date"` columns have a date picker (see [6.6](#66-date-columns)). Default `"text"` |
+| `type` | `"text" \| "number" \| "boolean" \| "date" \| "sequence"` | `"number"` columns edit and parse as numbers, `"boolean"` columns show a checkbox, `"date"` columns have a calendar picker (see [6.6](#66-date-columns)), `"sequence"` columns show row numbers (see [row numbers](#row-numbers-sequence-column)). Default `"text"` |
+| `sequenceStart` | `number` | Only for `type: "sequence"`: the number of the first row (default `1`) |
+| `sequenceRestartEachPage` | `boolean` | Only for `type: "sequence"`: start again at `sequenceStart` on every page (default `false`: the count continues, 11, 12, ...) |
 | `width` | `number \| string` | Header cell width |
 | `minWidth` / `maxWidth` | `number \| string` / `number` | Smallest and largest width (`maxWidth` limits dragging when resizing) |
 | `align` | `"left" \| "center" \| "right"` | Text alignment for the header, cells and editor |
@@ -471,6 +479,7 @@ const columns: ColumnDef<Employee>[] = [
 | `filterType` | `"text" \| "exact" \| "number" \| "date" \| "select"` | Which filter controls the popup shows. Default follows `type` |
 | `filterOptions` | `(string \| FilterOption)[]` | Choices for a `"select"` filter. Without it they are built from the data |
 | `filterPlaceholder` | `string` | Placeholder of the text filter box |
+| `filterDebounce` | `number` | Milliseconds to wait after typing in **this** column's text / exact / number filter before it is applied. Overrides the grid's `filterDebounce` (default 300). `0` applies on every keystroke |
 | `filterIndicator` | `ComponentType<FilterIndicatorProps<T>>` | Your own component drawn instead of the default dot |
 | `filterIndicatorClassName` / `filterIndicatorStyle` | `string` / `CSSProperties` | Classes and inline styles for this column's indicator button |
 | `filterPopupClassName` / `filterPopupStyle` | `string` / `CSSProperties` | Classes and inline styles for this column's filter popup |
@@ -492,6 +501,34 @@ const columns: ColumnDef<Employee>[] = [
 | `checkbox` | `ColumnCheckboxOptions` | Look of the checkbox in a `type: "boolean"` column: `variant`, `indicator`, `className`, `style`, `classNames`, `styles` |
 | `headerCheckbox` | `boolean` | On a `type: "boolean"` column, draws a select-all checkbox in the header. See [Select-all header checkbox](#select-all-header-checkbox) |
 
+#### Row numbers (sequence column)
+
+`type: "sequence"` adds a column of row numbers. It needs no data in your rows: give it a `field` that starts with `#` (so it can never clash with a real field) and a header.
+
+```tsx
+const columns: ColumnDef<Person>[] = [
+  { field: "#", type: "sequence", headerName: "No.", width: 64, align: "center" },
+  { field: "name", sortable: true, filterable: true },
+  { field: "email" },
+];
+```
+
+- The number is the row's **position in the list the user is looking at**. After a search or a filter the numbers start again at 1, and after sorting they follow the new order.
+- With pagination the count **continues** on the next pages (page 2 starts at 11). Set `sequenceRestartEachPage: true` to start at `sequenceStart` on every page.
+- `sequenceStart` changes the first number: `sequenceStart: 0` counts from 0.
+- In server-side mode the number is `page * pageSize + position`, so page 3 of 10 rows starts at 21.
+- The column is display-only: it cannot be sorted, filtered or edited, and it is skipped by the search. It can be pinned (`pinned: "left"`), resized and hidden like any other. The header defaults to `#`.
+- `valueFormatter` works on it: `valueFormatter: (n) => String(n).padStart(3, "0")` gives `001`, `002`, ...
+- CSV export includes it. A `scope: "page"` export numbers like the page does.
+
+```tsx
+// "No. 1", "No. 2", ... pinned on the left, starting after a header row of your own
+{ field: "#", type: "sequence", sequenceStart: 1, pinned: "left", width: 70, valueFormatter: (n) => `No. ${n}` }
+
+// restart on every page
+{ field: "#", type: "sequence", sequenceRestartEachPage: true }
+```
+
 ### 6.4 Sorting
 
 **Sorting is chosen per column.** A column is sortable only when its definition says `sortable: true`. There is no grid-level switch.
@@ -589,7 +626,7 @@ Each column's filter has a kind. By default it follows the column `type`; set `f
 | `"text"` | `type: "text"` | One text box | The displayed text **contains** the typed text (case-insensitive) |
 | `"exact"` | | One text box | The displayed text **equals** the typed text (case-insensitive) |
 | `"number"` | `type: "number"` | Min and Max boxes | The number is between Min and Max (either may be left empty). Rows without a number never match |
-| `"date"` | `type: "date"` | From and To date pickers | The day is between From and To (either may be left empty) |
+| `"date"` | `type: "date"` | From and To boxes with a range calendar | The day is between From and To (either may be left empty) |
 | `"select"` | `type: "boolean"` | A checkbox per value | The raw value is one of the ticked values |
 
 ```tsx
@@ -603,7 +640,7 @@ const columns: ColumnDef<Task>[] = [
   // number range: type: "number" gives a Min / Max popup by default
   { field: "budget", type: "number", filterable: true },
 
-  // date range: type: "date" gives From / To date pickers by default
+  // date range: type: "date" gives From / To boxes and a calendar by default
   { field: "due", type: "date", filterable: true },
 
   // choose from a list: values are collected from the data...
@@ -663,7 +700,7 @@ Every column has its own options:
 }
 ```
 
-The dot takes its colour from the button's text colour, so `color` (or `text-*`) restyles it. The colour while a filter is active comes from `--rk-filter-active`. To style all indicators or popups at once, use `classNames.filterIndicator`, `classNames.filterPopup`, `classNames.filterInput` (or the matching `styles`).
+The dot takes its colour from the button's text colour, so `color` (or `text-*`) restyles it. The colour while a filter is active comes from `--rg-filter-active`. To style all indicators or popups at once, use `classNames.filterIndicator`, `classNames.filterPopup`, `classNames.filterInput` (or the matching `styles`).
 
 #### A custom indicator component
 
@@ -687,6 +724,36 @@ The component is drawn inside the indicator `<button>`, so do not put another bu
 
 `filterRenderer` replaces **all** the built-in controls inside the popup, whatever the filter type (see [filterRenderer](#filterrenderer-custom-filter-control)). A custom control produces a text filter, so it works with the "contains" matching.
 
+#### Debouncing typed filters
+
+Typing in a text, exact or number filter does not apply the filter on every keystroke. The box updates at once, and the filter is applied once the user has stopped typing for a moment. This keeps a big grid responsive, and in [server-side mode](#615-server-side-mode) it means one request per pause instead of one per letter.
+
+- The default wait is **300 ms**, set for the whole grid with `filterDebounce`.
+- Any column can choose its own wait with `filterDebounce` in its definition (it wins over the grid's).
+- `0` applies the filter on every keystroke.
+- **Enter** applies a text or number filter immediately. Closing the popup also applies what is waiting, so typed text is never lost.
+- **Clear**, or changing `filters` from outside, drops anything still waiting.
+- Select checkboxes and date pickers are single clicks, so they apply at once. A custom `filterRenderer` also applies at once (debounce inside your component if you need it).
+- The filter indicator lights up when the filter is applied, which is after the wait.
+
+```tsx
+// the whole grid waits 500 ms
+<DataGrid filterDebounce={500} ... />
+
+const columns: ColumnDef<Person>[] = [
+  { field: "name", filterable: true },                          // 500 ms (from the grid)
+  { field: "email", filterable: true, filterDebounce: 800 },    // slow typers: 800 ms
+  { field: "age", type: "number", filterable: true, filterDebounce: 0 },   // instant, a small local data set
+  { field: "status", filterable: true, filterType: "select" },  // clicks: always instant
+];
+```
+
+For a server grid you will often raise it, for a local grid you can lower it:
+
+```tsx
+<DataGrid serverSide filterDebounce={600} queryDebounce={400} onQueryChange={load} ... />
+```
+
 #### Notes
 
 - Searching and text filters use the displayed text, so a salary shown as `$52,000` is found by `52,000` and not by `52000` unless your formatter says so. Number, date and select filters look at the raw value instead, so formatting never gets in their way.
@@ -718,7 +785,18 @@ const columns: ColumnDef<Task>[] = [
 
 **What a row may hold.** The cell understands `"2026-11-05"`, a full ISO string (`"2026-11-05T10:30:00Z"`, whose date part is used as written), a `Date` object, a timestamp number, or any string `Date.parse` understands. Empty values show blank and sort last. Text that is not a date is shown as it is.
 
-**Editing.** Double-click a date cell (or press Enter / F2) to open the browser's date picker. Typing characters does not start an editor on a date cell, because the picker is its own control. After picking or typing a valid date, Enter or a click elsewhere saves it. An empty picker saves `null`. Escape cancels. A half-typed date is ignored when you click away.
+**Editing.** Double-click a date cell (or press Enter / F2). A text box opens with a **calendar** under it:
+
+- Click a day to save it at once. **Today** picks today and **Clear** saves an empty date (`null`).
+- Or type the date as `YYYY-MM-DD`. The calendar follows what you type, and Enter (or a click elsewhere) saves it. Tab saves and moves on, Escape cancels.
+- The arrows change month (`‹ ›`) and year (`« »`). Days before `dateMin` or after `dateMax` are dimmed and cannot be picked.
+- Text that is not a real date (such as `2026-02-31`) marks the editor invalid and is not saved. Clicking away from it throws it away.
+- Typing letters does not start an editor on a date cell: use double-click, Enter or F2.
+- The calendar is drawn by the library, so it looks the same in every browser and follows your theme (`--rg-popup-*`, `--rg-primary`, `--rg-on-primary`). Month and weekday names follow `dateLocale`.
+
+```tsx
+{ field: "due", type: "date", editable: true, dateLocale: "fr-FR", dateMin: "2026-01-01" }
+```
 
 **The saved value keeps the shape the row already had.**
 
@@ -746,6 +824,8 @@ A `valueFormatter` still wins over these two if you set one.
 <DataGrid filters={{ due: { from: "2026-03-01", to: "2026-06-30" } }} onFiltersChange={setFilters} ... />
 ```
 
+**The date filter calendar.** The filter popup of a date column has From and To boxes and a calendar. Type the dates, or click on the calendar: the first click sets **From**, the second sets **To** (swapped if it is earlier), and a third click starts a new range. Days in the range are highlighted. With the keyboard, Tab into the calendar, then arrows move a day or a week, Page Up / Page Down change month, Home / End go to the start / end of the week, Enter picks.
+
 **CSV export** writes dates as `"YYYY-MM-DD"` unless you give `exportValue`.
 
 ### 6.7 Pagination
@@ -793,10 +873,10 @@ Without `pagination` every row is rendered and there is no footer at all. Combin
 />
 ```
 
-The toolbar row is drawn when at least one of `searchable`, `columnMenu`, `exportable` or `toolbar` is used. Your `toolbar` content sits on the right, next to the built-in buttons. To style a toolbar button the same way as the built-in ones, give it the class `rk-grid__tool-btn`:
+The toolbar row is drawn when at least one of `searchable`, `columnMenu`, `exportable` or `toolbar` is used. Your `toolbar` content sits on the right, next to the built-in buttons. To style a toolbar button the same way as the built-in ones, give it the class `rg-grid__tool-btn`:
 
 ```tsx
-toolbar={<button className="rk-grid__tool-btn" onClick={refetch}>Reload</button>}
+toolbar={<button className="rg-grid__tool-btn" onClick={refetch}>Reload</button>}
 ```
 
 ### 6.9 Editing
@@ -846,7 +926,7 @@ Details:
 2. Otherwise, in a `type: "number"` column, an empty text stores `null`, a valid number stores that number, and anything else is rejected.
 3. Otherwise the text is stored as a string.
 
-**Validation.** After parsing, `validate(value, row)` is called. If it returns `false` (or a number could not be parsed), the value is not saved, the editor stays open, and it gets the `rk-grid__editor--invalid` class and `aria-invalid="true"`. Pressing Esc or clicking away discards the invalid text.
+**Validation.** After parsing, `validate(value, row)` is called. If it returns `false` (or a number could not be parsed), the value is not saved, the editor stays open, and it gets the `rg-grid__editor--invalid` class and `aria-invalid="true"`. Pressing Esc or clicking away discards the invalid text.
 
 ```tsx
 { field: "email", validate: (v) => /^\S+@\S+\.\S+$/.test(String(v)) }
@@ -1015,7 +1095,7 @@ How it behaves:
 - **No text editor.** Boolean cells never open the text editor, and Enter and Tab navigation skip them. A click on the checkbox does not trigger `onRowClick`.
 - **Sorting, search and filters.** Unchecked sorts before checked. Search and filters match the text `Yes` / `No`, or whatever your `valueFormatter` returns. A missing value (`null`, `undefined`) shows unchecked.
 - **Header label.** The header of a boolean column is empty unless you set `headerName`. Screen readers still get the field name.
-- **Custom character.** `checkbox: { indicator: "★" }` draws that character instead of the default fill or tick when checked. Colour it with `--rk-checkbox-color` (button variant) or `--rk-checkbox-tick` (tick variant), for example through `checkbox.styles.root`.
+- **Custom character.** `checkbox: { indicator: "★" }` draws that character instead of the default fill or tick when checked. Colour it with `--rg-checkbox-color` (button variant) or `--rg-checkbox-tick` (tick variant), for example through `checkbox.styles.root`.
 - **Defaults.** 1px border, no rounded corners. See [Checkbox](#5-checkbox).
 - **A column with its own `cellEditor`** is treated as a normal editable column instead.
 
@@ -1027,7 +1107,7 @@ How it behaves:
 | One column | `checkbox: { variant: "tick" }` |
 | Whole grid, classes or inline styles | `classNames` / `styles` slots `checkbox`, `checkboxControl`, `checkboxIndicator` |
 | One column, classes or inline styles | `checkbox: { className, style, classNames, styles, indicator }` (same parts as the standalone `Checkbox`) |
-| Colours and size | CSS variables such as `--rk-checkbox-color`, set on the grid's `className` / `style`, or per column in `checkbox.styles.root` |
+| Colours and size | CSS variables such as `--rg-checkbox-color`, set on the grid's `className` / `style`, or per column in `checkbox.styles.root` |
 
 ```tsx
 <DataGrid
@@ -1183,7 +1263,7 @@ When both are given, `style` wins over `styles.root`.
 <DataGrid stripeColors={["#fef3c7", "#e0f2fe"]} />     // your two colours (implies striped)
 ```
 
-Rows alternate between the two colours, starting with the first. `stripeColors` sets `--rk-stripe-a` and `--rk-stripe-b` on the grid. You can also set those variables in your own CSS or theme, and turn on `striped`. Hovering a row still highlights it (`--rk-row-hover`).
+Rows alternate between the two colours, starting with the first. `stripeColors` sets `--rg-stripe-a` and `--rg-stripe-b` on the grid. You can also set those variables in your own CSS or theme, and turn on `striped`. Hovering a row still highlights it (`--rg-row-hover`).
 
 #### Row animation
 
@@ -1193,7 +1273,32 @@ When rows render (the first load, a new page, a sort, a search or a filter), the
 <DataGrid animateRows={false} />        // turn it off
 ```
 
-Tune it with `--rk-row-duration` (default `0.38s`) and `--rk-row-stagger` (default `28ms` per row, up to 24 rows). Changing page or sort also scrolls the grid's own scroll area smoothly back to the top. Visitors who ask their system for reduced motion get no animation (`prefers-reduced-motion`).
+Tune it with `--rg-row-duration` (default `0.38s`) and `--rg-row-stagger` (default `28ms` per row, up to 24 rows). Changing page or sort also scrolls the grid's own scroll area smoothly back to the top. Visitors who ask their system for reduced motion get no animation (`prefers-reduced-motion`).
+
+#### Custom row animation
+
+Pass your own CSS class to replace the built-in slide-up. The class should set `animation`. Every row also gets the CSS variable `--rg-i` (its position on the page, 0 to 24), so a delay of `calc(var(--rg-i) * 40ms)` makes rows arrive one after another.
+
+```css
+@keyframes fade-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
+.row-fade-left { animation: fade-left 0.45s ease-out both; animation-delay: calc(var(--rg-i, 0) * 45ms); }
+```
+
+```tsx
+<DataGrid rowAnimationClassName="row-fade-left" ... />
+```
+
+It can also be a function of the row, for example to animate new rows differently:
+
+```tsx
+<DataGrid rowAnimationClassName={(row) => (row.isNew ? "row-flash" : "row-fade-left")} ... />
+```
+
+With Tailwind, define the keyframes in your config and use the utility, for example `rowAnimationClassName="animate-fade-in-left [animation-delay:calc(var(--rg-i)*40ms)]"`.
+
+- It runs on the same moments as the built-in animation: first render, a new page, sort, search or filter.
+- `animateRows={false}` turns every row animation off, custom or not. It is also skipped while `virtualize` is on.
+- Reduced motion: the built-in animation stops for people who ask for it. Your own class is yours to handle: wrap it in `@media (prefers-reduced-motion: no-preference) { ... }`.
 
 #### Width
 
@@ -1205,30 +1310,32 @@ If you prefer writing CSS, these class names are stable.
 
 | Class | Element |
 | --- | --- |
-| `.rk-grid` | Root |
-| `.rk-grid__toolbar`, `.rk-grid__search` | Toolbar and search box |
-| `.rk-grid__scroll`, `.rk-grid__table`, `.rk-grid__thead`, `.rk-grid__tbody` | Table structure |
-| `.rk-grid__tr` | Every row |
-| `.rk-grid__th`, `.rk-grid__th--sortable`, `.rk-grid__th-content`, `.rk-grid__sort` | Header cells and sort arrow |
-| `.rk-grid__filter-btn`, `.rk-grid__filter-btn--active`, `.rk-grid__filter-btn--open`, `.rk-grid__filter-dot` | Filter indicator button and its default dot |
-| `.rk-grid-popup`, `.rk-grid__filter-input`, `.rk-grid__filter-clear` | Filter popup (in `document.body`), its text box and Clear button |
-| `.rk-grid__row`, `.rk-grid__row--stripe-a`, `.rk-grid__row--stripe-b`, `.rk-grid__row--enter`, `.rk-grid__row--clickable` | Body rows |
-| `.rk-grid__td`, `.rk-grid__td--editable`, `.rk-grid__td--editing` | Body cells |
-| `.rk-grid__editor`, `.rk-grid__editor--invalid`, `.rk-grid__custom-editor` | Editors |
-| `.rk-grid__empty` | Empty state |
-| `.rk-grid__checkbox-cell` | Wrapper around a checkbox in a boolean column (the checkbox's own classes start with `.rk-checkbox`, see [Checkbox](#5-checkbox)) |
-| `.rk-grid__footer`, `.rk-grid__footer--top` | Pagination bar (`data-position="top"` or `"bottom"`) |
-| `.rk-grid__count`, `.rk-grid__pagination`, `.rk-grid__page-size-label`, `.rk-grid__page-size`, `.rk-grid__page-btn`, `.rk-grid__page-info` | Pagination parts |
-| `.rk-grid__toolbar-left`, `.rk-grid__toolbar-actions` | The two halves of the toolbar (search and selected count / buttons) |
-| `.rk-grid__tool-btn`, `.rk-grid__selected-count` | Toolbar buttons and the "N selected" label |
-| `.rk-grid__select-cell`, `.rk-grid__row--selected` | Row-selection checkbox cell and a selected row |
-| `.rk-grid__pinned`, `.rk-grid__pinned--left`, `.rk-grid__pinned--right`, `.rk-grid__pinned--edge` | Pinned cells (the edge class marks the last left / first right one) |
-| `.rk-grid__resizer` | The column resize handle |
-| `.rk-grid__sort-order` | The priority number next to a sort arrow in multi-column sort |
-| `.rk-grid--virtual`, `.rk-grid__spacer` | Virtualized grid and its spacer rows |
-| `.rk-grid__skeleton`, `.rk-grid__skeleton-row`, `.rk-grid__skeleton-cell` | Loading placeholder bar, row and (custom) cell |
-| `.rk-grid__error` | The error message cell (with the Retry button) |
-| `.rk-grid__filter-fields`, `.rk-grid__filter-field`, `.rk-grid__filter-options`, `.rk-grid__filter-empty` | Controls inside the filter popup (number, date, select) |
+| `.rg-grid` | Root |
+| `.rg-grid__toolbar`, `.rg-grid__search` | Toolbar and search box |
+| `.rg-grid__scroll`, `.rg-grid__table`, `.rg-grid__thead`, `.rg-grid__tbody` | Table structure |
+| `.rg-grid__tr` | Every row |
+| `.rg-grid__th`, `.rg-grid__th--sortable`, `.rg-grid__th-content`, `.rg-grid__sort` | Header cells and sort arrow |
+| `.rg-grid__filter-btn`, `.rg-grid__filter-btn--active`, `.rg-grid__filter-btn--open`, `.rg-grid__filter-dot` | Filter indicator button and its default dot |
+| `.rg-grid-popup`, `.rg-grid__filter-input`, `.rg-grid__filter-clear` | Filter popup (in `document.body`), its text box and Clear button |
+| `.rg-grid__row`, `.rg-grid__row--stripe-a`, `.rg-grid__row--stripe-b`, `.rg-grid__row--enter`, `.rg-grid__row--clickable` | Body rows |
+| `.rg-grid__td`, `.rg-grid__td--editable`, `.rg-grid__td--editing` | Body cells |
+| `.rg-grid__editor`, `.rg-grid__editor--invalid`, `.rg-grid__custom-editor` | Editors |
+| `.rg-grid__empty` | Empty state |
+| `.rg-grid__checkbox-cell` | Wrapper around a checkbox in a boolean column (the checkbox's own classes start with `.rg-checkbox`, see [Checkbox](#5-checkbox)) |
+| `.rg-grid__footer`, `.rg-grid__footer--top` | Pagination bar (`data-position="top"` or `"bottom"`) |
+| `.rg-grid__count`, `.rg-grid__pagination`, `.rg-grid__page-size-label`, `.rg-grid__page-size`, `.rg-grid__page-btn`, `.rg-grid__page-info` | Pagination parts |
+| `.rg-grid__toolbar-left`, `.rg-grid__toolbar-actions` | The two halves of the toolbar (search and selected count / buttons) |
+| `.rg-grid__tool-btn`, `.rg-grid__selected-count` | Toolbar buttons and the "N selected" label |
+| `.rg-grid__select-cell`, `.rg-grid__row--selected` | Row-selection checkbox cell and a selected row |
+| `.rg-grid__pinned`, `.rg-grid__pinned--left`, `.rg-grid__pinned--right`, `.rg-grid__pinned--edge` | Pinned cells (the edge class marks the last left / first right one) |
+| `.rg-grid__resizer` | The column resize handle |
+| `.rg-grid__sort-order` | The priority number next to a sort arrow in multi-column sort |
+| `.rg-grid--virtual`, `.rg-grid__spacer` | Virtualized grid and its spacer rows |
+| `.rg-grid__skeleton`, `.rg-grid__skeleton-row`, `.rg-grid__skeleton-cell` | Loading placeholder bar, row and (custom) cell |
+| `.rg-cal`, `.rg-cal__head`, `.rg-cal__nav`, `.rg-cal__title`, `.rg-cal__grid`, `.rg-cal__dow`, `.rg-cal__foot`, `.rg-cal__link` | The calendar: frame, month bar and arrows, weekday names, footer buttons |
+| `.rg-cal__day`, `.rg-cal__day--today`, `.rg-cal__day--selected`, `.rg-cal__day--in-range`, `.rg-cal__day--range-start`, `.rg-cal__day--range-end`, `.rg-cal__day--outside` | A day button and its states |
+| `.rg-grid__error` | The error message cell (with the Retry button) |
+| `.rg-grid__filter-fields`, `.rg-grid__filter-field`, `.rg-grid__filter-options`, `.rg-grid__filter-empty` | Controls inside the filter popup (number, date, select) |
 
 
 ### 6.12 Nested fields
@@ -1272,7 +1379,7 @@ Off by default. `rowSelection` adds a checkbox column on the left.
 | `true` or `"multiple"` | Many rows. The header has a select-all checkbox. Shift+click selects a range |
 | `"single"` | One row at a time (selecting another replaces it). No select-all checkbox |
 
-- Selected rows get the class `rk-grid__row--selected`, the colour `--rk-selected-bg` and `aria-selected="true"`.
+- Selected rows get the class `rg-grid__row--selected`, the colour `--rg-selected-bg` and `aria-selected="true"`.
 - Selection is kept **by row id**, so it survives paging, sorting, searching and filtering. Pass `getRowId` so ids are stable.
 - The **select-all checkbox** in the header acts on every selectable row that matches the current search and filters, **across all pages**. It shows a dash while only some of them are selected.
 - **Shift+click** on a row's checkbox selects (or clears) everything between it and the last row you clicked, as shown on screen. Disabled rows in between are skipped.
@@ -1436,7 +1543,7 @@ When your data lives on a server, switch on `serverSide`. The grid then **does n
 />
 ```
 
-`onQueryChange(query)` is called **on mount and whenever the query changes**: the sort, the search text (after `queryDebounce` ms), a filter, the page or the page size. The query is:
+`onQueryChange(query)` is called **on mount and whenever the query changes**: the sort, the search text (after `queryDebounce` ms), a filter (after `filterDebounce` ms when typed), the page or the page size. The query is:
 
 ```ts
 interface GridQuery {
@@ -1525,7 +1632,7 @@ const { data, isFetching } = useQuery(...);
 api.current?.refresh();
 ```
 
-**Search debounce.** Typing in the search box waits `queryDebounce` milliseconds (250 by default) after the last keystroke, so fast typing makes one request, not one per letter. Set `queryDebounce={0}` for instant queries.
+**Debounce.** Typing in the search box waits `queryDebounce` milliseconds (250 by default) after the last keystroke, and typing in a column filter waits `filterDebounce` (300 by default, also settable per column), so fast typing makes one request, not one per letter. Set either to `0` for instant queries. Select checkboxes, date pickers, sorting and paging query immediately.
 
 **Server mode and the other features.**
 
@@ -1545,8 +1652,8 @@ While loading, the body shows **placeholder rows** with shimmering bars instead
 - `loadingRows` is how many placeholder rows to draw. Default: the page size (at most 20), or 5 without pagination.
 - With `rowSelection` the checkbox column shows a small bar too.
 - Bar widths vary slightly from row to row so the placeholder does not look like identical stripes.
-- Colours come from `--rk-skeleton-a` and `--rk-skeleton-b`. Each theme sets them. The shimmer stops when the user has "reduce motion" turned on.
-- Style the bars with `classNames.skeleton` / `styles.skeleton` (they are `<span class="rk-grid__skeleton">`).
+- Colours come from `--rg-skeleton-a` and `--rg-skeleton-b`. Each theme sets them. The shimmer stops when the user has "reduce motion" turned on.
+- Style the bars with `classNames.skeleton` / `styles.skeleton` (they are `<span class="rg-grid__skeleton">`).
 
 **A custom skeleton for each row.** Pass a component as `skeletonRow`. It is drawn once per placeholder row, inside a single cell that spans the whole row, and receives `{ rowIndex, columns }`:
 
@@ -1566,13 +1673,13 @@ function PersonSkeleton({ rowIndex }: SkeletonRowProps<Person>) {
 <DataGrid serverSide onQueryChange={load} skeletonRow={PersonSkeleton} loadingRows={6} ... />
 ```
 
-You can reuse the built-in shimmer in your own placeholder by giving your elements the class `rk-grid__skeleton`:
+You can reuse the built-in shimmer in your own placeholder by giving your elements the class `rg-grid__skeleton`:
 
 ```tsx
 function RowSkeleton({ columns }: SkeletonRowProps<Person>) {
   return (
     <div style={{ display: "grid", gridTemplateColumns: `repeat(${columns.length}, 1fr)`, gap: 16 }}>
-      {columns.map((c) => <span key={c.field} className="rk-grid__skeleton" style={{ width: "70%" }} />)}
+      {columns.map((c) => <span key={c.field} className="rg-grid__skeleton" style={{ width: "70%" }} />)}
     </div>
   );
 }
@@ -1586,7 +1693,7 @@ Define the skeleton component at module level (not inline in render), like every
 <DataGrid columns={columns} rows={rows} loading={isLoading} />
 ```
 
-**The error state.** If the promise from `onQueryChange` rejects, the body shows `errorMessage` (default "Could not load the data.") and a Retry button. Style it with `.rk-grid__error`:
+**The error state.** If the promise from `onQueryChange` rejects, the body shows `errorMessage` (default "Could not load the data.") and a Retry button. Style it with `.rg-grid__error`:
 
 ```tsx
 <DataGrid serverSide onQueryChange={load} errorMessage={<strong>The server is not answering.</strong>} ... />
@@ -1625,9 +1732,9 @@ const columns: ColumnDef<Employee>[] = [
 <DataGrid columns={columns} rows={rows} />          // scroll sideways: ID, Name and Status stay put
 ```
 
-The row-selection checkbox column is pinned too when any column is pinned left. A thin shadow line (`.rk-grid__pinned--edge`) marks where pinned columns end. Give pinned columns an explicit `width` for the cleanest look. Pinning needs the grid to be narrower than its columns, which happens when the columns' widths add up to more than the container.
+The row-selection checkbox column is pinned too when any column is pinned left. A thin shadow line (`.rg-grid__pinned--edge`) marks where pinned columns end. Give pinned columns an explicit `width` for the cleanest look. Pinning needs the grid to be narrower than its columns, which happens when the columns' widths add up to more than the container.
 
-Colours: `--rk-pinned-bg` and `--rk-pinned-header-bg`. Stripes, hover and selection are layered on top.
+Colours: `--rg-pinned-bg` and `--rg-pinned-header-bg`. Stripes, hover and selection are layered on top.
 
 **Showing and hiding.** Switch on `columnMenu` for a "Columns" button with a checkbox per column:
 
@@ -1750,7 +1857,7 @@ await fetch("/api/reports", { method: "POST", headers: { "Content-Type": "text/c
 ```tsx
 <DataGrid
   apiRef={api}
-  toolbar={<button className="rk-grid__tool-btn" onClick={() => api.current?.exportCsv({ filename: "all", includeHidden: true })}>Export everything</button>}
+  toolbar={<button className="rg-grid__tool-btn" onClick={() => api.current?.exportCsv({ filename: "all", includeHidden: true })}>Export everything</button>}
   ...
 />
 ```
@@ -1978,7 +2085,7 @@ Behaviours to be aware of:
 - `virtualize` needs fixed-height rows. A cell with wrapped text will be cut off.
 - Pinned columns only stick when the table is wider than its container.
 - In `serverSide` mode the grid cannot export or select rows it has never loaded.
-- The browser's date picker looks different in each browser. Its language follows the browser, not `dateLocale` (which only formats the display).
+- The date calendar starts weeks on Sunday and has no week numbers or time of day.
 
 ---
 
@@ -1993,13 +2100,13 @@ The repository contains a playground with one page per feature:
 | Custom components (`#custom`) | `cellRenderer`, `cellEditor`, `headerRenderer`, a custom funnel `filterIndicator`, a per-column indicator style, a `filterRenderer` in the popup |
 | Checkboxes (`#checkboxes`) | Boolean columns with the three variants, an empty-label header, a custom `★` character, select-all headers, locking, styling from outside, and a standalone `Checkbox` |
 | Styling (`#styling`) | Tailwind classes and inline styles, column `className` / `style`, and `stripeColors` |
-| Pagination (`#pagination`) | Top, bottom and both, no pagination, the row animation toggle, and a **controlled page and search** grid driven by outside buttons |
+| Pagination (`#pagination`) | Top, bottom and both, no pagination, the row animation toggle with two **custom animation classes**, a **row-number (sequence) column**, and a **controlled page and search** grid driven by outside buttons |
 | Nested fields (`#nested`) | `contact.phone` style dot paths: editing, search, filter, sort, and proof the original data is not mutated |
 | Row selection (`#selection`) | Multiple and single modes, controlled ids, `isRowSelectable`, Shift+click ranges, select-all across pages, `apiRef.selectAll()`, a Delete button |
 | Server-side (`#server`) | A fake 237-row database with 700 ms latency: server sorting, multi-sort, search debounce, filters, paging, the loading skeleton (default and custom row), and a switch that makes the request fail so you can see the error and Retry |
 | Columns (`#columns`) | Resizing, pinned columns on both sides, the Columns menu, arrow-key navigation, CSV export with `exportValue`, multi-column sort |
 | Large data (`#large`) | 20,000 virtualized rows with search, sorting and a theme |
-| Dates and filters (`#dates`) | `type: "date"` with the date picker editor, `dateMin` / `dateMax`, a `Date`-object column, from/to, number range, select and exact filters |
+| Dates and filters (`#dates`) | `type: "date"` with the calendar editor and range-calendar filter, `dateMin` / `dateMax`, a `Date`-object column, from/to, number range, select and exact filters |
 | Themes (`#themes`) | A switcher for none and all 8 themes |
 
 Run it:
@@ -2015,19 +2122,22 @@ The Styling demo loads Tailwind from its CDN, so it needs an internet connection
 
 ---
 
-## 9. Troubleshooting
+## 8. Troubleshooting
 
 | Problem | Cause and fix |
 | --- | --- |
 | Everything looks unstyled | Import `react-gridix/style.css` once in your app |
-| `theme="ocean"` does nothing | The theme CSS ships in `style.css`: make sure it is imported. The attribute `data-rk-theme` should appear on the grid root |
+| `theme="ocean"` does nothing | The theme CSS ships in `style.css`: make sure it is imported. The attribute `data-rg-theme` should appear on the grid root |
 | Headers don't sort | Sorting is per column: add `sortable: true` to the column definition. There is no grid-level `sortable` prop any more |
 | There is no search box | Pass `searchable` |
 | There is no page info or page buttons | Pass `pagination`. Without it every row is shown and there is no footer |
 | I can't find the filter input | Filters are per column: set `filterable: true`, then click the dot in the header |
 | A date column shows `2026-11-05` instead of `Nov 5, 2026` | The column needs `type: "date"` |
-| The date picker never opens | The cell must be editable (`editable` on the grid or the column), then double-click it or press Enter / F2 |
+| The date calendar never opens | The cell must be editable (`editable` on the grid or the column), then double-click it or press Enter / F2 |
+| A sequence column shows nothing or a type error | Give it `type: "sequence"` and a `field` that starts with `#`, for example `{ field: "#", type: "sequence" }` |
+| My custom row animation does nothing | `animateRows` is `false`, `virtualize` is on, or your class does not set `animation`. Check that the keyframes exist and that the class name is spelled the same in CSS |
 | The number filter popup asks for Min and Max, but I wanted text | Number columns default to a range filter. Set `filterType: "text"` |
+| A typed filter feels slow, or fires on every key | Change the wait with `filterDebounce` on the grid (default 300 ms) or on one column. Use `0` for no waiting |
 | Select filter lists the wrong labels | Pass `filterOptions` with `{ value, label }` pairs. `value` must equal what is stored in the row |
 | Selecting rows does nothing | Add `rowSelection`. Give the grid `getRowId` so selection survives sorting and paging |
 | The server grid asks for data twice on mount | In React StrictMode (development) effects run twice. The production build calls it once. Your handler should be safe to call repeatedly |
@@ -2055,7 +2165,7 @@ The Styling demo loads Tailwind from its CDN, so it needs an internet connection
 
 ---
 
-## 10. Migrating from the earlier version
+### Changed defaults
 
 Three defaults changed so that every feature is opt-in.