1 |
|
2 |
|
3 | import { JSX as JSX_2 } from 'react/jsx-runtime';
|
4 | import type { Key } from 'react';
|
5 | import { Provider } from 'react';
|
6 | import type { ReactElement } from 'react';
|
7 | import { ReactNode } from 'react';
|
8 | import { RefAttributes } from 'react';
|
9 |
|
10 | declare interface BaseRenderRowProps<TRow, TSummaryRow = unknown> extends Omit_2<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'>, Pick<DataGridProps<TRow, TSummaryRow>, 'onCellClick' | 'onCellDoubleClick' | 'onCellContextMenu'> {
|
11 | viewportColumns: readonly CalculatedColumn<TRow, TSummaryRow>[];
|
12 | rowIdx: number;
|
13 | selectedCellIdx: number | undefined;
|
14 | isRowSelected: boolean;
|
15 | gridRowStart: number;
|
16 | height: number;
|
17 | selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
|
18 | }
|
19 |
|
20 | export declare interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
|
21 | readonly parent: CalculatedColumnParent<TRow, TSummaryRow> | undefined;
|
22 | readonly idx: number;
|
23 | readonly level: number;
|
24 | readonly width: number | string;
|
25 | readonly minWidth: number;
|
26 | readonly maxWidth: number | undefined;
|
27 | readonly resizable: boolean;
|
28 | readonly sortable: boolean;
|
29 | readonly draggable: boolean;
|
30 | readonly frozen: boolean;
|
31 | readonly renderCell: (props: RenderCellProps<TRow, TSummaryRow>) => ReactNode;
|
32 | }
|
33 |
|
34 | export declare type CalculatedColumnOrColumnGroup<R, SR> = CalculatedColumnParent<R, SR> | CalculatedColumn<R, SR>;
|
35 |
|
36 | export declare interface CalculatedColumnParent<R, SR> {
|
37 | readonly name: string | ReactElement;
|
38 | readonly parent: CalculatedColumnParent<R, SR> | undefined;
|
39 | readonly idx: number;
|
40 | readonly colSpan: number;
|
41 | readonly level: number;
|
42 | readonly headerCellClass?: Maybe<string>;
|
43 | }
|
44 |
|
45 | export declare interface CellClickArgs<TRow, TSummaryRow = unknown> {
|
46 | row: TRow;
|
47 | column: CalculatedColumn<TRow, TSummaryRow>;
|
48 | selectCell: (enableEditor?: boolean) => void;
|
49 | }
|
50 |
|
51 | declare type CellEvent<E extends React.SyntheticEvent<HTMLDivElement>> = E & {
|
52 | preventGridDefault: () => void;
|
53 | isGridDefaultPrevented: () => boolean;
|
54 | };
|
55 |
|
56 | export declare type CellKeyboardEvent = CellEvent<React.KeyboardEvent<HTMLDivElement>>;
|
57 |
|
58 | export declare type CellKeyDownArgs<TRow, TSummaryRow = unknown> = SelectCellKeyDownArgs<TRow, TSummaryRow> | EditCellKeyDownArgs<TRow, TSummaryRow>;
|
59 |
|
60 | export declare type CellMouseEvent = CellEvent<React.MouseEvent<HTMLDivElement>>;
|
61 |
|
62 | export declare interface CellRendererProps<TRow, TSummaryRow> extends Pick<RenderRowProps<TRow, TSummaryRow>, 'row' | 'rowIdx' | 'selectCell'>, Omit_2<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children' | 'onClick' | 'onDoubleClick' | 'onContextMenu'> {
|
63 | column: CalculatedColumn<TRow, TSummaryRow>;
|
64 | colSpan: number | undefined;
|
65 | isCopied: boolean;
|
66 | isDraggedOver: boolean;
|
67 | isCellSelected: boolean;
|
68 | onClick: RenderRowProps<TRow, TSummaryRow>['onCellClick'];
|
69 | onDoubleClick: RenderRowProps<TRow, TSummaryRow>['onCellDoubleClick'];
|
70 | onContextMenu: RenderRowProps<TRow, TSummaryRow>['onCellContextMenu'];
|
71 | onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, newRow: TRow) => void;
|
72 | }
|
73 |
|
74 | export declare interface CellSelectArgs<TRow, TSummaryRow = unknown> {
|
75 | rowIdx: number;
|
76 | row: TRow;
|
77 | column: CalculatedColumn<TRow, TSummaryRow>;
|
78 | }
|
79 |
|
80 | export declare type ColSpanArgs<TRow, TSummaryRow> = {
|
81 | type: 'HEADER';
|
82 | } | {
|
83 | type: 'ROW';
|
84 | row: TRow;
|
85 | } | {
|
86 | type: 'SUMMARY';
|
87 | row: TSummaryRow;
|
88 | };
|
89 |
|
90 | export declare interface Column<TRow, TSummaryRow = unknown> {
|
91 |
|
92 | readonly name: string | ReactElement;
|
93 |
|
94 | readonly key: string;
|
95 |
|
96 | readonly width?: Maybe<number | string>;
|
97 |
|
98 | readonly minWidth?: Maybe<number>;
|
99 |
|
100 | readonly maxWidth?: Maybe<number>;
|
101 | readonly cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>;
|
102 | readonly headerCellClass?: Maybe<string>;
|
103 | readonly summaryCellClass?: Maybe<string | ((row: TSummaryRow) => Maybe<string>)>;
|
104 | /** Render function used to render the content of the column's header cell */
|
105 | readonly renderHeaderCell?: Maybe<(props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode>;
|
106 |
|
107 | readonly renderCell?: Maybe<(props: RenderCellProps<TRow, TSummaryRow>) => ReactNode>;
|
108 |
|
109 | readonly renderSummaryCell?: Maybe<(props: RenderSummaryCellProps<TSummaryRow, TRow>) => ReactNode>;
|
110 |
|
111 | readonly renderGroupCell?: Maybe<(props: RenderGroupCellProps<TRow, TSummaryRow>) => ReactNode>;
|
112 |
|
113 | readonly renderEditCell?: Maybe<(props: RenderEditCellProps<TRow, TSummaryRow>) => ReactNode>;
|
114 |
|
115 | readonly editable?: Maybe<boolean | ((row: TRow) => boolean)>;
|
116 | readonly colSpan?: Maybe<(args: ColSpanArgs<TRow, TSummaryRow>) => Maybe<number>>;
|
117 |
|
118 | readonly frozen?: Maybe<boolean>;
|
119 |
|
120 | readonly resizable?: Maybe<boolean>;
|
121 |
|
122 | readonly sortable?: Maybe<boolean>;
|
123 |
|
124 | readonly draggable?: Maybe<boolean>;
|
125 |
|
126 | readonly sortDescendingFirst?: Maybe<boolean>;
|
127 | readonly editorOptions?: Maybe<{
|
128 | |
129 |
|
130 |
|
131 |
|
132 |
|
133 |
|
134 | readonly displayCellContent?: Maybe<boolean>;
|
135 |
|
136 | readonly commitOnOutsideClick?: Maybe<boolean>;
|
137 | }>;
|
138 | }
|
139 |
|
140 | export declare interface ColumnGroup<R, SR = unknown> {
|
141 |
|
142 | readonly name: string | ReactElement;
|
143 | readonly headerCellClass?: Maybe<string>;
|
144 | readonly children: readonly ColumnOrColumnGroup<R, SR>[];
|
145 | }
|
146 |
|
147 | export declare type ColumnOrColumnGroup<R, SR = unknown> = Column<R, SR> | ColumnGroup<R, SR>;
|
148 |
|
149 | export declare interface CopyEvent<TRow> {
|
150 | sourceColumnKey: string;
|
151 | sourceRow: TRow;
|
152 | }
|
153 |
|
154 | export declare const DataGridDefaultRenderersProvider: Provider<Maybe<Renderers<any, any>>>;
|
155 |
|
156 | export declare interface DataGridHandle {
|
157 | element: HTMLDivElement | null;
|
158 | scrollToCell: (position: PartialPosition) => void;
|
159 | selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
|
160 | }
|
161 |
|
162 | export declare interface DataGridProps<R, SR = unknown, K extends Key = Key> extends SharedDivProps {
|
163 | |
164 |
|
165 |
|
166 |
|
167 | columns: readonly ColumnOrColumnGroup<R, SR>[];
|
168 |
|
169 | rows: readonly R[];
|
170 | |
171 |
|
172 |
|
173 | topSummaryRows?: Maybe<readonly SR[]>;
|
174 | |
175 |
|
176 |
|
177 | bottomSummaryRows?: Maybe<readonly SR[]>;
|
178 |
|
179 | rowKeyGetter?: Maybe<(row: R) => K>;
|
180 | onRowsChange?: Maybe<(rows: R[], data: RowsChangeData<R, SR>) => void>;
|
181 | |
182 |
|
183 |
|
184 | |
185 |
|
186 |
|
187 |
|
188 | rowHeight?: Maybe<number | ((row: R) => number)>;
|
189 | /**
|
190 | * The height of the header row in pixels
|
191 | * @default 35
|
192 | */
|
193 | headerRowHeight?: Maybe<number>;
|
194 | /**
|
195 | * The height of each summary row in pixels
|
196 | * @default 35
|
197 | */
|
198 | summaryRowHeight?: Maybe<number>;
|
199 | /**
|
200 | * Feature props
|
201 | */
|
202 | /** Set of selected row keys */
|
203 | selectedRows?: Maybe<ReadonlySet<K>>;
|
204 | /** Function called whenever row selection is changed */
|
205 | onSelectedRowsChange?: Maybe<(selectedRows: Set<K>) => void>;
|
206 |
|
207 | sortColumns?: Maybe<readonly SortColumn[]>;
|
208 | onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>;
|
209 | defaultColumnOptions?: Maybe<DefaultColumnOptions<R, SR>>;
|
210 | onFill?: Maybe<(event: FillEvent<R>) => R>;
|
211 | onCopy?: Maybe<(event: CopyEvent<R>) => void>;
|
212 | onPaste?: Maybe<(event: PasteEvent<R>) => R>;
|
213 | |
214 |
|
215 |
|
216 |
|
217 | onCellClick?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>;
|
218 |
|
219 | onCellDoubleClick?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>;
|
220 |
|
221 | onCellContextMenu?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>;
|
222 | onCellKeyDown?: Maybe<(args: CellKeyDownArgs<R, SR>, event: CellKeyboardEvent) => void>;
|
223 |
|
224 | onSelectedCellChange?: Maybe<(args: CellSelectArgs<R, SR>) => void>;
|
225 |
|
226 | onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>;
|
227 |
|
228 | onColumnResize?: Maybe<(idx: number, width: number) => void>;
|
229 |
|
230 | onColumnsReorder?: Maybe<(sourceColumnKey: string, targetColumnKey: string) => void>;
|
231 | |
232 |
|
233 |
|
234 |
|
235 | enableVirtualization?: Maybe<boolean>;
|
236 | |
237 |
|
238 |
|
239 | renderers?: Maybe<Renderers<R, SR>>;
|
240 | rowClass?: Maybe<(row: R, rowIdx: number) => Maybe<string>>;
|
241 |
|
242 | direction?: Maybe<Direction>;
|
243 | 'data-testid'?: Maybe<string>;
|
244 | }
|
245 |
|
246 | declare const _default: <R, SR = unknown, K extends Key = Key>(props: DataGridProps<R, SR, K> & RefAttributes<DataGridHandle>) => JSX.Element;
|
247 | export default _default;
|
248 |
|
249 | declare type DefaultColumnOptions<R, SR> = Pick<Column<R, SR>, 'renderCell' | 'width' | 'minWidth' | 'maxWidth' | 'resizable' | 'sortable' | 'draggable'>;
|
250 |
|
251 | declare type Direction = 'ltr' | 'rtl';
|
252 |
|
253 | declare interface EditCellKeyDownArgs<TRow, TSummaryRow = unknown> {
|
254 | mode: 'EDIT';
|
255 | row: TRow;
|
256 | column: CalculatedColumn<TRow, TSummaryRow>;
|
257 | rowIdx: number;
|
258 | navigate: () => void;
|
259 | onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
|
260 | }
|
261 |
|
262 | export declare interface FillEvent<TRow> {
|
263 | columnKey: string;
|
264 | sourceRow: TRow;
|
265 | targetRow: TRow;
|
266 | }
|
267 |
|
268 | declare interface GroupRow<TRow> {
|
269 | readonly childRows: readonly TRow[];
|
270 | readonly id: string;
|
271 | readonly parentId: unknown;
|
272 | readonly groupKey: unknown;
|
273 | readonly isExpanded: boolean;
|
274 | readonly level: number;
|
275 | readonly posInSet: number;
|
276 | readonly setSize: number;
|
277 | readonly startRowIndex: number;
|
278 | }
|
279 |
|
280 | declare type Maybe<T> = T | undefined | null;
|
281 |
|
282 | declare type Omit_2<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
283 |
|
284 | declare interface PartialPosition {
|
285 | readonly idx?: number | undefined;
|
286 | readonly rowIdx?: number | undefined;
|
287 | }
|
288 |
|
289 | export declare interface PasteEvent<TRow> {
|
290 | sourceColumnKey: string;
|
291 | sourceRow: TRow;
|
292 | targetColumnKey: string;
|
293 | targetRow: TRow;
|
294 | }
|
295 |
|
296 | declare interface Position {
|
297 | readonly idx: number;
|
298 | readonly rowIdx: number;
|
299 | }
|
300 |
|
301 | export declare interface RenderCellProps<TRow, TSummaryRow = unknown> {
|
302 | column: CalculatedColumn<TRow, TSummaryRow>;
|
303 | row: TRow;
|
304 | rowIdx: number;
|
305 | isCellEditable: boolean;
|
306 | tabIndex: number;
|
307 | onRowChange: (row: TRow) => void;
|
308 | }
|
309 |
|
310 | export declare function renderCheckbox({ onChange, ...props }: RenderCheckboxProps): JSX_2.Element;
|
311 |
|
312 | export declare interface RenderCheckboxProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled'> {
|
313 | onChange: (checked: boolean, shift: boolean) => void;
|
314 | }
|
315 |
|
316 | export declare interface RenderEditCellProps<TRow, TSummaryRow = unknown> {
|
317 | column: CalculatedColumn<TRow, TSummaryRow>;
|
318 | row: TRow;
|
319 | onRowChange: (row: TRow, commitChanges?: boolean) => void;
|
320 | onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
|
321 | }
|
322 |
|
323 | export declare interface Renderers<TRow, TSummaryRow> {
|
324 | renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>;
|
325 | renderRow?: Maybe<(key: Key, props: RenderRowProps<TRow, TSummaryRow>) => ReactNode>;
|
326 | renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>;
|
327 | noRowsFallback?: Maybe<ReactNode>;
|
328 | }
|
329 |
|
330 | export declare interface RenderGroupCellProps<TRow, TSummaryRow = unknown> {
|
331 | groupKey: unknown;
|
332 | column: CalculatedColumn<TRow, TSummaryRow>;
|
333 | row: GroupRow<TRow>;
|
334 | childRows: readonly TRow[];
|
335 | isExpanded: boolean;
|
336 | tabIndex: number;
|
337 | toggleGroup: () => void;
|
338 | }
|
339 |
|
340 | export declare function renderHeaderCell<R, SR>({ column, sortDirection, priority }: RenderHeaderCellProps<R, SR>): string | JSX_2.Element;
|
341 |
|
342 | export declare interface RenderHeaderCellProps<TRow, TSummaryRow = unknown> {
|
343 | column: CalculatedColumn<TRow, TSummaryRow>;
|
344 | sortDirection: SortDirection | undefined;
|
345 | priority: number | undefined;
|
346 | tabIndex: number;
|
347 | }
|
348 |
|
349 | export declare interface RenderRowProps<TRow, TSummaryRow = unknown> extends BaseRenderRowProps<TRow, TSummaryRow> {
|
350 | row: TRow;
|
351 | lastFrozenColumnIndex: number;
|
352 | copiedCellIdx: number | undefined;
|
353 | draggedOverCellIdx: number | undefined;
|
354 | selectedCellEditor: ReactElement<RenderEditCellProps<TRow>> | undefined;
|
355 | onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, rowIdx: number, newRow: TRow) => void;
|
356 | rowClass: Maybe<(row: TRow, rowIdx: number) => Maybe<string>>;
|
357 | setDraggedOverRowIdx: ((overRowIdx: number) => void) | undefined;
|
358 | }
|
359 |
|
360 | export declare function renderSortIcon({ sortDirection }: RenderSortIconProps): JSX_2.Element | null;
|
361 |
|
362 | export declare interface RenderSortIconProps {
|
363 | sortDirection: SortDirection | undefined;
|
364 | }
|
365 |
|
366 | export declare function renderSortPriority({ priority }: RenderSortPriorityProps): number | undefined;
|
367 |
|
368 | export declare interface RenderSortPriorityProps {
|
369 | priority: number | undefined;
|
370 | }
|
371 |
|
372 | export declare interface RenderSortStatusProps extends RenderSortIconProps, RenderSortPriorityProps {
|
373 | }
|
374 |
|
375 | export declare interface RenderSummaryCellProps<TSummaryRow, TRow = unknown> {
|
376 | column: CalculatedColumn<TRow, TSummaryRow>;
|
377 | row: TSummaryRow;
|
378 | tabIndex: number;
|
379 | }
|
380 |
|
381 | export declare function renderToggleGroup<R, SR>(props: RenderGroupCellProps<R, SR>): JSX_2.Element;
|
382 |
|
383 | export declare function renderValue<R, SR>(props: RenderCellProps<R, SR>): ReactNode;
|
384 |
|
385 | export declare const Row: <R, SR>(props: RenderRowProps<R, SR> & RefAttributes<HTMLDivElement>) => JSX.Element;
|
386 |
|
387 | export declare type RowHeightArgs<TRow> = {
|
388 | type: 'ROW';
|
389 | row: TRow;
|
390 | } | {
|
391 | type: 'GROUP';
|
392 | row: GroupRow<TRow>;
|
393 | };
|
394 |
|
395 | export declare interface RowsChangeData<R, SR = unknown> {
|
396 | indexes: number[];
|
397 | column: CalculatedColumn<R, SR>;
|
398 | }
|
399 |
|
400 | export declare const SELECT_COLUMN_KEY = "select-row";
|
401 |
|
402 | export declare function SelectCellFormatter({ value, tabIndex, disabled, onChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: SelectCellFormatterProps): ReactNode;
|
403 |
|
404 | declare interface SelectCellFormatterProps extends SharedInputProps {
|
405 | value: boolean;
|
406 | onChange: (value: boolean, isShiftClick: boolean) => void;
|
407 | }
|
408 |
|
409 | declare interface SelectCellKeyDownArgs<TRow, TSummaryRow = unknown> {
|
410 | mode: 'SELECT';
|
411 | row: TRow;
|
412 | column: CalculatedColumn<TRow, TSummaryRow>;
|
413 | rowIdx: number;
|
414 | selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
|
415 | }
|
416 |
|
417 | export declare const SelectColumn: Column<any, any>;
|
418 |
|
419 | export declare type SelectRowEvent<TRow> = {
|
420 | type: 'HEADER';
|
421 | checked: boolean;
|
422 | } | {
|
423 | type: 'ROW';
|
424 | row: TRow;
|
425 | checked: boolean;
|
426 | isShiftClick: boolean;
|
427 | };
|
428 |
|
429 | declare type SharedDivProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-rowcount' | 'className' | 'style'>;
|
430 |
|
431 | declare type SharedInputProps = Pick<RenderCheckboxProps, 'disabled' | 'tabIndex' | 'aria-label' | 'aria-labelledby'>;
|
432 |
|
433 | export declare interface SortColumn {
|
434 | readonly columnKey: string;
|
435 | readonly direction: SortDirection;
|
436 | }
|
437 |
|
438 | export declare type SortDirection = 'ASC' | 'DESC';
|
439 |
|
440 | export declare function textEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose }: RenderEditCellProps<TRow, TSummaryRow>): JSX_2.Element;
|
441 |
|
442 | export declare function ToggleGroup<R, SR>({ groupKey, isExpanded, tabIndex, toggleGroup }: RenderGroupCellProps<R, SR>): JSX_2.Element;
|
443 |
|
444 | export declare const TreeDataGrid: <R, SR = unknown, K extends Key = Key>(props: TreeDataGridProps<R, SR, K> & RefAttributes<DataGridHandle>) => JSX.Element;
|
445 |
|
446 | export declare interface TreeDataGridProps<R, SR = unknown, K extends Key = Key> extends Omit_2<DataGridProps<R, SR, K>, 'columns' | 'role' | 'aria-rowcount' | 'rowHeight' | 'onFill'> {
|
447 | columns: readonly Column<R, SR>[];
|
448 | rowHeight?: Maybe<number | ((args: RowHeightArgs<R>) => number)>;
|
449 | groupBy: readonly string[];
|
450 | rowGrouper: (rows: readonly R[], columnKey: string) => Record<string, readonly R[]>;
|
451 | expandedGroupIds: ReadonlySet<unknown>;
|
452 | onExpandedGroupIdsChange: (expandedGroupIds: Set<unknown>) => void;
|
453 | }
|
454 |
|
455 | export declare function useRowSelection<R>(): [boolean, (selectRowEvent: SelectRowEvent<R>) => void];
|
456 |
|
457 | export { }
|