@jielga/tmdatagrid 2.0.0-beta.10 → 2.0.0-beta.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/dist/index.d.ts +267 -19
  2. package/dist/index.js +2732 -2246
  3. package/dist/index.js.map +1 -1
  4. package/dist/styles.css +1 -1
  5. package/package.json +1 -2
  6. package/skills/appearance/SKILL.md +2 -2
  7. package/skills/cell-selection/SKILL.md +1 -1
  8. package/skills/columns/SKILL.md +2 -2
  9. package/skills/data/SKILL.md +5 -2
  10. package/skills/editing/SKILL.md +1 -1
  11. package/skills/filtering/SKILL.md +112 -26
  12. package/skills/getting-started/SKILL.md +4 -4
  13. package/skills/grouping/SKILL.md +1 -1
  14. package/skills/options/SKILL.md +3 -1
  15. package/skills/rows/SKILL.md +1 -1
  16. package/skills/server-side/SKILL.md +44 -15
  17. package/skills/testing/SKILL.md +6 -3
  18. package/src/tmdatagrid/components/TMDataGrid.tsx +3 -0
  19. package/src/tmdatagrid/components/TMDataGridFilterPanel.module.css +37 -18
  20. package/src/tmdatagrid/components/TMDataGridFilterPanel.tsx +138 -160
  21. package/src/tmdatagrid/components/TMDataGridFilterSurface.module.css +54 -0
  22. package/src/tmdatagrid/components/TMDataGridFilterSurface.tsx +162 -0
  23. package/src/tmdatagrid/components/TMDataGridFooter.tsx +28 -1
  24. package/src/tmdatagrid/components/TMDataGridHeaderCell.module.css +10 -0
  25. package/src/tmdatagrid/components/TMDataGridHeaderCell.tsx +12 -3
  26. package/src/tmdatagrid/components/TMDataGridHeaderFilterRow.module.css +51 -0
  27. package/src/tmdatagrid/components/TMDataGridHeaderFilterRow.tsx +303 -0
  28. package/src/tmdatagrid/components/TMDataGridMenu.tsx +57 -24
  29. package/src/tmdatagrid/components/TMDataGridTable.module.css +9 -41
  30. package/src/tmdatagrid/components/TMDataGridTable.tsx +84 -15
  31. package/src/tmdatagrid/components/TMDataGridToolbar.tsx +37 -11
  32. package/src/tmdatagrid/components/filters/DgAutocompleteFilter.tsx +5 -4
  33. package/src/tmdatagrid/components/filters/DgDateRangeFilter.tsx +22 -5
  34. package/src/tmdatagrid/components/filters/DgRangeSliderFilter.tsx +5 -1
  35. package/src/tmdatagrid/components/filters/DgTriStateFilter.tsx +5 -1
  36. package/src/tmdatagrid/components/filters/TMDataGridFilterValueInput.tsx +44 -28
  37. package/src/tmdatagrid/components/filters/controlLayout.ts +32 -0
  38. package/src/tmdatagrid/components/filters/filterControlFor.ts +65 -0
  39. package/src/tmdatagrid/components/icons.ts +0 -1
  40. package/src/tmdatagrid/components/sticky.module.css +44 -0
  41. package/src/tmdatagrid/core/columnOptions.ts +46 -0
  42. package/src/tmdatagrid/core/controlledStateSync.ts +108 -0
  43. package/src/tmdatagrid/core/filterControls.ts +28 -0
  44. package/src/tmdatagrid/core/filterOperators.ts +64 -1
  45. package/src/tmdatagrid/core/filterSurface.ts +99 -0
  46. package/src/tmdatagrid/core/labels.ts +7 -0
  47. package/src/tmdatagrid/core/labelsSv.ts +3 -0
  48. package/src/tmdatagrid/core/pageReset.ts +115 -0
  49. package/src/tmdatagrid/index.ts +13 -0
  50. package/src/tmdatagrid/useTMDataGrid.tsx +191 -11
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { MantineSize, MenuProps } from "@mantine/core";
2
2
  import { CSSProperties, ComponentType, MouseEvent, MutableRefObject, ReactNode } from "react";
3
- import { Cell, Column, ColumnPinningState, ExpandedState, Header, Row, RowData, RowSelectionState, Table, TableFeatures, TableOptions, TableState, aggregationFns } from "@tanstack/react-table";
3
+ import { Cell, Column, ColumnFiltersState, ColumnPinningState, ExpandedState, Header, Row, RowData, RowSelectionState, Table, TableFeatures, TableOptions, TableState, aggregationFns } from "@tanstack/react-table";
4
4
  import { Store } from "@tanstack/store";
5
5
  import { AnyFieldApi, AnyFormApi, StandardSchemaV1 } from "@tanstack/react-form";
6
6
  import { RankingInfo } from "@tanstack/match-sorter-utils";
@@ -181,12 +181,48 @@ declare function operatorTakesArrayValue(operator: TMDataGridFilterOperator): bo
181
181
  declare function operatorTakesRangeValue(operator: TMDataGridFilterOperator): boolean;
182
182
  /** The untouched value a fresh filter starts with - the operator's shape, empty. */
183
183
  declare function emptyValueForOperator(operator: TMDataGridFilterOperator): string | ReadonlyArray<string>;
