@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.
- package/dist/index.d.ts +267 -19
- package/dist/index.js +2732 -2246
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -2
- package/skills/appearance/SKILL.md +2 -2
- package/skills/cell-selection/SKILL.md +1 -1
- package/skills/columns/SKILL.md +2 -2
- package/skills/data/SKILL.md +5 -2
- package/skills/editing/SKILL.md +1 -1
- package/skills/filtering/SKILL.md +112 -26
- package/skills/getting-started/SKILL.md +4 -4
- package/skills/grouping/SKILL.md +1 -1
- package/skills/options/SKILL.md +3 -1
- package/skills/rows/SKILL.md +1 -1
- package/skills/server-side/SKILL.md +44 -15
- package/skills/testing/SKILL.md +6 -3
- package/src/tmdatagrid/components/TMDataGrid.tsx +3 -0
- package/src/tmdatagrid/components/TMDataGridFilterPanel.module.css +37 -18
- package/src/tmdatagrid/components/TMDataGridFilterPanel.tsx +138 -160
- package/src/tmdatagrid/components/TMDataGridFilterSurface.module.css +54 -0
- package/src/tmdatagrid/components/TMDataGridFilterSurface.tsx +162 -0
- package/src/tmdatagrid/components/TMDataGridFooter.tsx +28 -1
- package/src/tmdatagrid/components/TMDataGridHeaderCell.module.css +10 -0
- package/src/tmdatagrid/components/TMDataGridHeaderCell.tsx +12 -3
- package/src/tmdatagrid/components/TMDataGridHeaderFilterRow.module.css +51 -0
- package/src/tmdatagrid/components/TMDataGridHeaderFilterRow.tsx +303 -0
- package/src/tmdatagrid/components/TMDataGridMenu.tsx +57 -24
- package/src/tmdatagrid/components/TMDataGridTable.module.css +9 -41
- package/src/tmdatagrid/components/TMDataGridTable.tsx +84 -15
- package/src/tmdatagrid/components/TMDataGridToolbar.tsx +37 -11
- package/src/tmdatagrid/components/filters/DgAutocompleteFilter.tsx +5 -4
- package/src/tmdatagrid/components/filters/DgDateRangeFilter.tsx +22 -5
- package/src/tmdatagrid/components/filters/DgRangeSliderFilter.tsx +5 -1
- package/src/tmdatagrid/components/filters/DgTriStateFilter.tsx +5 -1
- package/src/tmdatagrid/components/filters/TMDataGridFilterValueInput.tsx +44 -28
- package/src/tmdatagrid/components/filters/controlLayout.ts +32 -0
- package/src/tmdatagrid/components/filters/filterControlFor.ts +65 -0
- package/src/tmdatagrid/components/icons.ts +0 -1
- package/src/tmdatagrid/components/sticky.module.css +44 -0
- package/src/tmdatagrid/core/columnOptions.ts +46 -0
- package/src/tmdatagrid/core/controlledStateSync.ts +108 -0
- package/src/tmdatagrid/core/filterControls.ts +28 -0
- package/src/tmdatagrid/core/filterOperators.ts +64 -1
- package/src/tmdatagrid/core/filterSurface.ts +99 -0
- package/src/tmdatagrid/core/labels.ts +7 -0
- package/src/tmdatagrid/core/labelsSv.ts +3 -0
- package/src/tmdatagrid/core/pageReset.ts +115 -0
- package/src/tmdatagrid/index.ts +13 -0
- 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
|
-
/**
|
|
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
|
-
*
|
|
2207
|
-
* column has none yet -
|
|
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
|
|
2330
|
-
*
|
|
2331
|
-
*
|
|
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
|
|
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
|
-
* <
|
|
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
|
|
2940
|
-
*
|
|
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
|
|
3051
|
-
*
|
|
3052
|
-
*
|
|
3053
|
-
*
|
|
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(
|
|
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 };
|