@pretable/react 0.0.1 → 0.0.2
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/LICENSE +21 -0
- package/README.md +50 -0
- package/dist/index.cjs +1605 -200
- package/dist/index.d.cts +316 -67
- package/dist/index.d.ts +316 -67
- package/dist/index.mjs +1603 -200
- package/package.json +23 -7
package/dist/index.d.ts
CHANGED
|
@@ -1,15 +1,44 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { PretableRow, PretableColumn,
|
|
3
|
-
export {
|
|
4
|
-
import {
|
|
2
|
+
import { PretableRow, PretableColumn as PretableColumn$1, PretableFormatInput, PretableFocusState, PretableSelectionState, PretableSortState, PretableGrid, PretableGridSnapshot, AutosizeOptions, PretableGridOptions, PretableCellRange, PretableVisibleRow, PretableSortDirection } from '@pretable/core';
|
|
3
|
+
export { PretableFormatInput, PretableGrid, PretableGridOptions, PretableGridSnapshot, PretableRow } from '@pretable/core';
|
|
4
|
+
import { ReactNode, HTMLAttributes, CSSProperties } from 'react';
|
|
5
|
+
import { DensityHeights } from '@pretable/ui';
|
|
6
|
+
export { DensityHeights } from '@pretable/ui';
|
|
5
7
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
/**
|
|
9
|
+
* React-extended column definition. Adds the `render` and `renderHeader` JSX-typed callbacks on top of `@pretable/core`'s base column.
|
|
10
|
+
*
|
|
11
|
+
* @public
|
|
12
|
+
*/
|
|
13
|
+
interface PretableColumn<TRow extends PretableRow = PretableRow> extends PretableColumn$1<TRow> {
|
|
14
|
+
render?: (input: PretableCellRenderInput<TRow>) => ReactNode;
|
|
15
|
+
renderHeader?: (input: PretableHeaderRenderInput<TRow>) => ReactNode;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Input passed to a column's `render` function.
|
|
19
|
+
*
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
interface PretableCellRenderInput<TRow extends PretableRow = PretableRow> extends PretableFormatInput<TRow> {
|
|
23
|
+
formattedValue: string;
|
|
24
|
+
rowId: string;
|
|
25
|
+
rowIndex: number;
|
|
26
|
+
isFocused: boolean;
|
|
27
|
+
isSelected: boolean;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Input passed to a column's `renderHeader` function.
|
|
31
|
+
*
|
|
32
|
+
* @public
|
|
33
|
+
*/
|
|
34
|
+
interface PretableHeaderRenderInput<TRow extends PretableRow = PretableRow> {
|
|
35
|
+
column: PretableColumn<TRow>;
|
|
36
|
+
label: string;
|
|
37
|
+
sortDirection: "asc" | "desc" | null;
|
|
38
|
+
isSorted: boolean;
|
|
10
39
|
}
|
|
11
|
-
declare function Pretable<TRow extends PretableRow = PretableRow>({ columns, getRowId, rows, }: PretableProps<TRow>): react_jsx_runtime.JSX.Element;
|
|
12
40
|
|
|
41
|
+
/** @internal */
|
|
13
42
|
interface PlannedColumn {
|
|
14
43
|
index: number;
|
|
15
44
|
id: string;
|
|
@@ -18,12 +47,11 @@ interface PlannedColumn {
|
|
|
18
47
|
pinned?: "left";
|
|
19
48
|
}
|
|
20
49
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
50
|
+
/**
|
|
51
|
+
* One row of layout-derived render state for use during custom rendering.
|
|
52
|
+
*
|
|
53
|
+
* @public
|
|
54
|
+
*/
|
|
27
55
|
interface PretableRenderRow<TRow extends PretableRow = PretableRow> {
|
|
28
56
|
id: string;
|
|
29
57
|
row: TRow;
|
|
@@ -31,6 +59,13 @@ interface PretableRenderRow<TRow extends PretableRow = PretableRow> {
|
|
|
31
59
|
top: number;
|
|
32
60
|
height: number;
|
|
33
61
|
}
|
|
62
|
+
/**
|
|
63
|
+
* Layout-derived render snapshot returned by {@link usePretable}. Drives
|
|
64
|
+
* positioned-cell rendering — every column has a left + width, every visible
|
|
65
|
+
* row has a top + height.
|
|
66
|
+
*
|
|
67
|
+
* @public
|
|
68
|
+
*/
|
|
34
69
|
interface PretableRenderSnapshot<TRow extends PretableRow = PretableRow> {
|
|
35
70
|
columns: PlannedColumn[];
|
|
36
71
|
rows: PretableRenderRow<TRow>[];
|
|
@@ -38,6 +73,12 @@ interface PretableRenderSnapshot<TRow extends PretableRow = PretableRow> {
|
|
|
38
73
|
totalHeight: number;
|
|
39
74
|
totalWidth: number;
|
|
40
75
|
}
|
|
76
|
+
/**
|
|
77
|
+
* Telemetry numbers about the current render — counts and ranges suitable
|
|
78
|
+
* for status bars, dev panels, or virtualization debugging.
|
|
79
|
+
*
|
|
80
|
+
* @public
|
|
81
|
+
*/
|
|
41
82
|
interface PretableTelemetry {
|
|
42
83
|
focusedRowId: string | null;
|
|
43
84
|
rowModelRowCount: number;
|
|
@@ -51,45 +92,146 @@ interface PretableTelemetry {
|
|
|
51
92
|
start: number;
|
|
52
93
|
};
|
|
53
94
|
}
|
|
54
|
-
|
|
95
|
+
/**
|
|
96
|
+
* **Input** shape for controlling a {@link PretableSurface} from the outside.
|
|
97
|
+
* Pass the slices you want to control; omit slices you want the grid to own.
|
|
98
|
+
*
|
|
99
|
+
* @public
|
|
100
|
+
*/
|
|
101
|
+
interface PretableSurfaceState {
|
|
55
102
|
filters?: Record<string, string>;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
sort?:
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
103
|
+
focus?: PretableFocusState;
|
|
104
|
+
selection?: PretableSelectionState;
|
|
105
|
+
sort?: PretableSortState | null;
|
|
106
|
+
columnWidths?: Record<string, number>;
|
|
107
|
+
columnOrder?: readonly string[];
|
|
108
|
+
columnPinned?: Record<string, "left" | null>;
|
|
62
109
|
}
|
|
63
|
-
|
|
110
|
+
/**
|
|
111
|
+
* Options for the {@link usePretable} hook.
|
|
112
|
+
*
|
|
113
|
+
* @public
|
|
114
|
+
*/
|
|
115
|
+
interface UsePretableOptions<TRow extends PretableRow = PretableRow> {
|
|
116
|
+
autosize?: boolean | AutosizeOptions;
|
|
117
|
+
columns: PretableColumn<TRow>[];
|
|
118
|
+
rows: TRow[];
|
|
119
|
+
getRowId?: PretableGridOptions<TRow>["getRowId"];
|
|
64
120
|
viewportHeight: number;
|
|
65
121
|
viewportWidth?: number;
|
|
66
122
|
overscan?: number;
|
|
67
|
-
|
|
123
|
+
state?: PretableSurfaceState | null;
|
|
68
124
|
measuredHeights?: Record<string, number>;
|
|
125
|
+
onSelectionChange?: (next: PretableSelectionState) => void;
|
|
126
|
+
onFocusChange?: (next: PretableFocusState) => void;
|
|
69
127
|
}
|
|
128
|
+
/**
|
|
129
|
+
* Output of the {@link usePretable} hook — a stable handle plus the latest
|
|
130
|
+
* snapshot, render layout, and telemetry.
|
|
131
|
+
*
|
|
132
|
+
* @public
|
|
133
|
+
*/
|
|
70
134
|
interface PretableModel<TRow extends PretableRow = PretableRow> {
|
|
71
135
|
grid: PretableGrid<TRow>;
|
|
72
136
|
snapshot: PretableGridSnapshot<TRow>;
|
|
73
137
|
renderSnapshot: PretableRenderSnapshot<TRow>;
|
|
74
138
|
telemetry: PretableTelemetry;
|
|
75
139
|
}
|
|
76
|
-
|
|
77
|
-
|
|
140
|
+
/**
|
|
141
|
+
* The primary React hook. Creates a grid, applies optional controlled state,
|
|
142
|
+
* and returns the latest snapshot, layout-derived render snapshot, and
|
|
143
|
+
* telemetry. Suitable for custom rendering — `<PretableSurface>` itself is
|
|
144
|
+
* built on top of this hook.
|
|
145
|
+
*
|
|
146
|
+
* @example
|
|
147
|
+
* ```tsx
|
|
148
|
+
* const { grid, snapshot, renderSnapshot, telemetry } = usePretable({
|
|
149
|
+
* columns,
|
|
150
|
+
* rows,
|
|
151
|
+
* viewportHeight: 480,
|
|
152
|
+
* });
|
|
153
|
+
* ```
|
|
154
|
+
*
|
|
155
|
+
* @public
|
|
156
|
+
*/
|
|
157
|
+
declare function usePretable<TRow extends PretableRow = PretableRow>({ autosize, columns, rows, getRowId, viewportHeight, viewportWidth, overscan, state, measuredHeights, onSelectionChange, onFocusChange, }: UsePretableOptions<TRow>): PretableModel<TRow>;
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* Reserved column id for the synthetic row-select checkbox column.
|
|
161
|
+
* Internal — surface authors shouldn't reference this directly.
|
|
162
|
+
*
|
|
163
|
+
* @internal
|
|
164
|
+
*/
|
|
165
|
+
declare const ROW_SELECT_COLUMN_ID = "__pretable_row_select__";
|
|
78
166
|
|
|
167
|
+
/**
|
|
168
|
+
* Input for {@link serializeRangesAsTsv}.
|
|
169
|
+
*
|
|
170
|
+
* @public
|
|
171
|
+
*/
|
|
172
|
+
interface SerializeRangesArgs<TRow extends PretableRow> {
|
|
173
|
+
ranges: readonly PretableCellRange[];
|
|
174
|
+
visibleRows: readonly PretableVisibleRow<TRow>[];
|
|
175
|
+
columns: readonly PretableColumn<TRow>[];
|
|
176
|
+
copyWithHeaders?: boolean;
|
|
177
|
+
}
|
|
178
|
+
/**
|
|
179
|
+
* Plain-text + HTML pair returned by clipboard serializers and consumed by `onCopy` / `copyToClipboard` props.
|
|
180
|
+
*
|
|
181
|
+
* @public
|
|
182
|
+
*/
|
|
183
|
+
interface CopyPayload {
|
|
184
|
+
text: string;
|
|
185
|
+
html?: string;
|
|
186
|
+
}
|
|
187
|
+
/**
|
|
188
|
+
* Default coerce-value-to-string used during clipboard serialization. Useful as a fallback inside custom serializers.
|
|
189
|
+
*
|
|
190
|
+
* @public
|
|
191
|
+
*/
|
|
192
|
+
declare function defaultCoerceForCopy(value: unknown): string;
|
|
193
|
+
/**
|
|
194
|
+
* Serialize one or more `PretableCellRange`s to a tab-separated text + HTML payload suitable for clipboard write.
|
|
195
|
+
*
|
|
196
|
+
* @public
|
|
197
|
+
*/
|
|
198
|
+
declare function serializeRangesAsTsv<TRow extends PretableRow>(args: SerializeRangesArgs<TRow>): CopyPayload | null;
|
|
199
|
+
|
|
200
|
+
/**
|
|
201
|
+
* Configuration for the synthetic row-select column rendered by {@link PretableSurface} when `rowSelectionColumn` is enabled.
|
|
202
|
+
*
|
|
203
|
+
* @public
|
|
204
|
+
*/
|
|
205
|
+
interface RowSelectionColumnConfig {
|
|
206
|
+
enabled: true;
|
|
207
|
+
position?: "left";
|
|
208
|
+
pinned?: boolean;
|
|
209
|
+
headerCheckbox?: boolean;
|
|
210
|
+
width?: number;
|
|
211
|
+
}
|
|
212
|
+
/**
|
|
213
|
+
* Localizable user-facing strings rendered by {@link PretableSurface}. Pass to override the English defaults.
|
|
214
|
+
*
|
|
215
|
+
* @public
|
|
216
|
+
*/
|
|
217
|
+
interface PretableSurfaceMessages {
|
|
218
|
+
selectAllAnnouncement?: (args: {
|
|
219
|
+
rowCount: number;
|
|
220
|
+
columnCount: number;
|
|
221
|
+
isAll: boolean;
|
|
222
|
+
}) => string;
|
|
223
|
+
copyAnnouncement?: (args: {
|
|
224
|
+
rowCount: number;
|
|
225
|
+
columnCount: number;
|
|
226
|
+
}) => string;
|
|
227
|
+
copyFailedAnnouncement?: () => string;
|
|
228
|
+
}
|
|
79
229
|
interface PretableSurfaceHeaderCellRenderInput<TRow extends PretableRow = PretableRow> {
|
|
80
230
|
column: PretableColumn<TRow>;
|
|
81
231
|
label: string;
|
|
82
232
|
sortDirection: "asc" | "desc" | null;
|
|
83
233
|
}
|
|
84
|
-
|
|
85
|
-
column: PretableColumn<TRow>;
|
|
86
|
-
isFocused: boolean;
|
|
87
|
-
isSelected: boolean;
|
|
88
|
-
row: TRow;
|
|
89
|
-
rowId: string;
|
|
90
|
-
rowIndex: number;
|
|
91
|
-
value: unknown;
|
|
92
|
-
}
|
|
234
|
+
type PretableSurfaceBodyCellRenderInput<TRow extends PretableRow = PretableRow> = PretableCellRenderInput<TRow>;
|
|
93
235
|
interface PretableSurfaceRowClassNameInput<TRow extends PretableRow = PretableRow> {
|
|
94
236
|
isFocused: boolean;
|
|
95
237
|
isSelected: boolean;
|
|
@@ -111,15 +253,11 @@ interface PretableSurfaceRowAttributesInput<TRow extends PretableRow = PretableR
|
|
|
111
253
|
rowId: string;
|
|
112
254
|
rowIndex: number;
|
|
113
255
|
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
columnId: string;
|
|
120
|
-
direction: "asc" | "desc";
|
|
121
|
-
} | null;
|
|
122
|
-
}
|
|
256
|
+
/**
|
|
257
|
+
* Props for {@link PretableSurface}.
|
|
258
|
+
*
|
|
259
|
+
* @public
|
|
260
|
+
*/
|
|
123
261
|
interface PretableSurfaceProps<TRow extends PretableRow = PretableRow> {
|
|
124
262
|
ariaLabel: string;
|
|
125
263
|
autosize?: boolean | AutosizeOptions;
|
|
@@ -138,24 +276,94 @@ interface PretableSurfaceProps<TRow extends PretableRow = PretableRow> {
|
|
|
138
276
|
* by the bench harness for plan replay; exposed for advanced consumers
|
|
139
277
|
* who need to drive the grid from external state. Shape may change
|
|
140
278
|
* across minor releases.
|
|
279
|
+
*
|
|
280
|
+
* Each slice ({@link PretableSurfaceState.sort}, `filters`, `selection`,
|
|
281
|
+
* `focus`) follows the same controlled/uncontrolled pattern: when a slice
|
|
282
|
+
* is provided (non-undefined) the engine state is forced to it on every
|
|
283
|
+
* render; when a slice is undefined the engine owns it (uncontrolled).
|
|
141
284
|
*/
|
|
142
|
-
|
|
285
|
+
state?: PretableSurfaceState | null;
|
|
143
286
|
overscan?: number;
|
|
144
287
|
onSelectedRowIdChange?: (rowId: string | null) => void;
|
|
288
|
+
onSelectionChange?: (next: PretableSelectionState) => void;
|
|
289
|
+
onFocusChange?: (next: PretableFocusState) => void;
|
|
145
290
|
onSortChange?: (sort: {
|
|
146
291
|
columnId: string;
|
|
147
292
|
direction: "asc" | "desc";
|
|
148
293
|
} | null) => void;
|
|
294
|
+
onColumnWidthsChange?: (next: Record<string, number>) => void;
|
|
295
|
+
onColumnOrderChange?: (next: readonly string[]) => void;
|
|
296
|
+
onColumnPinnedChange?: (next: Record<string, "left" | null>) => void;
|
|
149
297
|
onTelemetryChange?: (telemetry: PretableTelemetry) => void;
|
|
150
298
|
onGridReady?: (grid: PretableGrid<TRow>) => void;
|
|
151
299
|
renderBodyCell?: (input: PretableSurfaceBodyCellRenderInput<TRow>) => ReactNode;
|
|
152
300
|
renderHeaderCell?: (input: PretableSurfaceHeaderCellRenderInput<TRow>) => ReactNode;
|
|
153
301
|
rows: TRow[];
|
|
302
|
+
rowSelectionColumn?: RowSelectionColumnConfig;
|
|
154
303
|
selectFocusedRowOnArrowKey?: boolean;
|
|
304
|
+
/**
|
|
305
|
+
* Tab key behavior. Default `"wrap-rows"` matches Grid Alpha / Sheets — Tab
|
|
306
|
+
* moves focus right and wraps to the next row's first cell at row end;
|
|
307
|
+
* Shift+Tab wraps backward. `"exit"` lets the browser handle Tab so focus
|
|
308
|
+
* leaves the grid (strict ARIA grid pattern).
|
|
309
|
+
*/
|
|
310
|
+
tabBehavior?: "wrap-rows" | "exit";
|
|
155
311
|
viewportStyle?: CSSProperties;
|
|
156
312
|
viewportHeight: number;
|
|
313
|
+
/**
|
|
314
|
+
* When true, Cmd/Ctrl+C copy emits a header row (followed by a blank line)
|
|
315
|
+
* before the selected rows in each range block. Defaults to `false`.
|
|
316
|
+
*/
|
|
317
|
+
copyWithHeaders?: boolean;
|
|
318
|
+
/**
|
|
319
|
+
* Override the TSV serialization step. Receives the args that would be
|
|
320
|
+
* passed to {@link serializeRangesAsTsv}; returning `null` cancels the copy.
|
|
321
|
+
*/
|
|
322
|
+
onCopy?: (args: SerializeRangesArgs<TRow>) => CopyPayload | null;
|
|
323
|
+
/**
|
|
324
|
+
* Override the clipboard write step. Defaults to writing
|
|
325
|
+
* `payload.text` (and `payload.html` if present) via `navigator.clipboard`.
|
|
326
|
+
*/
|
|
327
|
+
copyToClipboard?: (payload: CopyPayload) => void | Promise<void>;
|
|
328
|
+
/**
|
|
329
|
+
* Localized message factories for ARIA live announcements (select-all,
|
|
330
|
+
* copy success, copy failure). Each entry is optional; missing entries
|
|
331
|
+
* fall back to English defaults.
|
|
332
|
+
*/
|
|
333
|
+
messages?: PretableSurfaceMessages;
|
|
157
334
|
}
|
|
158
|
-
|
|
335
|
+
/**
|
|
336
|
+
* Controlled grid surface. The primary React component. Pass `state` to control any subset of sort/filter/selection/focus/column-layout from the outside; omit slices you want the grid to own.
|
|
337
|
+
*
|
|
338
|
+
* @public
|
|
339
|
+
*/
|
|
340
|
+
declare function PretableSurface<TRow extends PretableRow = PretableRow>({ ariaLabel, autosize, columns, getBodyCellClassName, getBodyCellProps, getHeaderCellClassName, getHeaderCellProps, getRowClassName, getRowId, getRowProps, state, overscan, onGridReady, onSelectedRowIdChange, onSelectionChange, onFocusChange, onSortChange, onColumnWidthsChange, onColumnOrderChange, onColumnPinnedChange, onTelemetryChange, renderBodyCell, renderHeaderCell, rows, rowSelectionColumn, selectFocusedRowOnArrowKey, tabBehavior, viewportStyle, viewportHeight, copyWithHeaders, onCopy, copyToClipboard, messages, }: PretableSurfaceProps<TRow>): react_jsx_runtime.JSX.Element;
|
|
341
|
+
|
|
342
|
+
/**
|
|
343
|
+
* Props for the {@link Pretable} drop-in component.
|
|
344
|
+
*
|
|
345
|
+
* @public
|
|
346
|
+
*/
|
|
347
|
+
interface PretableProps<TRow extends PretableRow = PretableRow> {
|
|
348
|
+
columns: PretableColumn<TRow>[];
|
|
349
|
+
getRowId?: PretableGridOptions<TRow>["getRowId"];
|
|
350
|
+
rows: TRow[];
|
|
351
|
+
rowSelectionColumn?: PretableSurfaceProps<TRow>["rowSelectionColumn"];
|
|
352
|
+
tabBehavior?: PretableSurfaceProps<TRow>["tabBehavior"];
|
|
353
|
+
copyWithHeaders?: PretableSurfaceProps<TRow>["copyWithHeaders"];
|
|
354
|
+
onCopy?: PretableSurfaceProps<TRow>["onCopy"];
|
|
355
|
+
copyToClipboard?: PretableSurfaceProps<TRow>["copyToClipboard"];
|
|
356
|
+
messages?: PretableSurfaceProps<TRow>["messages"];
|
|
357
|
+
onColumnWidthsChange?: PretableSurfaceProps<TRow>["onColumnWidthsChange"];
|
|
358
|
+
onColumnOrderChange?: PretableSurfaceProps<TRow>["onColumnOrderChange"];
|
|
359
|
+
onColumnPinnedChange?: PretableSurfaceProps<TRow>["onColumnPinnedChange"];
|
|
360
|
+
}
|
|
361
|
+
/**
|
|
362
|
+
* Drop-in pretable component. Wraps {@link PretableSurface} with internal state — pass `columns` and `rows` and you're done. Reach for `PretableSurface` when you need to control state from the outside.
|
|
363
|
+
*
|
|
364
|
+
* @public
|
|
365
|
+
*/
|
|
366
|
+
declare function Pretable<TRow extends PretableRow = PretableRow>({ columns, getRowId, rows, rowSelectionColumn, tabBehavior, copyWithHeaders, onCopy, copyToClipboard, messages, onColumnWidthsChange, onColumnOrderChange, onColumnPinnedChange, }: PretableProps<TRow>): react_jsx_runtime.JSX.Element;
|
|
159
367
|
|
|
160
368
|
type InspectionSeverity = "trace" | "info" | "warn" | "error";
|
|
161
369
|
interface InspectionRow extends Record<string, unknown> {
|
|
@@ -169,24 +377,55 @@ interface InspectionRow extends Record<string, unknown> {
|
|
|
169
377
|
}
|
|
170
378
|
type InspectionFilterableColumnId = "timestamp" | "severity" | "source" | "message";
|
|
171
379
|
|
|
380
|
+
/**
|
|
381
|
+
* Props for {@link InspectionGrid}.
|
|
382
|
+
*
|
|
383
|
+
* @beta
|
|
384
|
+
*/
|
|
172
385
|
interface InspectionGridProps {
|
|
173
386
|
ariaLabel: string;
|
|
174
387
|
filterableColumnIds: readonly InspectionFilterableColumnId[];
|
|
175
|
-
|
|
388
|
+
state?: PretableSurfaceProps<InspectionRow>["state"];
|
|
176
389
|
onSelectedRowIdChange?: (rowId: string | null) => void;
|
|
390
|
+
onSelectionChange?: PretableSurfaceProps<InspectionRow>["onSelectionChange"];
|
|
391
|
+
onFocusChange?: PretableSurfaceProps<InspectionRow>["onFocusChange"];
|
|
177
392
|
onSortChange?: PretableSurfaceProps<InspectionRow>["onSortChange"];
|
|
393
|
+
onColumnWidthsChange?: PretableSurfaceProps<InspectionRow>["onColumnWidthsChange"];
|
|
394
|
+
onColumnOrderChange?: PretableSurfaceProps<InspectionRow>["onColumnOrderChange"];
|
|
395
|
+
onColumnPinnedChange?: PretableSurfaceProps<InspectionRow>["onColumnPinnedChange"];
|
|
178
396
|
onTelemetryChange?: (telemetry: PretableTelemetry) => void;
|
|
179
397
|
overscan?: number;
|
|
180
398
|
rows: InspectionRow[];
|
|
399
|
+
rowSelectionColumn?: PretableSurfaceProps<InspectionRow>["rowSelectionColumn"];
|
|
400
|
+
tabBehavior?: PretableSurfaceProps<InspectionRow>["tabBehavior"];
|
|
401
|
+
copyWithHeaders?: PretableSurfaceProps<InspectionRow>["copyWithHeaders"];
|
|
402
|
+
onCopy?: PretableSurfaceProps<InspectionRow>["onCopy"];
|
|
403
|
+
copyToClipboard?: PretableSurfaceProps<InspectionRow>["copyToClipboard"];
|
|
404
|
+
messages?: PretableSurfaceProps<InspectionRow>["messages"];
|
|
181
405
|
viewportHeight: number;
|
|
182
406
|
}
|
|
183
|
-
|
|
407
|
+
/**
|
|
408
|
+
* Special-purpose inspection surface that renders rows as labeled key/value pairs. Experimental — shape may change before 1.0.
|
|
409
|
+
*
|
|
410
|
+
* @beta
|
|
411
|
+
*/
|
|
412
|
+
declare function InspectionGrid({ ariaLabel, filterableColumnIds, state, onSelectedRowIdChange, onSelectionChange, onFocusChange, onSortChange, onColumnWidthsChange, onColumnOrderChange, onColumnPinnedChange, onTelemetryChange, overscan, rows, rowSelectionColumn, tabBehavior, copyWithHeaders, onCopy, copyToClipboard, messages, viewportHeight, }: InspectionGridProps): react_jsx_runtime.JSX.Element;
|
|
184
413
|
|
|
414
|
+
/**
|
|
415
|
+
* Input passed to a {@link LabeledGridSurface} format function.
|
|
416
|
+
*
|
|
417
|
+
* @beta
|
|
418
|
+
*/
|
|
185
419
|
interface LabeledGridSurfaceFormatValueInput<TRow extends PretableRow = PretableRow> {
|
|
186
420
|
column: PretableColumn<TRow>;
|
|
187
421
|
row: TRow;
|
|
188
422
|
value: unknown;
|
|
189
423
|
}
|
|
424
|
+
/**
|
|
425
|
+
* Props for {@link LabeledGridSurface}.
|
|
426
|
+
*
|
|
427
|
+
* @beta
|
|
428
|
+
*/
|
|
190
429
|
interface LabeledGridSurfaceProps<TRow extends PretableRow = PretableRow> {
|
|
191
430
|
ariaLabel: string;
|
|
192
431
|
bodyCellClassName?: string;
|
|
@@ -195,46 +434,56 @@ interface LabeledGridSurfaceProps<TRow extends PretableRow = PretableRow> {
|
|
|
195
434
|
getBodyCellProps?: (input: LabeledGridSurfaceFormatValueInput<TRow>) => HTMLAttributes<HTMLDivElement> | undefined;
|
|
196
435
|
getHeaderCellProps?: (input: {
|
|
197
436
|
column: PretableColumn<TRow>;
|
|
198
|
-
sortDirection:
|
|
437
|
+
sortDirection: PretableSortDirection;
|
|
199
438
|
}) => HTMLAttributes<HTMLButtonElement> | undefined;
|
|
200
439
|
getRowId?: PretableGridOptions<TRow>["getRowId"];
|
|
201
440
|
headerCellClassName?: string;
|
|
202
|
-
|
|
441
|
+
state?: PretableSurfaceProps<TRow>["state"];
|
|
203
442
|
labelClassName?: string;
|
|
204
443
|
overscan?: number;
|
|
205
444
|
onSelectedRowIdChange?: (rowId: string | null) => void;
|
|
445
|
+
onSelectionChange?: PretableSurfaceProps<TRow>["onSelectionChange"];
|
|
446
|
+
onFocusChange?: PretableSurfaceProps<TRow>["onFocusChange"];
|
|
206
447
|
onSortChange?: PretableSurfaceProps<TRow>["onSortChange"];
|
|
448
|
+
onColumnWidthsChange?: PretableSurfaceProps<TRow>["onColumnWidthsChange"];
|
|
449
|
+
onColumnOrderChange?: PretableSurfaceProps<TRow>["onColumnOrderChange"];
|
|
450
|
+
onColumnPinnedChange?: PretableSurfaceProps<TRow>["onColumnPinnedChange"];
|
|
207
451
|
onTelemetryChange?: (telemetry: PretableTelemetry) => void;
|
|
208
452
|
pinnedClassName?: string;
|
|
209
453
|
rowClassName?: string;
|
|
210
454
|
rows: TRow[];
|
|
455
|
+
rowSelectionColumn?: PretableSurfaceProps<TRow>["rowSelectionColumn"];
|
|
211
456
|
selectFocusedRowOnArrowKey?: boolean;
|
|
457
|
+
tabBehavior?: PretableSurfaceProps<TRow>["tabBehavior"];
|
|
458
|
+
copyWithHeaders?: PretableSurfaceProps<TRow>["copyWithHeaders"];
|
|
459
|
+
onCopy?: PretableSurfaceProps<TRow>["onCopy"];
|
|
460
|
+
copyToClipboard?: PretableSurfaceProps<TRow>["copyToClipboard"];
|
|
461
|
+
messages?: PretableSurfaceProps<TRow>["messages"];
|
|
212
462
|
valueClassName?: string;
|
|
213
463
|
viewportHeight: number;
|
|
214
464
|
}
|
|
215
|
-
declare function LabeledGridSurface<TRow extends PretableRow = PretableRow>({ ariaLabel, bodyCellClassName, columns, formatValue, getBodyCellProps, getHeaderCellProps, getRowId, headerCellClassName, interactionState, labelClassName, overscan, onSelectedRowIdChange, onSortChange, onTelemetryChange, pinnedClassName, rowClassName, rows, selectFocusedRowOnArrowKey, valueClassName, viewportHeight, }: LabeledGridSurfaceProps<TRow>): react_jsx_runtime.JSX.Element;
|
|
216
|
-
type PretableSurfaceSortDirection = NonNullable<Parameters<NonNullable<PretableSurfaceProps["renderHeaderCell"]>>[0]["sortDirection"]> | null;
|
|
217
|
-
|
|
218
|
-
interface DensityHeights {
|
|
219
|
-
rowHeight: number;
|
|
220
|
-
headerHeight: number;
|
|
221
|
-
}
|
|
222
465
|
/**
|
|
223
|
-
*
|
|
224
|
-
* `[data-theme]`, `class`, or inline `style` change on `<html>`.
|
|
225
|
-
*
|
|
226
|
-
* Numeric props win when passed; otherwise CSS variables; otherwise fallbacks.
|
|
466
|
+
* Special-purpose surface for label/value-style table layouts. Experimental — shape may change before 1.0.
|
|
227
467
|
*
|
|
228
|
-
*
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
468
|
+
* @beta
|
|
469
|
+
*/
|
|
470
|
+
declare function LabeledGridSurface<TRow extends PretableRow = PretableRow>({ ariaLabel, bodyCellClassName, columns, formatValue, getBodyCellProps, getHeaderCellProps, getRowId, headerCellClassName, state, labelClassName, overscan, onSelectedRowIdChange, onSelectionChange, onFocusChange, onSortChange, onColumnWidthsChange, onColumnOrderChange, onColumnPinnedChange, onTelemetryChange, pinnedClassName, rowClassName, rows, rowSelectionColumn, selectFocusedRowOnArrowKey, tabBehavior, copyWithHeaders, onCopy, copyToClipboard, messages, valueClassName, viewportHeight, }: LabeledGridSurfaceProps<TRow>): react_jsx_runtime.JSX.Element;
|
|
471
|
+
|
|
472
|
+
/**
|
|
473
|
+
* React hook returning the current density heights derived from the
|
|
474
|
+
* active CSS theme. Internal — `<Pretable>` and `<PretableSurface>` use
|
|
475
|
+
* this; external consumers should reach for `getDensityHeights` from
|
|
476
|
+
* `@pretable/ui`.
|
|
233
477
|
*
|
|
234
|
-
*
|
|
478
|
+
* @internal
|
|
235
479
|
*/
|
|
236
480
|
declare function useResolvedHeights(rowHeightProp?: number, headerHeightProp?: number): DensityHeights;
|
|
237
481
|
|
|
482
|
+
/**
|
|
483
|
+
* DOM measurement helper used internally by the surface's row-height accounting. Not part of the user-facing API.
|
|
484
|
+
*
|
|
485
|
+
* @internal
|
|
486
|
+
*/
|
|
238
487
|
declare function measureRenderedRowHeight(row: HTMLElement): number;
|
|
239
488
|
|
|
240
|
-
export { type
|
|
489
|
+
export { type CopyPayload, InspectionGrid, type InspectionGridProps, LabeledGridSurface, type LabeledGridSurfaceFormatValueInput, type LabeledGridSurfaceProps, Pretable, type PretableCellRenderInput, type PretableColumn, type PretableHeaderRenderInput, type PretableModel, type PretableProps, type PretableRenderRow, type PretableRenderSnapshot, PretableSurface, type PretableSurfaceMessages, type PretableSurfaceProps, type PretableSurfaceState, type PretableTelemetry, type RowSelectionColumnConfig, type SerializeRangesArgs, type UsePretableOptions, defaultCoerceForCopy, serializeRangesAsTsv, usePretable, ROW_SELECT_COLUMN_ID as ɵROW_SELECT_COLUMN_ID, measureRenderedRowHeight as ɵmeasureRenderedRowHeight, useResolvedHeights as ɵuseResolvedHeights };
|