184
+ /**
185
+ * The three value shapes an operator can take. A set is not a range, even
186
+ * though both are arrays.
187
+ */
188
+ type TMDataGridFilterValueShape = "scalar" | "set" | "range";
189
+ /**
190
+ * Which shape an operator's value takes. A typed value survives an operator or
191
+ * column change only within its shape, which is the rule both the panel and
192
+ * the header controls use when the operator changes.
193
+ */
194
+ declare function filterValueShape(operator: TMDataGridFilterOperator): TMDataGridFilterValueShape;
184
195
  /**
185
196
  * A filter only narrows the row set once it has something to compare against.
186
197
  * Half-typed filters stay in state (so the panel keeps rendering their row) but
187
198
  * are treated as inactive for the funnel indicator and for row matching.
188
199
  */
189
200
  declare function isFilterActive(value: unknown): boolean;
201
+ /** One column's filter, typed - what `columnFilters` holds per entry. */
202
+ type TMDataGridColumnFilter = {
203
+ id: string;
204
+ value: TMDataGridFilterValue;
205
+ };
206
+ /**
207
+ * The column filters that are actually narrowing the grid, typed.
208
+ *
209
+ * `ColumnFiltersState` types `value` as `unknown`, so the first line of a
210
+ * server-side mapping layer is otherwise a cast back to the shape the grid
211
+ * itself wrote, wrapped in the same "drop the half-typed ones" filter every
212
+ * consumer writes:
213
+ *
214
+ * ```ts
215
+ * const predicates = activeColumnFilters(table).map((filter) =>
216
+ * toPredicate(filter.id, filter.value),
217
+ * );
218
+ * ```
219
+ *
220
+ * Takes the table, or a `columnFilters` array where the consumer owns the
221
+ * slice. Reading it from the table reads the current value and does not
222
+ * subscribe; inside a component, subscribe to `columnFilters` the way the
223
+ * grid's own chrome does.
224
+ */
225
+ declare function activeColumnFilters<TData extends RowData>(source: TMDataGridTable<TData> | ColumnFiltersState): Array<TMDataGridColumnFilter>;
190
226
  /**
191
227
  * One-line description of a single filter, as shown on a filter pill.
192
228
  *
@@ -832,6 +868,8 @@ type TMDataGridLabels = {
832
868
  clearAllFilters: string;
833
869
  closeFilters: string;
834
870
  removeFilter: string;
871
+ /** Names the operator button in a column's header filter control. */
872
+ filterOperatorFor: (column: string) => string;
835
873
  activeFilters: string;
836
874
  clearFilter: (column: string) => string;
837
875
  sortAsc: string;
@@ -857,6 +895,11 @@ type TMDataGridLabels = {
857
895
  to: number;
858
896
  total: number;
859
897
  }) => string;
898
+ /** `pageCount` is `-1` when a manual grid declares an unknown total. */
899
+ pageNumber: (args: {
900
+ page: number;
901
+ pageCount: number;
902
+ }) => string;
860
903
  groupedAllRows: (total: number) => string;
861
904
  pagingSuspendedHint: string;
862
905
  previousPage: string;
@@ -962,7 +1005,30 @@ type TMDataGridFilterControlArgs = {
962
1005
  options: ReadonlyArray<TMDataGridOption>;
963
1006
  size: TMDataGridSize;
964
1007
  labels: TMDataGridLabels;
1008
+ /**
1009
+ * How much room the control has, and whether it names itself. The same
1010
+ * vocabulary as `TMDataGrid.FilterPanel`'s own `layout` prop, plus the one
1011
+ * value only a header cell can be in.
1012
+ *
1013
+ * | Layout | Where | Field |
1014
+ * | --- | --- | --- |
1015
+ * | `"row"` | A filter row laid out side by side | Labelled, fixed width |
1016
+ * | `"stacked"` | A filter row in a narrow host - the sidebar | Labelled, full width |
1017
+ * | `"header"` | One header cell, under `filters.inHeader` | `aria-label`, full width |
1018
+ *
1019
+ * Every built-in control honours it. A custom control that ignores it still
1020
+ * works - it will simply look the same everywhere.
1021
+ */
1022
+ layout: TMDataGridFilterControlLayout;
965
1023
  };
