@jielga/tmdatagrid 1.0.2 → 1.1.1
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/README.md +17 -14
- package/dist/index.d.ts +193 -21
- package/dist/index.js +1914 -1802
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/skills/appearance/SKILL.md +1 -1
- package/skills/cell-selection/SKILL.md +4 -4
- package/skills/columns/SKILL.md +1 -1
- package/skills/data/SKILL.md +33 -20
- package/skills/editing/SKILL.md +100 -103
- package/skills/editing/references/editing-api.md +5 -2
- package/skills/editing/references/editors-and-validation.md +7 -1
- package/skills/filtering/SKILL.md +1 -1
- package/skills/getting-started/SKILL.md +23 -17
- package/skills/grouping/SKILL.md +1 -1
- package/skills/options/SKILL.md +1 -1
- package/skills/rows/SKILL.md +50 -15
- package/skills/rows/references/rows-api.md +3 -2
- package/skills/server-side/SKILL.md +1 -1
- package/skills/testing/SKILL.md +1 -1
- package/src/tmdatagrid/components/TMDataGridCellEditor.tsx +1 -1
- package/src/tmdatagrid/components/TMDataGridEditActions.tsx +132 -32
- package/src/tmdatagrid/components/TMDataGridFooter.tsx +223 -95
- package/src/tmdatagrid/components/TMDataGridHeaderCell.tsx +41 -4
- package/src/tmdatagrid/components/TMDataGridTable.tsx +218 -67
- package/src/tmdatagrid/core/editEngine.ts +28 -20
- package/src/tmdatagrid/index.ts +17 -2
package/README.md
CHANGED
|
@@ -88,16 +88,19 @@ shows no filter control.
|
|
|
88
88
|
The documentation is written as markdown under [`src/docs/`](src/docs) and served by the
|
|
89
89
|
demo site:
|
|
90
90
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
| [
|
|
98
|
-
| [
|
|
99
|
-
| [
|
|
100
|
-
| [
|
|
91
|
+
One page per touchpoint: the prose, the demos that show it, and the reference
|
|
92
|
+
table for everything that page owns. [`docsPages.ts`](src/docs/docsPages.ts) is
|
|
93
|
+
the registry and the sidebar order.
|
|
94
|
+
|
|
95
|
+
| Section | Pages |
|
|
96
|
+
| -------------------- | ---------------------------------------------------------------- |
|
|
97
|
+
| Start here | [Getting started](src/docs/getting-started.md), [Grid anatomy](src/docs/anatomy.md) |
|
|
98
|
+
| Columns | [Defining columns](src/docs/columns.md), [Sorting](src/docs/sorting.md), [Filtering](src/docs/filtering.md), [Visibility, pinning and size](src/docs/column-layout.md) |
|
|
99
|
+
| Rows | [Selection](src/docs/row-selection.md), [Details](src/docs/row-details.md), [Grouping](src/docs/grouping.md), [Summary row](src/docs/summary-row.md), [Pinning and numbering](src/docs/row-pinning.md), [Clicks and context menus](src/docs/row-interaction.md), [Row styling](src/docs/row-styling.md) |
|
|
100
|
+
| Cells and editing | [Cell selection](src/docs/cell-selection.md), [Editing](src/docs/editing.md), [Editors and validation](src/docs/editors.md) |
|
|
101
|
+
| Data | [Pagination](src/docs/pagination.md), [Quick search](src/docs/quick-search.md), [Persistence](src/docs/persistence.md), [Server-side](src/docs/server-side.md), [Loading and empty](src/docs/loading-and-empty.md), [Scrolling](src/docs/scrolling.md) |
|
|
102
|
+
| Appearance | [Size and styling](src/docs/styling.md), [Toolbar](src/docs/toolbar.md), [Localization](src/docs/localization.md) |
|
|
103
|
+
| Reference | [useTMDataGrid](src/docs/use-tm-data-grid.md), [Testing](src/docs/testing.md) |
|
|
101
104
|
|
|
102
105
|
## Development
|
|
103
106
|
|
|
@@ -117,14 +120,14 @@ The demo site's examples live in [`src/examples/`](src/examples):
|
|
|
117
120
|
|
|
118
121
|
| Path | Contents |
|
|
119
122
|
| ----------------- | -------------------------------------------------------------- |
|
|
120
|
-
| `
|
|
123
|
+
| `demoRegistry.ts` | Pairs each demo module with its own source through `import.meta.glob` |
|
|
121
124
|
| `demos/` | One file per demo: one idea, no headings, no explanation |
|
|
122
125
|
| `data/` | Shared datasets, and the column set for demos about other things |
|
|
123
126
|
| `playground/` | The kitchen sink, every feature at once behind switches |
|
|
124
127
|
|
|
125
|
-
Adding a demo is adding a file under `demos/` and naming it from a
|
|
126
|
-
|
|
127
|
-
|
|
128
|
+
Adding a demo is adding a file under `demos/` and naming it from a ` ```demo `
|
|
129
|
+
fence on the docs page that explains it. The registry pairs each module with
|
|
130
|
+
its own source, so the code on screen cannot drift from the code running.
|
|
128
131
|
[`demos.test.tsx`](src/examples/demos.test.tsx) mounts every registered demo,
|
|
129
132
|
so a demo that stops working fails the suite whether or not it still compiles.
|
|
130
133
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Cell, Column, ColumnPinningState, ExpandedState, Row, RowData, RowSelectionState, Table, TableFeatures, TableOptions, TableState, aggregationFns } from "@tanstack/react-table";
|
|
1
|
+
import { Cell, Column, ColumnPinningState, ExpandedState, Header, Row, RowData, RowSelectionState, Table, TableFeatures, TableOptions, TableState, aggregationFns } from "@tanstack/react-table";
|
|
2
2
|
import { CSSProperties, ComponentType, MouseEvent, MutableRefObject, ReactNode } from "react";
|
|
3
3
|
import { MantineSize, MenuProps } from "@mantine/core";
|
|
4
4
|
import { Store } from "@tanstack/store";
|
|
@@ -13,6 +13,51 @@ import { RankingInfo } from "@tanstack/match-sorter-utils";
|
|
|
13
13
|
declare function TMDataGridColumnsPanel(): import("react").JSX.Element;
|
|
14
14
|
//#endregion
|
|
15
15
|
//#region .types-tmp/components/TMDataGridEditActions.d.ts
|
|
16
|
+
/** What the edit chrome is showing. */
|
|
17
|
+
type TMDataGridEditActionsState = {
|
|
18
|
+
/** Rows with unsaved work: dirty edits, entry rows, and deletion marks. */
|
|
19
|
+
pendingCount: number;
|
|
20
|
+
/** Whether a submit is in flight. */
|
|
21
|
+
isSubmitting: boolean;
|
|
22
|
+
};
|
|
23
|
+
/** What the edit chrome can do. */
|
|
24
|
+
type TMDataGridEditActionsActions = {
|
|
25
|
+
/** Commits every open row. Resolves `false` when a row stayed open. */
|
|
26
|
+
save: () => Promise<boolean>;
|
|
27
|
+
/** Drops every draft. */
|
|
28
|
+
discard: () => void;
|
|
29
|
+
};
|
|
30
|
+
/** The pre-bound pieces of the built-in edit chrome. */
|
|
31
|
+
type TMDataGridEditActionsControls = {
|
|
32
|
+
/** Save, with the pending count, disabled while nothing is pending. */
|
|
33
|
+
Save: () => ReactNode;
|
|
34
|
+
/** Discard, disabled while nothing is pending. */
|
|
35
|
+
Discard: () => ReactNode;
|
|
36
|
+
};
|
|
37
|
+
/** What {@link TMDataGridEditActionsProps.renderActions} is handed. */
|
|
38
|
+
type TMDataGridEditActionsSlotArgs = {
|
|
39
|
+
state: TMDataGridEditActionsState;
|
|
40
|
+
actions: TMDataGridEditActionsActions;
|
|
41
|
+
Controls: TMDataGridEditActionsControls;
|
|
42
|
+
};
|
|
43
|
+
type TMDataGridEditActionsProps = {
|
|
44
|
+
/**
|
|
45
|
+
* Replaces the built-in Save/Discard pair, and is handed the pieces of it.
|
|
46
|
+
*
|
|
47
|
+
* ```tsx
|
|
48
|
+
* <TMDataGrid.EditActions
|
|
49
|
+
* renderActions={({ state, Controls }) => (
|
|
50
|
+
* <Group>
|
|
51
|
+
* {state.pendingCount > 0 && <Badge>{state.pendingCount}</Badge>}
|
|
52
|
+
* <Controls.Save />
|
|
53
|
+
* <Controls.Discard />
|
|
54
|
+
* </Group>
|
|
55
|
+
* )}
|
|
56
|
+
* />
|
|
57
|
+
* ```
|
|
58
|
+
*/
|
|
59
|
+
renderActions?: (args: TMDataGridEditActionsSlotArgs) => ReactNode;
|
|
60
|
+
};
|
|
16
61
|
/**
|
|
17
62
|
* Batch mode's toolbar chrome: Save with the dirty-row count, and Discard.
|
|
18
63
|
* Both read the edit store, so they grey out while nothing is dirty and the
|
|
@@ -28,7 +73,7 @@ declare function TMDataGridColumnsPanel(): import("react").JSX.Element;
|
|
|
28
73
|
* </TMDataGrid.Toolbar>
|
|
29
74
|
* ```
|
|
30
75
|
*/
|
|
31
|
-
declare function TMDataGridEditActions(): import("react").JSX.Element | null;
|
|
76
|
+
declare function TMDataGridEditActions({ renderActions }?: TMDataGridEditActionsProps): 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;
|
|
32
77
|
//#endregion
|
|
33
78
|
//#region .types-tmp/components/TMDataGridFilterPanel.d.ts
|
|
34
79
|
/**
|
|
@@ -307,12 +352,19 @@ type TMDataGridEditRowProjection = {
|
|
|
307
352
|
* reads a form's store directly - it is mounted for one cell at a time.
|
|
308
353
|
*/
|
|
309
354
|
type TMDataGridEditState = {
|
|
310
|
-
/**
|
|
355
|
+
/**
|
|
356
|
+
* The cell the last open gesture named - where the caret goes. In row mode
|
|
357
|
+
* the whole row is editing whatever this says, so there it is only the
|
|
358
|
+
* caret's cell, and `null` for the lane's pencil, which names no column.
|
|
359
|
+
*/
|
|
311
360
|
active: {
|
|
312
361
|
rowId: string;
|
|
313
362
|
columnId: string | null;
|
|
314
363
|
} | null;
|
|
315
|
-
/**
|
|
364
|
+
/**
|
|
365
|
+
* Rows with a live form. In cell mode at most one; in row, cellConfirm and
|
|
366
|
+
* batch, as many as the user opened - which rows are editing.
|
|
367
|
+
*/
|
|
316
368
|
openRowIds: ReadonlyArray<string>;
|
|
317
369
|
rows: Record<string, TMDataGridEditRowProjection>;
|
|
318
370
|
/** Phase 4 - rows being created, not yet in `data`. */
|
|
@@ -350,8 +402,13 @@ type TMDataGridEditorArgs = {
|
|
|
350
402
|
cancel: () => void;
|
|
351
403
|
size: TMDataGridSize;
|
|
352
404
|
/**
|
|
353
|
-
*
|
|
354
|
-
*
|
|
405
|
+
* @deprecated The grid places the caret itself, once per open gesture, so
|
|
406
|
+
* honouring this is optional and it will go in the next major. It focuses
|
|
407
|
+
* `data-dg-part="editor-input"` when the editor publishes it and the first
|
|
408
|
+
* focusable element inside the editor otherwise, which is why a custom
|
|
409
|
+
* editor that ignores this prop still gets the caret. False under
|
|
410
|
+
* `editMode: "row"`, where a whole row of editors is mounted at once and
|
|
411
|
+
* only the named cell may take it.
|
|
355
412
|
*/
|
|
356
413
|
autoFocus: boolean;
|
|
357
414
|
/**
|
|
@@ -426,7 +483,11 @@ type TMDataGridEditApi = {
|
|
|
426
483
|
canEditCell: (row: ErasedRow, column: ErasedColumn) => boolean;
|
|
427
484
|
/** Whether the row takes edits at all - the edit lane's pencil gate. */
|
|
428
485
|
canEditRow: (row: ErasedRow) => boolean;
|
|
429
|
-
/**
|
|
486
|
+
/**
|
|
487
|
+
* Opens an editor. In row mode the whole row opens either way and `columnId`
|
|
488
|
+
* only says which cell takes the caret; `null` (the lane's pencil) leaves it
|
|
489
|
+
* to the row's first editable cell.
|
|
490
|
+
*/
|
|
430
491
|
begin: (target: {
|
|
431
492
|
rowId: string;
|
|
432
493
|
columnId: string | null;
|
|
@@ -1816,8 +1877,8 @@ type TMDataGridFilterPillsProps<TData extends RowData> = {
|
|
|
1816
1877
|
declare function TMDataGridFilterPills<TData extends RowData>({ api, size, showClearAll, onPillClick, className }: TMDataGridFilterPillsProps<TData>): import("react").JSX.Element | null;
|
|
1817
1878
|
//#endregion
|
|
1818
1879
|
//#region .types-tmp/components/TMDataGridFooter.d.ts
|
|
1819
|
-
/**
|
|
1820
|
-
type
|
|
1880
|
+
/** What the pager is showing. The read half of {@link TMDataGridPaginationApi}. */
|
|
1881
|
+
type TMDataGridPaginationState = {
|
|
1821
1882
|
pageIndex: number;
|
|
1822
1883
|
pageSize: number;
|
|
1823
1884
|
/** `-1` when a manual grid declares `pageCount: -1` (unknown total). */
|
|
@@ -1825,6 +1886,17 @@ type TMDataGridPaginationApi = {
|
|
|
1825
1886
|
rowCount: number;
|
|
1826
1887
|
canPreviousPage: boolean;
|
|
1827
1888
|
canNextPage: boolean;
|
|
1889
|
+
/**
|
|
1890
|
+
* Whether the pager is slicing anything right now. `false` while a grouping
|
|
1891
|
+
* is active, which suspends paging - see `isPagingActive`.
|
|
1892
|
+
*/
|
|
1893
|
+
isPagingActive: boolean;
|
|
1894
|
+
/** First and last row number on this page, 1-based, for a range label. */
|
|
1895
|
+
from: number;
|
|
1896
|
+
to: number;
|
|
1897
|
+
};
|
|
1898
|
+
/** What the pager can do. The write half of {@link TMDataGridPaginationApi}. */
|
|
1899
|
+
type TMDataGridPaginationActions = {
|
|
1828
1900
|
setPageIndex: (pageIndex: number) => void;
|
|
1829
1901
|
setPageSize: (pageSize: number) => void;
|
|
1830
1902
|
previousPage: () => void;
|
|
@@ -1832,16 +1904,64 @@ type TMDataGridPaginationApi = {
|
|
|
1832
1904
|
firstPage: () => void;
|
|
1833
1905
|
lastPage: () => void;
|
|
1834
1906
|
};
|
|
1907
|
+
/**
|
|
1908
|
+
* Pagination state and actions, split into the half you read and the half you
|
|
1909
|
+
* call.
|
|
1910
|
+
*
|
|
1911
|
+
* The split is what makes a partial override possible: a consumer replacing
|
|
1912
|
+
* only the range label reads `state` and never touches `actions`, and one
|
|
1913
|
+
* replacing only the buttons does the opposite.
|
|
1914
|
+
*/
|
|
1915
|
+
type TMDataGridPaginationApi = {
|
|
1916
|
+
state: TMDataGridPaginationState;
|
|
1917
|
+
actions: TMDataGridPaginationActions;
|
|
1918
|
+
};
|
|
1919
|
+
/**
|
|
1920
|
+
* The pre-bound pieces of the built-in pager.
|
|
1921
|
+
*
|
|
1922
|
+
* Each renders exactly what the default footer renders, already wired to the
|
|
1923
|
+
* table and already respecting the suspended-paging state - so a custom layout
|
|
1924
|
+
* keeps the parts it likes rather than rebuilding them to look the same.
|
|
1925
|
+
*/
|
|
1926
|
+
type TMDataGridPaginationControls = {
|
|
1927
|
+
/** "Rows per page" and its select. */
|
|
1928
|
+
PageSize: () => ReactNode;
|
|
1929
|
+
/** The "1–25 of 300" range label. */
|
|
1930
|
+
Range: () => ReactNode;
|
|
1931
|
+
/** The previous/next buttons. */
|
|
1932
|
+
Pager: () => ReactNode;
|
|
1933
|
+
};
|
|
1934
|
+
/** What {@link TMDataGridFooterProps.renderPagination} is handed. */
|
|
1935
|
+
type TMDataGridPaginationSlotArgs = TMDataGridPaginationApi & {
|
|
1936
|
+
Controls: TMDataGridPaginationControls;
|
|
1937
|
+
};
|
|
1835
1938
|
/**
|
|
1836
1939
|
* Reads {@link TMDataGridPaginationApi} off a table. The Footer feeds it to the
|
|
1837
|
-
* `
|
|
1940
|
+
* `renderPagination` slot; a pager living outside the Footer can call it with
|
|
1838
1941
|
* the table from `useTMDataGrid` directly.
|
|
1942
|
+
*
|
|
1943
|
+
* `Controls` are not here: they are components bound to the grid context, and
|
|
1944
|
+
* this function takes only a table.
|
|
1839
1945
|
*/
|
|
1840
|
-
declare function getTMDataGridPaginationApi<TData extends RowData>(table: TMDataGridTable<TData
|
|
1946
|
+
declare function getTMDataGridPaginationApi<TData extends RowData>(table: TMDataGridTable<TData>, isPaging?: boolean): TMDataGridPaginationApi;
|
|
1841
1947
|
type TMDataGridFooterProps = {
|
|
1842
1948
|
pageSizeOptions?: ReadonlyArray<number>;
|
|
1843
|
-
/**
|
|
1844
|
-
|
|
1949
|
+
/**
|
|
1950
|
+
* Replaces the built-in pager, and is handed the pieces of it.
|
|
1951
|
+
*
|
|
1952
|
+
* ```tsx
|
|
1953
|
+
* <TMDataGrid.Footer
|
|
1954
|
+
* renderPagination={({ state, actions, Controls }) => (
|
|
1955
|
+
* <Group>
|
|
1956
|
+
* <Controls.PageSize />
|
|
1957
|
+
* <MyJumpToPage page={state.pageIndex} onJump={actions.setPageIndex} />
|
|
1958
|
+
* <Controls.Pager />
|
|
1959
|
+
* </Group>
|
|
1960
|
+
* )}
|
|
1961
|
+
* />
|
|
1962
|
+
* ```
|
|
1963
|
+
*/
|
|
1964
|
+
renderPagination?: (args: TMDataGridPaginationSlotArgs) => ReactNode;
|
|
1845
1965
|
};
|
|
1846
1966
|
/**
|
|
1847
1967
|
* MUI-style pager: "Rows per page · from–to of total · ‹ ›".
|
|
@@ -1853,7 +1973,7 @@ type TMDataGridFooterProps = {
|
|
|
1853
1973
|
* Row totals come from `table.getRowCount()`, which prefers `options.rowCount`
|
|
1854
1974
|
* - so a server-paged grid shows the server's total without changes here.
|
|
1855
1975
|
*/
|
|
1856
|
-
declare function TMDataGridFooter({ pageSizeOptions,
|
|
1976
|
+
declare function TMDataGridFooter({ pageSizeOptions, renderPagination }: TMDataGridFooterProps): import("react").JSX.Element | null;
|
|
1857
1977
|
//#endregion
|
|
1858
1978
|
//#region .types-tmp/components/TMDataGridSearch.d.ts
|
|
1859
1979
|
type TMDataGridSearchProps = {
|
|
@@ -1891,6 +2011,27 @@ type TMDataGridSearchProps = {
|
|
|
1891
2011
|
*/
|
|
1892
2012
|
declare function TMDataGridSearch({ placeholder, debounce, w }: TMDataGridSearchProps): import("react").JSX.Element | null;
|
|
1893
2013
|
//#endregion
|
|
2014
|
+
//#region .types-tmp/components/TMDataGridHeaderCell.d.ts
|
|
2015
|
+
/** The table as the header cell sees it, after the context type erasure. */
|
|
2016
|
+
type TMDataGridTableInstance = ReturnType<typeof useTMDataGridContext>["table"];
|
|
2017
|
+
type TMDataGridHeader = Header<TMDataGridFeatures, TMDataGridRowData, unknown>;
|
|
2018
|
+
/** What {@link TMDataGridColumnMenuItemsRenderer} is handed. */
|
|
2019
|
+
type TMDataGridColumnMenuItemsArgs = {
|
|
2020
|
+
column: TMDataGridHeader["column"];
|
|
2021
|
+
table: TMDataGridTableInstance;
|
|
2022
|
+
/**
|
|
2023
|
+
* The items the grid would have rendered, in order, dividers included.
|
|
2024
|
+
* Return them to keep the built-in menu, splice around them to extend it,
|
|
2025
|
+
* or drop them to replace it.
|
|
2026
|
+
*/
|
|
2027
|
+
internalItems: Array<ReactNode>;
|
|
2028
|
+
};
|
|
2029
|
+
/**
|
|
2030
|
+
* Replaces a column's menu contents. Returning an empty list leaves the column
|
|
2031
|
+
* with no menu button at all, the same as a column whose every feature is off.
|
|
2032
|
+
*/
|
|
2033
|
+
type TMDataGridColumnMenuItemsRenderer = (args: TMDataGridColumnMenuItemsArgs) => Array<ReactNode>;
|
|
2034
|
+
//#endregion
|
|
1894
2035
|
//#region .types-tmp/core/cellExport.d.ts
|
|
1895
2036
|
/** The selected block, flattened to text. One inner array per row. */
|
|
1896
2037
|
type TMDataGridCellMatrix = Array<Array<string>>;
|
|
@@ -2058,7 +2199,7 @@ type TMDataGridCellNav = {
|
|
|
2058
2199
|
right: boolean;
|
|
2059
2200
|
} | null;
|
|
2060
2201
|
};
|
|
2061
|
-
/** What
|
|
2202
|
+
/** What `renderRowContextMenu` is handed for the right-clicked row. */
|
|
2062
2203
|
type TMDataGridRowContextMenuArgs<TData extends RowData> = {
|
|
2063
2204
|
table: Table<TMDataGridFeatures, TData>;
|
|
2064
2205
|
row: Row<TMDataGridFeatures, TData>;
|
|
@@ -2073,13 +2214,21 @@ type TMDataGridRowContextMenuArgs<TData extends RowData> = {
|
|
|
2073
2214
|
* `closeOnItemClick`), so this is for content that isn't a menu item.
|
|
2074
2215
|
*/
|
|
2075
2216
|
close: () => void;
|
|
2217
|
+
/**
|
|
2218
|
+
* The grid's own items for this menu: the cell copy and export items, under
|
|
2219
|
+
* `cellSelection: "range"`, and `null` otherwise.
|
|
2220
|
+
*
|
|
2221
|
+
* Placing it decides the order. Ignore it and the grid keeps today's
|
|
2222
|
+
* behavior, rendering its items above a divider and yours below.
|
|
2223
|
+
*/
|
|
2224
|
+
internalItems: ReactNode;
|
|
2076
2225
|
};
|
|
2077
2226
|
/**
|
|
2078
2227
|
* Builds the contents of a row's context menu - `Menu.Item`, `Menu.Label`,
|
|
2079
2228
|
* `Menu.Divider`, `Menu.Sub`, or any other node. The grid owns the `Menu` and
|
|
2080
2229
|
* its `Menu.Dropdown`; this fills the dropdown.
|
|
2081
2230
|
*/
|
|
2082
|
-
type
|
|
2231
|
+
type TMDataGridRowContextMenuRenderer<TData extends RowData> = (args: TMDataGridRowContextMenuArgs<TData>) => ReactNode;
|
|
2083
2232
|
/**
|
|
2084
2233
|
* What the `onCellClick` family receives - the cell with its row and column,
|
|
2085
2234
|
* in the consumer's own row type, plus the pointer event.
|
|
@@ -2112,7 +2261,7 @@ type TMDataGridTableProps<TData extends RowData> = {
|
|
|
2112
2261
|
/** As {@link onCellClick}; a double-click that opens an editor still does. */
|
|
2113
2262
|
onCellDoubleClick?: (args: TMDataGridCellEventArgs<TData>) => void;
|
|
2114
2263
|
/**
|
|
2115
|
-
* As {@link onCellClick}; `
|
|
2264
|
+
* As {@link onCellClick}; `renderRowContextMenu` and the cell-selection menu still
|
|
2116
2265
|
* open. To suppress the browser's own menu on a grid with neither, call
|
|
2117
2266
|
* `event.preventDefault()` here.
|
|
2118
2267
|
*/
|
|
@@ -2174,7 +2323,7 @@ type TMDataGridTableProps<TData extends RowData> = {
|
|
|
2174
2323
|
*
|
|
2175
2324
|
* ```tsx
|
|
2176
2325
|
* <TMDataGrid.Table<Employee>
|
|
2177
|
-
*
|
|
2326
|
+
* renderRowContextMenu={({ row, close }) => (
|
|
2178
2327
|
* <>
|
|
2179
2328
|
* <Menu.Label>{row.original.firstName}</Menu.Label>
|
|
2180
2329
|
* <Menu.Item onClick={() => open(row.original.id)}>Open</Menu.Item>
|
|
@@ -2187,10 +2336,33 @@ type TMDataGridTableProps<TData extends RowData> = {
|
|
|
2187
2336
|
* />
|
|
2188
2337
|
* ```
|
|
2189
2338
|
*
|
|
2339
|
+
* `internalItems` is the grid's own half - place it to control the order,
|
|
2340
|
+
* ignore it and the grid keeps its items above a divider and yours below.
|
|
2341
|
+
*
|
|
2190
2342
|
* Called during render, and only for the row whose menu is open - so it stays
|
|
2191
2343
|
* a pure function of the row, and cost per row does not matter.
|
|
2192
2344
|
*/
|
|
2193
|
-
|
|
2345
|
+
renderRowContextMenu?: TMDataGridRowContextMenuRenderer<TData>;
|
|
2346
|
+
/**
|
|
2347
|
+
* Replaces a column menu's contents, taking the grid's own items and
|
|
2348
|
+
* returning the full list.
|
|
2349
|
+
*
|
|
2350
|
+
* ```tsx
|
|
2351
|
+
* <TMDataGrid.Table
|
|
2352
|
+
* renderColumnMenuItems={({ column, internalItems }) => [
|
|
2353
|
+
* ...internalItems,
|
|
2354
|
+
* <Menu.Divider key="custom" />,
|
|
2355
|
+
* <Menu.Item key="stats" onClick={() => showStats(column.id)}>
|
|
2356
|
+
* Statistics
|
|
2357
|
+
* </Menu.Item>,
|
|
2358
|
+
* ]}
|
|
2359
|
+
* />
|
|
2360
|
+
* ```
|
|
2361
|
+
*
|
|
2362
|
+
* Returning an empty list leaves the column with no menu button, the same as
|
|
2363
|
+
* a column whose every feature is switched off.
|
|
2364
|
+
*/
|
|
2365
|
+
renderColumnMenuItems?: TMDataGridColumnMenuItemsRenderer;
|
|
2194
2366
|
/**
|
|
2195
2367
|
* Passed to the Mantine `Menu` the grid wraps the row in - `width`, `shadow`,
|
|
2196
2368
|
* `position`, `transitionProps` and the rest. Its open state is the grid's.
|
|
@@ -2236,7 +2408,7 @@ type TMDataGridTableProps<TData extends RowData> = {
|
|
|
2236
2408
|
* no-pagination mode viable at any row count. Pagination is opt-in via
|
|
2237
2409
|
* `enablePagination` (or implied by `manualPagination`).
|
|
2238
2410
|
*/
|
|
2239
|
-
declare function TMDataGridTable$1<TData extends RowData = TMDataGridRowData>({ onRowClick, onCellClick, onCellDoubleClick, onCellContextMenu, rowClassName, rowStyle, striped, onScrollToTop, onScrollToBottom, onScrollToLeft, onScrollToRight, renderEmptyState,
|
|
2411
|
+
declare function TMDataGridTable$1<TData extends RowData = TMDataGridRowData>({ onRowClick, onCellClick, onCellDoubleClick, onCellContextMenu, rowClassName, rowStyle, striped, onScrollToTop, onScrollToBottom, onScrollToLeft, onScrollToRight, renderEmptyState, renderRowContextMenu, renderColumnMenuItems, rowContextMenuProps, cellExport, onReachEnd, reachEndThreshold, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }: TMDataGridTableProps<TData>): import("react").JSX.Element;
|
|
2240
2412
|
//#endregion
|
|
2241
2413
|
//#region .types-tmp/components/TMDataGridToolbar.d.ts
|
|
2242
2414
|
/** Row above the grid. Compose it from the pieces below, or anything else. */
|
|
@@ -2779,4 +2951,4 @@ declare function getSelectableRowIds<TData extends RowData>(row: Row<TMDataGridF
|
|
|
2779
2951
|
*/
|
|
2780
2952
|
declare function resolveRowSelectionClick<TData extends RowData>({ rows, rowId, anchorRowId, modifiers, selection, canReplaceSelection }: ResolveRowSelectionClickArgs<TData>): ResolvedRowSelection;
|
|
2781
2953
|
//#endregion
|
|
2782
|
-
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 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 TMDataGridColumnLayout, type TMDataGridColumnMeta, type TMDataGridColumnRegion, type TMDataGridColumnType, type TMDataGridContextValue, type TMDataGridDataSlice, TMDataGridDateEditor, type TMDataGridDetailsArgs, type TMDataGridDetailsRenderer, type TMDataGridDropSide, TMDataGridEditActions, type TMDataGridEditApi, type TMDataGridEditChange, type TMDataGridEditCommitArgs, type TMDataGridEditCommitBatchArgs, type TMDataGridEditField, type TMDataGridEditMode, type TMDataGridEditRowProjection, type TMDataGridEditState, 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, TMDataGridMultiSelectEditor, TMDataGridNumberEditor, type TMDataGridOption, type TMDataGridOptionsArgs, type TMDataGridOptionsSource, type TMDataGridPaginationApi, type TMDataGridPersistKey, type TMDataGridPersistence, type TMDataGridProps, type TMDataGridQuickSearchMode, type TMDataGridRangeBounds, type TMDataGridRowAddArgs, type TMDataGridRowClickModifiers, type
|
|
2954
|
+
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 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 TMDataGridColumnLayout, type TMDataGridColumnMenuItemsArgs, type TMDataGridColumnMenuItemsRenderer, type TMDataGridColumnMeta, type TMDataGridColumnRegion, type TMDataGridColumnType, type TMDataGridContextValue, type TMDataGridDataSlice, TMDataGridDateEditor, type TMDataGridDetailsArgs, type TMDataGridDetailsRenderer, type TMDataGridDropSide, TMDataGridEditActions, type TMDataGridEditActionsActions, type TMDataGridEditActionsControls, type TMDataGridEditActionsProps, type TMDataGridEditActionsSlotArgs, type TMDataGridEditActionsState, type TMDataGridEditApi, type TMDataGridEditChange, type TMDataGridEditCommitArgs, type TMDataGridEditCommitBatchArgs, type TMDataGridEditField, type TMDataGridEditMode, type TMDataGridEditRowProjection, type TMDataGridEditState, 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, 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 TMDataGridScrollAlign, type TMDataGridScrollToRowArgs, TMDataGridSearch, type TMDataGridSearchProps, TMDataGridSelectEditor, type TMDataGridSelectionMode, type TMDataGridSettingsSlice, type TMDataGridSize, type TMDataGridStorageMode, TMDataGridStringEditor, type TMDataGridTable, type TMDataGridTableMeta, type TMDataGridTableProps, 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, getColumnLabel, getColumnRegion, getColumnType, getDefaultOperator, getDisplayedRows, getEditFieldName, getGridCapabilities, getGroupDataRows, getOperatorsForType, getSelectableRowIds, getStepTargetColumn, getTMDataGridPaginationApi, isColumnReorderable, isControlColumn, isFilterActive, isPagingActive, isSameCell, isWithinBounds, measureColumnContentWidth, mergeLabels, moveColumn, moveColumnByStep, normalizeFieldValidate, openColumnFilter, operatorNeedsValue, operatorTakesArrayValue, operatorTakesRangeValue, optionsToComboboxData, readFeatureFlags, resolveCellMove, resolveColumnOptions, resolveExpandAll, resolveRangeBounds, resolveRowSelectionClick, tmDataGridFeatures, toClipboardText, toExcelCsv, useCellControlTabIndex, useTMDataGrid, useTMDataGridContext, writeClipboardText };
|