1024
+ /** How much room a filter control has. See `layout`. */
1025
+ type TMDataGridFilterControlLayout = "row" | "stacked" | "header";
1026
+ /**
1027
+ * The two a filter *panel* can be in - {@link TMDataGridFilterControlLayout}
1028
+ * without the header cell, which is not a panel. `TMDataGrid.FilterPanel`'s
1029
+ * `layout` prop.
1030
+ */
1031
+ type TMDataGridFilterPanelLayout = Exclude<TMDataGridFilterControlLayout, "header">;
966
1032
  /**
967
1033
  * `meta.filter.control` - replaces the built-in value control for this column.
968
1034
  * Rendered as JSX, never invoked as a bare function, so hooks are legal
@@ -996,6 +1062,83 @@ type TMDataGridColumnFilterOptions = {
996
1062
  control?: TMDataGridFilterControlComponent;
997
1063
  };
998
1064
  //#endregion
1065
+ //#region .types-tmp/core/filterSurface.d.ts
1066
+ /**
1067
+ * Where the grid puts its filter controls.
1068
+ *
1069
+ * | Surface | Where it renders |
1070
+ * | --- | --- |
1071
+ * | `"popup"` | Floating over the first body rows, under the header |
1072
+ * | `"sidebar"` | Beside the table, inside the grid frame |
1073
+ * | `"none"` | Nowhere - the grid renders no panel of its own |
1074
+ *
1075
+ * Header filters are not one of these: they are a second row of controls in
1076
+ * the header, always visible, and they coexist with any of the three. See
1077
+ * {@link TMDataGridFiltersOptions.inHeader}.
1078
+ */
1079
+ type TMDataGridFilterSurface = "popup" | "sidebar" | "none";
1080
+ /** Which side of the table the sidebar surface renders on. */
1081
+ type TMDataGridFilterSidebarSide = "left" | "right";
1082
+ /**
1083
+ * `filters` on `useTMDataGrid` - everything about where the filter controls
1084
+ * are, as opposed to what they do.
1085
+ *
1086
+ * Named for the option key, the way `editing` has `TMDataGridEditingOptions`.
1087
+ * Not to be confused with `TMDataGridColumnFilterOptions`, which is one
1088
+ * column's `meta.filter`.
1089
+ *
1090
+ * ```tsx
1091
+ * useTMDataGrid({ data, columns, filters: { surface: "sidebar" } });
1092
+ * ```
1093
+ */
1094
+ type TMDataGridFiltersOptions = {
1095
+ /**
1096
+ * Which surface `TMDataGrid.Table` renders and `TMDataGrid.FilterButton`
1097
+ * toggles. Defaults to `"popup"`.
1098
+ *
1099
+ * Under `"none"` the table renders no panel and the filter button renders
1100
+ * nothing. That is what a grid running header filters alone wants, and it is
1101
+ * also what frees a hand-placed `<TMDataGrid.FilterPanel />` to be the only
1102
+ * panel on the page - mounted, it is always visible, so drive it off
1103
+ * `ui.state.filterPanelOpen` if it belongs behind a control of your own.
1104
+ */
1105
+ surface?: TMDataGridFilterSurface;
1106
+ /** Which side the `"sidebar"` surface sits on. Defaults to `"right"`. */
1107
+ sidebarSide?: TMDataGridFilterSidebarSide;
1108
+ /** Width of the `"sidebar"` surface, any CSS length. Defaults to `"280px"`. */
1109
+ sidebarWidth?: string;
1110
+ /**
1111
+ * Whether the popup or the sidebar starts open. Read once, at mount, like
1112
+ * `initialState`.
1113
+ *
1114
+ * Defaults to `true` under `"sidebar"` and `false` everywhere else: a
1115
+ * sidebar is a layout choice, so asking for one and getting an empty strip
1116
+ * until the funnel is clicked is not what it reads like, while a popup that
1117
+ * greets you open is in the way.
1118
+ *
1119
+ * Under `"none"` it is simply the starting value of
1120
+ * `ui.state.filterPanelOpen`, which a control of your own can read.
1121
+ */
1122
+ defaultOpen?: boolean;
1123
+ /**
1124
+ * A second header row holding one value control per filterable column,
1125
+ * always visible. Off by default.
1126
+ *
1127
+ * Independent of `surface` - a grid may have header filters and a popup at
1128
+ * once. What it does change is the column chrome: the header's funnel
1129
+ * indicator and the column menu's "Filter" item both come off, because
1130
+ * their only job was to reveal a control that is now already on screen.
1131
+ *
1132
+ * A header cell has room for a value and an operator button, not for the
1133
+ * panel's column / operator / value triple. Everything else about a filter
1134
+ * is unchanged - the same operators, the same `meta.filter.control`, the
1135
+ * same `columnFilters` state.
1136
+ */
1137
+ inHeader?: boolean;
1138
+ };
1139
+ /** {@link TMDataGridFiltersOptions} with every default filled in. */
1140
+ type TMDataGridFiltersSettings = Required<TMDataGridFiltersOptions>;
1141
+ //#endregion
999
1142
  //#region .types-tmp/core/quickSearch.d.ts
1000
1143
  /** How the quick search matches - see `quickSearchMode` on the hook options. */
1001
1144
  type TMDataGridQuickSearchMode = "fuzzy" | "contains";
@@ -1642,8 +1785,20 @@ type TMDataGridDetailsRenderer<TData extends RowData> = (args: TMDataGridDetails
1642
1785
  */
1643
1786
  type TMDataGridUiState = {
1644
1787
  filterPanelOpen: boolean;
1645
- /** Column whose filter row should be focused when the panel opens. */
1788
+ /**
1789
+ * Column whose *panel* row should take the focus. Cleared once the row has
1790
+ * taken it, so pointing at the same column twice focuses twice.
1791
+ */
1646
1792
  filterPanelColumnId: string | null;
1793
+ /**
1794
+ * Column whose *header filter* control should take the focus, under
1795
+ * `filters.inHeader`. Cleared once taken, like the one above.
1796
+ *
1797
+ * Its own slot rather than a second reader of `filterPanelColumnId`: a grid
1798
+ * can have header filters and a panel at once, and two controls racing to
1799
+ * answer one id means whichever mounted last wins the caret.
1800
+ */
1801
+ headerFilterColumnId: string | null;
1647
1802
  /**
1648
1803
  * Column being dragged by its header, if any. Held here rather than read from
1649
1804
  * `dataTransfer`, which browsers keep unreadable until the drop.
@@ -1686,6 +1841,18 @@ type TMDataGridUiState = {
1686
1841
  type TMDataGridUiActions = {
1687
1842
  openFilterPanel: (columnId?: string | null) => void;
1688
1843
  closeFilterPanel: () => void;
1844
+ /**
1845
+ * Points at a column's row in the filter panel without opening anything.
1846
+ * `openFilterPanel` does this as well as opening; this is the half a panel
1847
+ * that is already showing needs.
1848
+ */
1849
+ focusPanelFilter: (columnId: string | null) => void;
1850
+ /**
1851
+ * Points at a column's header filter control - what `openColumnFilter` does
1852
+ * under `filters.inHeader`, where there is no panel to open. The header row
1853
+ * scrolls the column into view and focuses it.
1854
+ */
1855
+ focusHeaderFilter: (columnId: string | null) => void;
1689
1856
  startColumnDrag: (columnId: string) => void;
1690
1857
  endColumnDrag: () => void;
1691
1858
  /**
@@ -1732,6 +1899,13 @@ type TMDataGridApi<TData extends RowData> = {
1732
1899
  edit: TMDataGridEditApi<TData>;
1733
1900
  /** Table-level feature switches, re-read from options on every render. */
1734
1901
  features: TMDataGridFeatureFlags;
1902
+ /**
1903
+ * Where the filter controls live, the `filters` option with its defaults
1904
+ * filled in. On the api rather than in a component's props because the
1905
+ * pills, the column menu and `openColumnFilter` all have to agree with the
1906
+ * table about which surface is on.
1907
+ */
1908
+ filters: TMDataGridFiltersSettings;
1735
1909
  /** Every string the chrome renders, `labels` merged over the English defaults. */
1736
1910
  labels: TMDataGridLabels;
1737
1911
  /** The detail renderer, when row details are on. See `renderDetails`. */
@@ -1997,12 +2171,40 @@ type UseTMDataGridOptions<TData extends RowData> = Omit<TableOptions<TMDataGridF
1997
2171
  * no extra flag.
1998
2172
  */
1999
2173
  enablePagination?: boolean;
2174
+ /**
2175
+ * Sends the grid back to the first page whenever the query changes - a
2176
+ * column filter, the quick search or the sort. Defaults to `true` under
2177
+ * `manualPagination` and `false` otherwise, where TanStack's own
2178
+ * `autoResetPageIndex` already does it.
2179
+ *
2180
+ * Server-side, `pageIndex` is a position in a result set the grid does not
2181
+ * own: narrowing the query leaves it pointing past the last page, and the
2182
+ * next request comes back empty. The reset is applied in the same event as
2183
+ * the change, so one request goes out, for the first page of the new query.
2184
+ */
2185
+ resetPageOnQueryChange?: boolean;
2000
2186
  /**
2001
2187
  * The row-number gutter: a generated lane, outermost left, numbering the
2002
2188
  * rows of the current view - sorted, filtered, continuing across pages,
2003
2189
  * with group rows unnumbered. Off by default.
2004
2190
  */
2005
2191
  enableRowNumbers?: boolean;
2192
+ /**
2193
+ * Where the grid puts its filter controls - a popup over the rows, a sidebar
2194
+ * beside them, controls in the header row, or nowhere at all so you place
2195
+ * `TMDataGrid.FilterPanel` yourself.
2196
+ *
2197
+ * ```tsx
2198
+ * useTMDataGrid({ data, columns, filters: { surface: "sidebar", inHeader: true } });
2199
+ * ```
2200
+ *
2201
+ * Defaults to `{ surface: "popup" }` - the floating panel the grid has
2202
+ * always shown. See {@link TMDataGridFiltersOptions}.
2203
+ *
2204
+ * Read field by field, so a literal is fine here - unlike `labels` or
2205
+ * `persist`, this one does not have to be referentially stable.
2206
+ */
2207
+ filters?: TMDataGridFiltersOptions;
2006
2208
  /**
2007
2209
  * How the quick search (`TMDataGrid.Search`) matches. `"fuzzy"` - the
2008
2210
  * default - forgives typos and skipped characters, and while it is the
@@ -2201,10 +2403,16 @@ type UseTMDataGridOptions<TData extends RowData> = Omit<TableOptions<TMDataGridF
2201
2403
  * flag on, so `<TMDataGrid.Footer />` renders its pager without further
2202
2404
  * options.
2203
2405
  */
2204
- declare function useTMDataGrid<TData extends RowData>({ persist, labels: labelsOverride, enableColumnOrdering, enablePagination, enableRowNumbers, selectionMode, showSelectedBackground, defaultHighlightedRowId, onHighlightedRowChange, cellSelection, onFocusedCellChange, editing, renderDetails, renderDetailsEstHeight, overscan, ...options }: UseTMDataGridOptions<TData>): TMDataGridApi<TData>;
2406
+ declare function useTMDataGrid<TData extends RowData>({ persist, labels: labelsOverride, enableColumnOrdering, enablePagination, resetPageOnQueryChange, enableRowNumbers, selectionMode, showSelectedBackground, defaultHighlightedRowId, onHighlightedRowChange, cellSelection, onFocusedCellChange, filters: filterOptions, editing, renderDetails, renderDetailsEstHeight, overscan, ...options }: UseTMDataGridOptions<TData>): TMDataGridApi<TData>;
2205
2407
  /**
2206
- * Opens the filter panel for a column, seeding an empty filter row when the
2207
- * column has none yet - mirrors "Filter" in the column header menu.
2408
+ * Sends the user to a column's filter control, seeding an empty filter when
2409
+ * the column has none yet - what "Filter" in the column menu and a click on a
2410
+ * filter pill both do.
2411
+ *
2412
+ * Which control that is follows the grid's `filters` option. Under
2413
+ * `inHeader` it is the column's header control, which is already on screen, so
2414
+ * the call focuses it and leaves the popup or sidebar closed. Otherwise it is
2415
+ * the panel's row for that column, and the call opens the surface on it.
2208
2416
  */
2209
2417
  declare function openColumnFilter<TData extends RowData>(api: TMDataGridApi<TData>, columnId: string): void;
2210
2418
  //#endregion
@@ -2324,13 +2532,35 @@ type TMDataGridDraftActionsProps = {
2324
2532
  declare function TMDataGridDraftActions({ renderActions }?: TMDataGridDraftActionsProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
2325
2533
  //#endregion
2326
2534
  //#region .types-tmp/components/TMDataGridFilterPanel.d.ts
2535
+ type TMDataGridFilterPanelProps = {
2536
+ /**
2537
+ * How one filter row is laid out.
2538
+ *
2539
+ * `"row"` - the default - puts column, operator and value side by side,
2540
+ * which wants about 550px. `"stacked"` puts them one under the other, each
2541
+ * filling the width, for a host too narrow for that: the sidebar surface
2542
+ * uses it, and so should a panel you place in a drawer or a narrow column.
2543
+ *
2544
+ * Passed through to every value control as its `layout`, so a
2545
+ * `meta.filter.control` can size itself to the same decision.
2546
+ */
2547
+ layout?: TMDataGridFilterPanelLayout;
2548
+ };
2327
2549
  /**
2328
2550
  * The MUI-style filter surface: one row per active column filter, each row a
2329
- * column / operator / value triple. It only ever reads and writes the table's
2330
- * `columnFilters` state, so a `manualFiltering` grid gets the same panel for
2331
- * free - the state is forwarded to the server instead of a row model.
2551
+ * column / operator / value triple, over an "Add filter" / "Clear all" footer.
2552
+ *
2553
+ * A plain block of controls, the way `TMDataGrid.ColumnsPanel` is - it renders
2554
+ * whenever it is mounted and knows nothing about floating. The chrome that
2555
+ * makes a floating surface (a title, a close button, click-away, Escape)
2556
+ * belongs to the popup and the sidebar, so this can equally be dropped into a
2557
+ * drawer, a page column or a form. See the `filters.surface` option.
2558
+ *
2559
+ * It only ever reads and writes the table's `columnFilters` state, so a
2560
+ * `manualFiltering` grid gets the same panel for free - the state is forwarded
2561
+ * to the server instead of a row model.
2332
2562
  */
2333
- declare function TMDataGridFilterPanel(): import("react").JSX.Element | null;
2563
+ declare function TMDataGridFilterPanel({ layout }?: TMDataGridFilterPanelProps): import("react").JSX.Element;
2334
2564
  //#endregion
2335
2565
  //#region .types-tmp/components/TMDataGridFilterPills.d.ts
2336
2566
  type TMDataGridFilterPillsProps<TData extends RowData> = {
@@ -2421,6 +2651,12 @@ type TMDataGridPaginationControls = {
2421
2651
  PageSize: () => ReactNode;
2422
2652
  /** The "1–25 of 300" range label. */
2423
2653
  Range: () => ReactNode;
2654
+ /**
2655
+ * The "Page 3 of 200" label - what a server-paged grid usually shows in
2656
+ * place of a row range. Not in the default footer; put it in a
2657
+ * `renderPagination` layout.
2658
+ */
2659
+ PageNumber: () => ReactNode;
2424
2660
  /** The previous/next buttons. */
2425
2661
  Pager: () => ReactNode;
2426
2662
  };
@@ -2447,7 +2683,7 @@ type TMDataGridFooterProps = {
2447
2683
  * renderPagination={({ state, actions, Controls }) => (
2448
2684
  * <Group>
2449
2685
  * <Controls.PageSize />
2450
- * <MyJumpToPage page={state.pageIndex} onJump={actions.setPageIndex} />
2686
+ * <Controls.PageNumber />
2451
2687
  * <Controls.Pager />
2452
2688
  * </Group>
2453
2689
  * )}
@@ -2931,13 +3167,22 @@ declare function TMDataGridLoadingIndicator(): import("react").JSX.Element | nul
2931
3167
  /**
2932
3168
  * Visible rows over total rows. On a server-driven grid, set
2933
3169
  * `meta.totalRowCount` for the denominator - the client never sees every row.
3170
+ * Without it the count is rendered alone, since the fallback denominator would
3171
+ * be the rows the server sent for the current page: a plausible-looking wrong
3172
+ * total, and on an unfiltered first page the same number twice.
2934
3173
  */
2935
3174
  declare function TMDataGridSummaryCount({ children }: {
2936
3175
  children?: ReactNode;
2937
3176
  }): import("react").JSX.Element;
2938
3177
  /**
2939
- * Toggles the filter panel, seeding a filter row on the first filterable column.
2940
- * Renders nothing when no column can be filtered (`enableColumnFilters: false`).
3178
+ * Toggles the grid's filter surface - the popup or the sidebar, whichever
3179
+ * `filters.surface` names - seeding a filter row on the first filterable
3180
+ * column. The count of active filters tints it.
3181
+ *
3182
+ * Renders nothing when no column can be filtered (`enableColumnFilters:
3183
+ * false`), and nothing under `filters.surface: "none"`, where there is no
3184
+ * automatic surface for it to toggle. Read `ui.state.filterPanelOpen` and
3185
+ * render your own control if a hand-placed panel wants one.
2941
3186
  */
2942
3187
  declare function TMDataGridFilterButton(): import("react").JSX.Element | null;
2943
3188
  //#endregion
@@ -2991,7 +3236,7 @@ type TMDataGridProps<TData extends RowData> = TMDataGridApi<TData> & {
2991
3236
  * </TMDataGrid>
2992
3237
  * ```
2993
3238
  */
2994
- declare function TMDataGridRoot<TData extends RowData>({ table, ui, edit, features, labels, renderDetails, renderDetailsEstHeight, overscan, resetSettings, scrollToRow, scrollerRef, size, children, className, style, id, "data-testid": testId }: TMDataGridProps<TData>): import("react").JSX.Element;
3239
+ declare function TMDataGridRoot<TData extends RowData>({ table, ui, edit, features, filters, labels, renderDetails, renderDetailsEstHeight, overscan, resetSettings, scrollToRow, scrollerRef, size, children, className, style, id, "data-testid": testId }: TMDataGridProps<TData>): import("react").JSX.Element;
2995
3240
  declare const TMDataGrid: typeof TMDataGridRoot & {
2996
3241
  Toolbar: typeof TMDataGridToolbar;
2997
3242
  Spacer: typeof TMDataGridToolbarSpacer;
@@ -3047,15 +3292,18 @@ declare function formatGroupValue(value: unknown, blankLabel?: string): string;
3047
3292
  //#endregion
3048
3293
  //#region .types-tmp/components/filters/TMDataGridFilterValueInput.d.ts
3049
3294
  /**
3050
- * The built-in value control of a filter-panel row - what renders when a
3051
- * column declares no `meta.filter.control`. Shaped by the operator: a
3052
- * multi-select for the set operators, a From/To pair for `between`, a Yes/No
3053
- * dropdown for booleans, a typed input otherwise.
3295
+ * The built-in value control of a filter row - what renders when a column
3296
+ * declares no `meta.filter.control`. Shaped by the operator: a multi-select
3297
+ * for the set operators, a From/To pair for `between`, a Yes/No dropdown for
3298
+ * booleans, a typed input otherwise.
3299
+ *
3300
+ * Shaped by `layout` as well: in a header cell the fields drop their labels,
3301
+ * fill the column's width and name themselves through `aria-label`.
3054
3302
  *
3055
3303
  * Exported so a custom control can fall back to it for the operators it does
3056
3304
  * not care about, instead of rebuilding them.
3057
3305
  */
3058
- declare function TMDataGridFilterValueInput({ column, operator, value, onChange, options, size, labels }: TMDataGridFilterControlArgs): import("react").JSX.Element;
3306
+ declare function TMDataGridFilterValueInput(args: TMDataGridFilterControlArgs): import("react").JSX.Element;
3059
3307
  //#endregion
3060
3308
  //#region .types-tmp/components/filters/DgRangeSliderFilter.d.ts
3061
3309
  /**
@@ -3493,4 +3741,4 @@ declare function getSelectableRowIds<TData extends RowData>(row: Row<TMDataGridF
3493
3741
  */
3494
3742
  declare function resolveRowSelectionClick<TData extends RowData>({ rows, rowId, anchorRowId, modifiers, selection, canReplaceSelection }: ResolveRowSelectionClickArgs<TData>): ResolvedRowSelection;
3495
3743
  //#endregion
3496
- export { type BuildCellMatrixArgs, type ColumnStepArgs, DATA_STATE_SLICES, DEFAULT_CELL_EXPORT_OPTIONS, DEFAULT_TMDATAGRID_SIZE, DETAILS_COLUMN_ID, DgAutocompleteFilter, DgDateRangeFilter, DgRangeSliderFilter, DgTriStateFilter, EDIT_COLUMN_ID, FILTER_OPERATOR_LABELS, GROUP_COLUMN_ID, type MoveColumnArgs, PERSIST_PAYLOAD_VERSION, ROW_NUMBER_COLUMN_ID, type ResolveCellMoveArgs, type ResolveRangeBoundsArgs, type ResolveRowSelectionClickArgs, type ResolvedRowSelection, SELECT_COLUMN_ID, SETTINGS_STATE_SLICES, SIZE_CONTROL_SIZE, SIZE_ROW_HEIGHT, TMDATAGRID_LABELS_EN, TMDATAGRID_LABELS_SV, TMDataGrid, type TMDataGridAddRowsOptions, type TMDataGridAddRowsResult, type TMDataGridAggregationName, type TMDataGridApi, TMDataGridBooleanEditor, type TMDataGridCapabilities, type TMDataGridCellCoords, type TMDataGridCellEventArgs, type TMDataGridCellExportOptions, type TMDataGridCellMatrix, type TMDataGridCellNav, type TMDataGridCellPosition, type TMDataGridCellRange, type TMDataGridCellSelectionMode, type TMDataGridColumnCapabilities, type TMDataGridColumnEditOptions, type TMDataGridColumnFilterOptions, type TMDataGridColumnLayout, type TMDataGridColumnMenuItemsArgs, type TMDataGridColumnMenuItemsRenderer, type TMDataGridColumnMeta, type TMDataGridColumnRegion, type TMDataGridColumnType, type TMDataGridContextValue, type TMDataGridDataSlice, TMDataGridDateEditor, type TMDataGridDetailsArgs, type TMDataGridDetailsRenderer, TMDataGridDraftActions, type TMDataGridDraftActionsActions, type TMDataGridDraftActionsControls, type TMDataGridDraftActionsProps, type TMDataGridDraftActionsSlotArgs, type TMDataGridDraftActionsState, type TMDataGridDropSide, type TMDataGridEditApi, type TMDataGridEditChange, type TMDataGridEditCommitArgs, type TMDataGridEditCommitDraftsArgs, type TMDataGridEditField, type TMDataGridEditMode, type TMDataGridEditRowProjection, type TMDataGridEditRowSnapshot, type TMDataGridEditState, type TMDataGridEditValueMap, type TMDataGridEditValueMapArgs, type TMDataGridEditingOptions, type TMDataGridEditorArgs, type TMDataGridEditorComponent, type TMDataGridExpandAllArgs, type TMDataGridExpandTarget, type TMDataGridFeatureFlags, type TMDataGridFeatures, type TMDataGridFieldValidate, type TMDataGridFilterControlArgs, type TMDataGridFilterControlComponent, type TMDataGridFilterOperator, TMDataGridFilterPills, type TMDataGridFilterPillsProps, type TMDataGridFilterValue, TMDataGridFilterValueInput, type TMDataGridFooterProps, type TMDataGridLabels, type TMDataGridLabelsOverride, type TMDataGridMenuColumnsProps, type TMDataGridMenuProps, TMDataGridMultiSelectEditor, TMDataGridNumberEditor, type TMDataGridOption, type TMDataGridOptionsArgs, type TMDataGridOptionsSource, type TMDataGridPaginationActions, type TMDataGridPaginationApi, type TMDataGridPaginationControls, type TMDataGridPaginationSlotArgs, type TMDataGridPaginationState, type TMDataGridPersistKey, type TMDataGridPersistence, type TMDataGridProps, type TMDataGridQuickSearchMode, type TMDataGridRangeBounds, type TMDataGridRowAddArgs, type TMDataGridRowClickModifiers, type TMDataGridRowContextMenuArgs, type TMDataGridRowContextMenuRenderer, type TMDataGridRowData, type TMDataGridRowDeleteArgs, type TMDataGridRowEditForm, type TMDataGridRowStyle, type TMDataGridRowValidators, type TMDataGridSaveDraftsArgs, type TMDataGridSaveDraftsResult, type TMDataGridSaveOutcomes, type TMDataGridScrollAlign, type TMDataGridScrollToRowArgs, TMDataGridSearch, type TMDataGridSearchProps, TMDataGridSelectEditor, type TMDataGridSelectionMode, type TMDataGridSettingsSlice, type TMDataGridSize, type TMDataGridStorageMode, TMDataGridStringEditor, type TMDataGridTable, type TMDataGridTableMeta, type TMDataGridTableProps, type TMDataGridTableValidateArgs, type TMDataGridTableValidators, type TMDataGridUiActions, type TMDataGridUiState, type TMDataGridUiStore, type UseTMDataGridOptions, aggregateColumn, areAllRowsExpanded, autosizeColumn, boundsCellCount, boundsEdges, buildCellMatrix, buildGridCellMatrix, clearedValueForType, createTMDataGridColumnHelper, downloadTextFile, emptyValueForOperator, exportGridToCsv, formatExportValue, formatFilterLabel, formatGroupValue, fuzzyGlobalFilterFn, getColumnCapabilities, getColumnDefaultOperator, getColumnFilterControl, getColumnLabel, getColumnRegion, getColumnType, getDefaultOperator, getDisplayedRows, getEditFieldName, getGridCapabilities, getGroupDataRows, getOperatorsForType, getSelectableRowIds, getStepTargetColumn, getTMDataGridPaginationApi, isColumnEditableForRow, isColumnReorderable, isControlColumn, isFilterActive, isGeneratedColumn, isPagingActive, isSameCell, isWithinBounds, keepGeneratedColumnsOutermost, measureColumnContentWidth, mergeLabels, moveColumn, moveColumnByStep, normalizeFieldValidate, openColumnFilter, operatorNeedsValue, operatorTakesArrayValue, operatorTakesRangeValue, optionsToComboboxData, readFeatureFlags, resolveCellMove, resolveColumnOptions, resolveExpandAll, resolveRangeBounds, resolveRowSelectionClick, tmDataGridFeatures, toClipboardText, toExcelCsv, useTMDataGrid, useTMDataGridContext, writeClipboardText };
3744
+ export { type BuildCellMatrixArgs, type ColumnStepArgs, DATA_STATE_SLICES, DEFAULT_CELL_EXPORT_OPTIONS, DEFAULT_TMDATAGRID_SIZE, DETAILS_COLUMN_ID, DgAutocompleteFilter, DgDateRangeFilter, DgRangeSliderFilter, DgTriStateFilter, EDIT_COLUMN_ID, FILTER_OPERATOR_LABELS, GROUP_COLUMN_ID, type MoveColumnArgs, PERSIST_PAYLOAD_VERSION, ROW_NUMBER_COLUMN_ID, type ResolveCellMoveArgs, type ResolveRangeBoundsArgs, type ResolveRowSelectionClickArgs, type ResolvedRowSelection, SELECT_COLUMN_ID, SETTINGS_STATE_SLICES, SIZE_CONTROL_SIZE, SIZE_ROW_HEIGHT, TMDATAGRID_LABELS_EN, TMDATAGRID_LABELS_SV, TMDataGrid, type TMDataGridAddRowsOptions, type TMDataGridAddRowsResult, type TMDataGridAggregationName, type TMDataGridApi, TMDataGridBooleanEditor, type TMDataGridCapabilities, type TMDataGridCellCoords, type TMDataGridCellEventArgs, type TMDataGridCellExportOptions, type TMDataGridCellMatrix, type TMDataGridCellNav, type TMDataGridCellPosition, type TMDataGridCellRange, type TMDataGridCellSelectionMode, type TMDataGridColumnCapabilities, type TMDataGridColumnEditOptions, type TMDataGridColumnFilter, type TMDataGridColumnFilterOptions, type TMDataGridColumnLayout, type TMDataGridColumnMenuItemsArgs, type TMDataGridColumnMenuItemsRenderer, type TMDataGridColumnMeta, type TMDataGridColumnRegion, type TMDataGridColumnType, type TMDataGridContextValue, type TMDataGridDataSlice, TMDataGridDateEditor, type TMDataGridDetailsArgs, type TMDataGridDetailsRenderer, TMDataGridDraftActions, type TMDataGridDraftActionsActions, type TMDataGridDraftActionsControls, type TMDataGridDraftActionsProps, type TMDataGridDraftActionsSlotArgs, type TMDataGridDraftActionsState, type TMDataGridDropSide, type TMDataGridEditApi, type TMDataGridEditChange, type TMDataGridEditCommitArgs, type TMDataGridEditCommitDraftsArgs, type TMDataGridEditField, type TMDataGridEditMode, type TMDataGridEditRowProjection, type TMDataGridEditRowSnapshot, type TMDataGridEditState, type TMDataGridEditValueMap, type TMDataGridEditValueMapArgs, type TMDataGridEditingOptions, type TMDataGridEditorArgs, type TMDataGridEditorComponent, type TMDataGridExpandAllArgs, type TMDataGridExpandTarget, type TMDataGridFeatureFlags, type TMDataGridFeatures, type TMDataGridFieldValidate, type TMDataGridFilterControlArgs, type TMDataGridFilterControlComponent, type TMDataGridFilterControlLayout, type TMDataGridFilterOperator, type TMDataGridFilterPanelLayout, type TMDataGridFilterPanelProps, TMDataGridFilterPills, type TMDataGridFilterPillsProps, type TMDataGridFilterSidebarSide, type TMDataGridFilterSurface, type TMDataGridFilterValue, TMDataGridFilterValueInput, type TMDataGridFilterValueShape, type TMDataGridFiltersOptions, type TMDataGridFiltersSettings, type TMDataGridFooterProps, type TMDataGridLabels, type TMDataGridLabelsOverride, type TMDataGridMenuColumnsProps, type TMDataGridMenuProps, TMDataGridMultiSelectEditor, TMDataGridNumberEditor, type TMDataGridOption, type TMDataGridOptionsArgs, type TMDataGridOptionsSource, type TMDataGridPaginationActions, type TMDataGridPaginationApi, type TMDataGridPaginationControls, type TMDataGridPaginationSlotArgs, type TMDataGridPaginationState, type TMDataGridPersistKey, type TMDataGridPersistence, type TMDataGridProps, type TMDataGridQuickSearchMode, type TMDataGridRangeBounds, type TMDataGridRowAddArgs, type TMDataGridRowClickModifiers, type TMDataGridRowContextMenuArgs, type TMDataGridRowContextMenuRenderer, type TMDataGridRowData, type TMDataGridRowDeleteArgs, type TMDataGridRowEditForm, type TMDataGridRowStyle, type TMDataGridRowValidators, type TMDataGridSaveDraftsArgs, type TMDataGridSaveDraftsResult, type TMDataGridSaveOutcomes, type TMDataGridScrollAlign, type TMDataGridScrollToRowArgs, TMDataGridSearch, type TMDataGridSearchProps, TMDataGridSelectEditor, type TMDataGridSelectionMode, type TMDataGridSettingsSlice, type TMDataGridSize, type TMDataGridStorageMode, TMDataGridStringEditor, type TMDataGridTable, type TMDataGridTableMeta, type TMDataGridTableProps, type TMDataGridTableValidateArgs, type TMDataGridTableValidators, type TMDataGridUiActions, type TMDataGridUiState, type TMDataGridUiStore, type UseTMDataGridOptions, activeColumnFilters, aggregateColumn, areAllRowsExpanded, autosizeColumn, boundsCellCount, boundsEdges, buildCellMatrix, buildGridCellMatrix, clearedValueForType, createTMDataGridColumnHelper, downloadTextFile, emptyValueForOperator, exportGridToCsv, filterValueShape, formatExportValue, formatFilterLabel, formatGroupValue, fuzzyGlobalFilterFn, getColumnCapabilities, getColumnDefaultOperator, getColumnFilterControl, getColumnLabel, getColumnRegion, getColumnType, getDefaultOperator, getDisplayedRows, getEditFieldName, getGridCapabilities, getGroupDataRows, getOperatorsForType, getSelectableRowIds, getStepTargetColumn, getTMDataGridPaginationApi, isColumnEditableForRow, isColumnReorderable, isControlColumn, isFilterActive, isGeneratedColumn, isPagingActive, isSameCell, isWithinBounds, keepGeneratedColumnsOutermost, measureColumnContentWidth, mergeLabels, moveColumn, moveColumnByStep, normalizeFieldValidate, openColumnFilter, operatorNeedsValue, operatorTakesArrayValue, operatorTakesRangeValue, optionsToComboboxData, readFeatureFlags, resolveCellMove, resolveColumnOptions, resolveExpandAll, resolveRangeBounds, resolveRowSelectionClick, tmDataGridFeatures, toClipboardText, toExcelCsv, useTMDataGrid, useTMDataGridContext, writeClipboardText };