@lensui/lens-table 0.1.2 → 0.1.4
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 +49 -8
- package/dist/index.cjs +875 -152
- package/dist/index.css +134 -9
- package/dist/index.d.cts +38 -6
- package/dist/index.d.ts +38 -6
- package/dist/index.js +875 -152
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -56,13 +56,16 @@
|
|
|
56
56
|
overscroll-behavior-x: none;
|
|
57
57
|
touch-action: pan-x pan-y;
|
|
58
58
|
-webkit-overflow-scrolling: touch;
|
|
59
|
-
scrollbar-
|
|
60
|
-
scrollbar-color: #92979c transparent;
|
|
59
|
+
scrollbar-width: none;
|
|
61
60
|
}
|
|
62
61
|
.rvg-scroller.is-context-menu-open {
|
|
63
62
|
overflow: hidden;
|
|
64
63
|
touch-action: none;
|
|
65
64
|
}
|
|
65
|
+
.rvg-scroller::-webkit-scrollbar {
|
|
66
|
+
width: 0;
|
|
67
|
+
height: 0;
|
|
68
|
+
}
|
|
66
69
|
.rvg-scroller::-webkit-scrollbar-track,
|
|
67
70
|
.rvg-scroller::-webkit-scrollbar-corner {
|
|
68
71
|
background: transparent;
|
|
@@ -90,6 +93,65 @@
|
|
|
90
93
|
overflow: hidden;
|
|
91
94
|
pointer-events: none;
|
|
92
95
|
}
|
|
96
|
+
.rvg-text-layer::before {
|
|
97
|
+
position: absolute;
|
|
98
|
+
z-index: 5;
|
|
99
|
+
top: 0;
|
|
100
|
+
right: 0;
|
|
101
|
+
left: 0;
|
|
102
|
+
height: 1px;
|
|
103
|
+
background: var(--rvg-color-grid);
|
|
104
|
+
content: "";
|
|
105
|
+
pointer-events: none;
|
|
106
|
+
}
|
|
107
|
+
.rvg-vertical-scrollbar,
|
|
108
|
+
.rvg-horizontal-scrollbar {
|
|
109
|
+
position: absolute;
|
|
110
|
+
z-index: 7;
|
|
111
|
+
display: none;
|
|
112
|
+
opacity: 0;
|
|
113
|
+
pointer-events: none;
|
|
114
|
+
touch-action: none;
|
|
115
|
+
transition: opacity 160ms ease;
|
|
116
|
+
}
|
|
117
|
+
.rvg-vertical-scrollbar.is-active,
|
|
118
|
+
.rvg-horizontal-scrollbar.is-active {
|
|
119
|
+
opacity: 1;
|
|
120
|
+
pointer-events: auto;
|
|
121
|
+
}
|
|
122
|
+
.rvg-vertical-scrollbar {
|
|
123
|
+
right: 2px;
|
|
124
|
+
width: 9px;
|
|
125
|
+
}
|
|
126
|
+
.rvg-horizontal-scrollbar {
|
|
127
|
+
height: 9px;
|
|
128
|
+
}
|
|
129
|
+
.rvg-vertical-scrollbar-thumb,
|
|
130
|
+
.rvg-horizontal-scrollbar-thumb {
|
|
131
|
+
position: absolute;
|
|
132
|
+
border-radius: 999px;
|
|
133
|
+
background: #92979c;
|
|
134
|
+
opacity: .82;
|
|
135
|
+
cursor: default;
|
|
136
|
+
}
|
|
137
|
+
.rvg-vertical-scrollbar-thumb {
|
|
138
|
+
top: 0;
|
|
139
|
+
right: 1px;
|
|
140
|
+
width: 7px;
|
|
141
|
+
min-height: 28px;
|
|
142
|
+
}
|
|
143
|
+
.rvg-horizontal-scrollbar-thumb {
|
|
144
|
+
bottom: 1px;
|
|
145
|
+
left: 0;
|
|
146
|
+
height: 7px;
|
|
147
|
+
min-width: 36px;
|
|
148
|
+
}
|
|
149
|
+
.rvg-vertical-scrollbar:hover .rvg-vertical-scrollbar-thumb,
|
|
150
|
+
.rvg-horizontal-scrollbar:hover .rvg-horizontal-scrollbar-thumb,
|
|
151
|
+
.rvg-vertical-scrollbar-thumb:hover,
|
|
152
|
+
.rvg-horizontal-scrollbar-thumb:hover {
|
|
153
|
+
opacity: 1;
|
|
154
|
+
}
|
|
93
155
|
.rvg-text-scroll-clip,
|
|
94
156
|
.rvg-body-text-clip {
|
|
95
157
|
position: absolute;
|
|
@@ -134,6 +196,10 @@
|
|
|
134
196
|
pointer-events: auto;
|
|
135
197
|
cursor: text;
|
|
136
198
|
}
|
|
199
|
+
.rvg-header-title {
|
|
200
|
+
pointer-events: none;
|
|
201
|
+
cursor: default;
|
|
202
|
+
}
|
|
137
203
|
.rvg-cell-text {
|
|
138
204
|
transition: transform 140ms ease, opacity 100ms ease;
|
|
139
205
|
}
|
|
@@ -150,6 +216,15 @@
|
|
|
150
216
|
white-space: nowrap;
|
|
151
217
|
user-select: text;
|
|
152
218
|
}
|
|
219
|
+
.rvg-header-title.is-custom {
|
|
220
|
+
overflow: visible;
|
|
221
|
+
white-space: normal;
|
|
222
|
+
}
|
|
223
|
+
.rvg-header-title.is-custom > span {
|
|
224
|
+
overflow: visible;
|
|
225
|
+
white-space: normal;
|
|
226
|
+
text-overflow: clip;
|
|
227
|
+
}
|
|
153
228
|
.rvg-row-drag-icon {
|
|
154
229
|
position: absolute;
|
|
155
230
|
display: grid;
|
|
@@ -398,6 +473,47 @@
|
|
|
398
473
|
color: var(--rvg-color-muted);
|
|
399
474
|
font-weight: 600;
|
|
400
475
|
}
|
|
476
|
+
.rvg-header-group {
|
|
477
|
+
z-index: 3;
|
|
478
|
+
border-right: 1px solid var(--rvg-color-grid);
|
|
479
|
+
border-bottom: 1px solid var(--rvg-color-grid);
|
|
480
|
+
background: var(--rvg-color-header-bg);
|
|
481
|
+
box-sizing: border-box;
|
|
482
|
+
}
|
|
483
|
+
.rvg-header-group.is-leaf {
|
|
484
|
+
z-index: 2;
|
|
485
|
+
}
|
|
486
|
+
.rvg-text-fixed-shadow {
|
|
487
|
+
position: absolute;
|
|
488
|
+
z-index: 4;
|
|
489
|
+
top: 0;
|
|
490
|
+
bottom: 0;
|
|
491
|
+
width: 10px;
|
|
492
|
+
pointer-events: none;
|
|
493
|
+
}
|
|
494
|
+
.rvg-text-fixed-shadow.is-left {
|
|
495
|
+
background:
|
|
496
|
+
linear-gradient(
|
|
497
|
+
90deg,
|
|
498
|
+
rgba(5, 5, 5, 0.06),
|
|
499
|
+
transparent);
|
|
500
|
+
}
|
|
501
|
+
.rvg-text-fixed-shadow.is-right {
|
|
502
|
+
background:
|
|
503
|
+
linear-gradient(
|
|
504
|
+
90deg,
|
|
505
|
+
transparent,
|
|
506
|
+
rgba(5, 5, 5, 0.06));
|
|
507
|
+
}
|
|
508
|
+
.rvg-text-fixed-border {
|
|
509
|
+
position: absolute;
|
|
510
|
+
z-index: 5;
|
|
511
|
+
top: 0;
|
|
512
|
+
bottom: 0;
|
|
513
|
+
width: 1px;
|
|
514
|
+
background: var(--rvg-color-grid);
|
|
515
|
+
pointer-events: none;
|
|
516
|
+
}
|
|
401
517
|
.rvg-header-icons {
|
|
402
518
|
position: absolute;
|
|
403
519
|
z-index: 2;
|
|
@@ -1154,14 +1270,18 @@
|
|
|
1154
1270
|
z-index: 6;
|
|
1155
1271
|
background: var(--rvg-color-bg);
|
|
1156
1272
|
}
|
|
1273
|
+
.rvg-choice-editor {
|
|
1274
|
+
line-height: 1;
|
|
1275
|
+
}
|
|
1157
1276
|
.rvg-time-editor {
|
|
1158
1277
|
position: absolute;
|
|
1159
1278
|
z-index: 6;
|
|
1160
1279
|
display: flex;
|
|
1161
|
-
padding: 0 28px 0
|
|
1280
|
+
padding: 0 28px 0 9px;
|
|
1162
1281
|
align-items: center;
|
|
1163
1282
|
gap: 3px;
|
|
1164
1283
|
background: var(--rvg-color-bg);
|
|
1284
|
+
line-height: 1;
|
|
1165
1285
|
}
|
|
1166
1286
|
.rvg-time-field-group {
|
|
1167
1287
|
display: contents;
|
|
@@ -1169,6 +1289,7 @@
|
|
|
1169
1289
|
.rvg-time-editor input {
|
|
1170
1290
|
min-width: 0;
|
|
1171
1291
|
height: 100%;
|
|
1292
|
+
transform: translateY(-1px);
|
|
1172
1293
|
flex: 1;
|
|
1173
1294
|
padding: 0;
|
|
1174
1295
|
border: 0;
|
|
@@ -1180,17 +1301,18 @@
|
|
|
1180
1301
|
ui-sans-serif,
|
|
1181
1302
|
system-ui,
|
|
1182
1303
|
sans-serif;
|
|
1183
|
-
line-height:
|
|
1304
|
+
line-height: normal;
|
|
1184
1305
|
}
|
|
1185
1306
|
.rvg-native-editor {
|
|
1186
1307
|
position: absolute;
|
|
1187
1308
|
z-index: 6;
|
|
1188
1309
|
display: flex;
|
|
1189
|
-
padding: 0
|
|
1310
|
+
padding: 0 9px;
|
|
1190
1311
|
align-items: center;
|
|
1191
1312
|
gap: 6px;
|
|
1192
1313
|
overflow: hidden;
|
|
1193
1314
|
background: var(--rvg-color-bg);
|
|
1315
|
+
line-height: 1;
|
|
1194
1316
|
}
|
|
1195
1317
|
.rvg-native-editor.has-clear {
|
|
1196
1318
|
padding-right: 32px;
|
|
@@ -1198,18 +1320,20 @@
|
|
|
1198
1320
|
.rvg-native-editor input {
|
|
1199
1321
|
min-width: 0;
|
|
1200
1322
|
width: 100%;
|
|
1201
|
-
height:
|
|
1323
|
+
height: 100%;
|
|
1202
1324
|
padding: 0;
|
|
1325
|
+
transform: translateY(-1px);
|
|
1203
1326
|
flex: 1;
|
|
1204
1327
|
border: 0;
|
|
1205
1328
|
outline: 0;
|
|
1206
1329
|
background: transparent;
|
|
1207
1330
|
color: var(--rvg-color-text);
|
|
1208
1331
|
font:
|
|
1209
|
-
13px
|
|
1332
|
+
13px Inter,
|
|
1210
1333
|
ui-sans-serif,
|
|
1211
1334
|
system-ui,
|
|
1212
1335
|
sans-serif;
|
|
1336
|
+
line-height: normal;
|
|
1213
1337
|
box-sizing: border-box;
|
|
1214
1338
|
}
|
|
1215
1339
|
.rvg-native-editor span {
|
|
@@ -1448,13 +1572,14 @@
|
|
|
1448
1572
|
}
|
|
1449
1573
|
.rvg-choice-editor [data-part=trigger] {
|
|
1450
1574
|
padding: 0 28px 0 9px;
|
|
1575
|
+
line-height: 1;
|
|
1451
1576
|
}
|
|
1452
1577
|
.rvg-date-value {
|
|
1453
|
-
padding
|
|
1454
|
-
padding-bottom: 2px;
|
|
1578
|
+
padding: 0 8px 2px 9px;
|
|
1455
1579
|
}
|
|
1456
1580
|
.rvg-choice-editor [data-part=value-text] {
|
|
1457
1581
|
min-width: 0;
|
|
1582
|
+
transform: translateY(-1px);
|
|
1458
1583
|
overflow: hidden;
|
|
1459
1584
|
font: inherit;
|
|
1460
1585
|
line-height: normal;
|
package/dist/index.d.cts
CHANGED
|
@@ -116,6 +116,12 @@ interface TableHighlightConfig {
|
|
|
116
116
|
/** Highlight rows inserted optimistically through the built-in insert action. Pass a color string to customize the fill. Defaults to false. */
|
|
117
117
|
insertedRows?: boolean | string;
|
|
118
118
|
}
|
|
119
|
+
interface TableLayoutConfig {
|
|
120
|
+
/** Fixed body row height in pixels. Defaults to 36. */
|
|
121
|
+
rowHeight?: number;
|
|
122
|
+
/** Header height in pixels. Defaults to 40. */
|
|
123
|
+
headerHeight?: number;
|
|
124
|
+
}
|
|
119
125
|
interface TableCellSpan {
|
|
120
126
|
/** Row index in the current rows array. Prefer rowKey when row order can change. */
|
|
121
127
|
rowIndex?: number;
|
|
@@ -128,6 +134,16 @@ interface TableCellSpan {
|
|
|
128
134
|
/** Number of columns covered by the merged cell. Defaults to 1. */
|
|
129
135
|
colSpan?: number;
|
|
130
136
|
}
|
|
137
|
+
interface TableCellSpanRuleContext<Row extends object> {
|
|
138
|
+
row: Row;
|
|
139
|
+
rowIndex: number;
|
|
140
|
+
column: GridColumn<Row>;
|
|
141
|
+
columnIndex: number;
|
|
142
|
+
rows: Row[];
|
|
143
|
+
columns: GridColumn<Row>[];
|
|
144
|
+
}
|
|
145
|
+
type TableCellSpanRule<Row extends object> = (context: TableCellSpanRuleContext<Row>) => TableCellSpan | Omit<TableCellSpan, 'rowIndex' | 'rowKey' | 'columnKey'> | false | null | undefined;
|
|
146
|
+
type TableCellSpans<Row extends object> = TableCellSpan[] | TableCellSpanRule<Row>;
|
|
131
147
|
interface TableResolvedCellSpan {
|
|
132
148
|
rowIndex: number;
|
|
133
149
|
columnIndex: number;
|
|
@@ -149,6 +165,10 @@ interface GridColumn<Row> {
|
|
|
149
165
|
key: string;
|
|
150
166
|
/** Header label painted in the text layer. */
|
|
151
167
|
title: string;
|
|
168
|
+
/** Custom React content rendered in the header DOM overlay. */
|
|
169
|
+
renderHeader?: (column: GridColumn<Row>) => ReactNode;
|
|
170
|
+
/** Child columns used to build grouped / multi-level headers. Only leaf columns render body cells. */
|
|
171
|
+
children?: GridColumn<Row>[];
|
|
152
172
|
/** Row field used as this column's cell value. Omit for utility columns. */
|
|
153
173
|
dataIndex?: keyof Row;
|
|
154
174
|
/** Preferred column width in pixels. Layout helpers enforce minimums. */
|
|
@@ -282,20 +302,26 @@ interface TableProps<Row extends object> {
|
|
|
282
302
|
width?: number | string;
|
|
283
303
|
/** Grid height. Defaults to 100%; falls back to 480px when the parent has no height. */
|
|
284
304
|
height?: number | string;
|
|
285
|
-
/** Shrink the grid to its real content height when there are fewer rows than the configured height can display. */
|
|
305
|
+
/** Shrink the grid to its real content height when there are fewer rows than the configured max height can display. Defaults to true. */
|
|
286
306
|
autoHeight?: boolean;
|
|
307
|
+
/** Layout and sizing configuration. Prefer this over rowHeight/headerHeight for new code. */
|
|
308
|
+
layout?: TableLayoutConfig;
|
|
309
|
+
/** @deprecated Use layout.rowHeight instead. */
|
|
287
310
|
rowHeight?: number;
|
|
311
|
+
/** @deprecated Use layout.headerHeight instead. */
|
|
288
312
|
headerHeight?: number;
|
|
289
313
|
fixedHeader?: boolean;
|
|
290
314
|
locale?: TableLocaleConfig;
|
|
291
|
-
/** Hide vertical grid lines while keeping horizontal row separators. */
|
|
315
|
+
/** Hide vertical grid lines while keeping horizontal row separators. Prefer borderless for new code. */
|
|
316
|
+
borderless?: boolean;
|
|
317
|
+
/** @deprecated Use borderless instead. */
|
|
292
318
|
verticalBorderless?: boolean;
|
|
293
319
|
/** Paint alternating row backgrounds. Pass a color string to customize the stripe color. */
|
|
294
320
|
striped?: boolean | string;
|
|
295
321
|
/** Visual highlight feedback configuration. All entries default to false. */
|
|
296
322
|
highlight?: TableHighlightConfig;
|
|
297
323
|
/** Merged body cell configuration. Utility columns are ignored and horizontal spans are limited to the same fixed column region. */
|
|
298
|
-
cellSpans?:
|
|
324
|
+
cellSpans?: TableCellSpans<Row>;
|
|
299
325
|
loading?: boolean;
|
|
300
326
|
/** Custom loading content. When provided, it is used for both initial loading and refresh loading. */
|
|
301
327
|
loadingContent?: ReactNode;
|
|
@@ -322,7 +348,13 @@ interface TableProps<Row extends object> {
|
|
|
322
348
|
onSelectedColumnKeysChange?: (keys: string[]) => void;
|
|
323
349
|
columnDraggable?: boolean;
|
|
324
350
|
columnResizable?: boolean;
|
|
325
|
-
onColumnOrderChange?: (sourceIndex: number, targetIndex: number
|
|
351
|
+
onColumnOrderChange?: (sourceIndex: number, targetIndex: number, detail?: {
|
|
352
|
+
type: 'column' | 'group';
|
|
353
|
+
sourceKey: string;
|
|
354
|
+
targetKey: string;
|
|
355
|
+
parentKey?: string;
|
|
356
|
+
placement: 'before' | 'after';
|
|
357
|
+
}) => void;
|
|
326
358
|
onColumnResize?: (columnKey: string, width: number) => void;
|
|
327
359
|
rowDraggable?: boolean;
|
|
328
360
|
onRowOrderChange?: (sourceIndex: number, targetIndex: number) => void;
|
|
@@ -348,7 +380,7 @@ interface ViewportRange {
|
|
|
348
380
|
columnEnd: number;
|
|
349
381
|
}
|
|
350
382
|
|
|
351
|
-
declare function Table<Row extends object>({ columns: sourceColumns, rows: sourceRows, rowKey, width, height, autoHeight, rowHeight, headerHeight, fixedHeader, locale, verticalBorderless, striped, highlight, cellSpans, loading, loadingContent, virtualized, tooltip, summary, rowNumber, selectedCell, defaultSelectedCell, onSelectedCellChange, rangeSelection, rowSelection, selectedRowKeys, defaultSelectedRowKeys, onSelectedRowKeysChange, columnSelection, selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnKeysChange, columnDraggable, columnResizable, onColumnOrderChange, onColumnResize, rowDraggable, onRowOrderChange, onInsertRows, onDeleteRows, sortState, onSortStateChange, filterValues, onFilterValuesChange, onCellChange, onCellContextMenu, contextMenu: contextMenuConfig, emptyContent, className, style, ariaLabel, }: TableProps<Row>): react.JSX.Element;
|
|
383
|
+
declare function Table<Row extends object>({ columns: sourceColumns, rows: sourceRows, rowKey, width, height, autoHeight, layout, rowHeight: rowHeightProp, headerHeight: headerHeightProp, fixedHeader, locale, borderless, verticalBorderless, striped, highlight, cellSpans, loading, loadingContent, virtualized, tooltip, summary, rowNumber, selectedCell, defaultSelectedCell, onSelectedCellChange, rangeSelection, rowSelection, selectedRowKeys, defaultSelectedRowKeys, onSelectedRowKeysChange, columnSelection, selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnKeysChange, columnDraggable, columnResizable, onColumnOrderChange, onColumnResize, rowDraggable, onRowOrderChange, onInsertRows, onDeleteRows, sortState, onSortStateChange, filterValues, onFilterValuesChange, onCellChange, onCellContextMenu, contextMenu: contextMenuConfig, emptyContent, className, style, ariaLabel, }: TableProps<Row>): react.JSX.Element;
|
|
352
384
|
|
|
353
385
|
type LayoutColumn<Row> = GridColumn<Row> & {
|
|
354
386
|
rowSelection?: boolean;
|
|
@@ -395,4 +427,4 @@ declare function hitTestColumn(metrics: ColumnMetric[], contentX: number): numbe
|
|
|
395
427
|
|
|
396
428
|
type TableFilterValues = Record<string, string>;
|
|
397
429
|
|
|
398
|
-
export { type AxisSelectionConfig, type CellChange, type ContextMenuEvent, type DeleteRowsEvent, type GridCellPosition, type GridColumn, type GridKey, type GridSelection, type GridSortState, type InsertRowsEvent, type SelectionMode, type SortDirection, Table, type CellChange as TableCellChange, type GridCellPosition as TableCellPosition, type TableCellSpan, type GridColumn as TableColumn, type TableContextMenu, type TableContextMenuConfig, type ContextMenuEvent as TableContextMenuEvent, type DeleteRowsEvent as TableDeleteRowsEvent, type GridSelection as TableEditingCell, type TableFilterValues, type TableHighlightConfig, type InsertRowsEvent as TableInsertRowsEvent, type GridKey as TableKey, type TableLabels, type TableLocaleCode, type TableLocaleConfig, type TableProps, type TableResolvedCellSpan, type GridSortState as TableSorter, type TableSummaryConfig, type TableTooltipConfig, type ViewportRange as TableViewportRange, type TableVirtualizedConfig, Table as VelocityGrid, type TableCellSpan as VelocityGridCellSpan, type TableContextMenu as VelocityGridContextMenu, type TableContextMenuConfig as VelocityGridContextMenuConfig, type TableHighlightConfig as VelocityGridHighlightConfig, type TableLabels as VelocityGridLabels, type TableLocaleCode as VelocityGridLocaleCode, type TableLocaleConfig as VelocityGridLocaleConfig, type TableProps as VelocityGridProps, type TableResolvedCellSpan as VelocityGridResolvedCellSpan, type TableSummaryConfig as VelocityGridSummaryConfig, type TableTooltipConfig as VelocityGridTooltipConfig, type TableVirtualizedConfig as VelocityGridVirtualizedConfig, type ViewportRange, buildColumnMetrics, getViewportRange, hitTestColumn };
|
|
430
|
+
export { type AxisSelectionConfig, type CellChange, type ContextMenuEvent, type DeleteRowsEvent, type GridCellPosition, type GridColumn, type GridKey, type GridSelection, type GridSortState, type InsertRowsEvent, type SelectionMode, type SortDirection, Table, type CellChange as TableCellChange, type GridCellPosition as TableCellPosition, type TableCellSpan, type TableCellSpanRule, type TableCellSpanRuleContext, type TableCellSpans, type GridColumn as TableColumn, type TableContextMenu, type TableContextMenuConfig, type ContextMenuEvent as TableContextMenuEvent, type DeleteRowsEvent as TableDeleteRowsEvent, type GridSelection as TableEditingCell, type TableFilterValues, type TableHighlightConfig, type InsertRowsEvent as TableInsertRowsEvent, type GridKey as TableKey, type TableLabels, type TableLayoutConfig, type TableLocaleCode, type TableLocaleConfig, type TableProps, type TableResolvedCellSpan, type GridSortState as TableSorter, type TableSummaryConfig, type TableTooltipConfig, type ViewportRange as TableViewportRange, type TableVirtualizedConfig, Table as VelocityGrid, type TableCellSpan as VelocityGridCellSpan, type TableCellSpanRule as VelocityGridCellSpanRule, type TableCellSpanRuleContext as VelocityGridCellSpanRuleContext, type TableCellSpans as VelocityGridCellSpans, type TableContextMenu as VelocityGridContextMenu, type TableContextMenuConfig as VelocityGridContextMenuConfig, type TableHighlightConfig as VelocityGridHighlightConfig, type TableLabels as VelocityGridLabels, type TableLayoutConfig as VelocityGridLayoutConfig, type TableLocaleCode as VelocityGridLocaleCode, type TableLocaleConfig as VelocityGridLocaleConfig, type TableProps as VelocityGridProps, type TableResolvedCellSpan as VelocityGridResolvedCellSpan, type TableSummaryConfig as VelocityGridSummaryConfig, type TableTooltipConfig as VelocityGridTooltipConfig, type TableVirtualizedConfig as VelocityGridVirtualizedConfig, type ViewportRange, buildColumnMetrics, getViewportRange, hitTestColumn };
|
package/dist/index.d.ts
CHANGED
|
@@ -116,6 +116,12 @@ interface TableHighlightConfig {
|
|
|
116
116
|
/** Highlight rows inserted optimistically through the built-in insert action. Pass a color string to customize the fill. Defaults to false. */
|
|
117
117
|
insertedRows?: boolean | string;
|
|
118
118
|
}
|
|
119
|
+
interface TableLayoutConfig {
|
|
120
|
+
/** Fixed body row height in pixels. Defaults to 36. */
|
|
121
|
+
rowHeight?: number;
|
|
122
|
+
/** Header height in pixels. Defaults to 40. */
|
|
123
|
+
headerHeight?: number;
|
|
124
|
+
}
|
|
119
125
|
interface TableCellSpan {
|
|
120
126
|
/** Row index in the current rows array. Prefer rowKey when row order can change. */
|
|
121
127
|
rowIndex?: number;
|
|
@@ -128,6 +134,16 @@ interface TableCellSpan {
|
|
|
128
134
|
/** Number of columns covered by the merged cell. Defaults to 1. */
|
|
129
135
|
colSpan?: number;
|
|
130
136
|
}
|
|
137
|
+
interface TableCellSpanRuleContext<Row extends object> {
|
|
138
|
+
row: Row;
|
|
139
|
+
rowIndex: number;
|
|
140
|
+
column: GridColumn<Row>;
|
|
141
|
+
columnIndex: number;
|
|
142
|
+
rows: Row[];
|
|
143
|
+
columns: GridColumn<Row>[];
|
|
144
|
+
}
|
|
145
|
+
type TableCellSpanRule<Row extends object> = (context: TableCellSpanRuleContext<Row>) => TableCellSpan | Omit<TableCellSpan, 'rowIndex' | 'rowKey' | 'columnKey'> | false | null | undefined;
|
|
146
|
+
type TableCellSpans<Row extends object> = TableCellSpan[] | TableCellSpanRule<Row>;
|
|
131
147
|
interface TableResolvedCellSpan {
|
|
132
148
|
rowIndex: number;
|
|
133
149
|
columnIndex: number;
|
|
@@ -149,6 +165,10 @@ interface GridColumn<Row> {
|
|
|
149
165
|
key: string;
|
|
150
166
|
/** Header label painted in the text layer. */
|
|
151
167
|
title: string;
|
|
168
|
+
/** Custom React content rendered in the header DOM overlay. */
|
|
169
|
+
renderHeader?: (column: GridColumn<Row>) => ReactNode;
|
|
170
|
+
/** Child columns used to build grouped / multi-level headers. Only leaf columns render body cells. */
|
|
171
|
+
children?: GridColumn<Row>[];
|
|
152
172
|
/** Row field used as this column's cell value. Omit for utility columns. */
|
|
153
173
|
dataIndex?: keyof Row;
|
|
154
174
|
/** Preferred column width in pixels. Layout helpers enforce minimums. */
|
|
@@ -282,20 +302,26 @@ interface TableProps<Row extends object> {
|
|
|
282
302
|
width?: number | string;
|
|
283
303
|
/** Grid height. Defaults to 100%; falls back to 480px when the parent has no height. */
|
|
284
304
|
height?: number | string;
|
|
285
|
-
/** Shrink the grid to its real content height when there are fewer rows than the configured height can display. */
|
|
305
|
+
/** Shrink the grid to its real content height when there are fewer rows than the configured max height can display. Defaults to true. */
|
|
286
306
|
autoHeight?: boolean;
|
|
307
|
+
/** Layout and sizing configuration. Prefer this over rowHeight/headerHeight for new code. */
|
|
308
|
+
layout?: TableLayoutConfig;
|
|
309
|
+
/** @deprecated Use layout.rowHeight instead. */
|
|
287
310
|
rowHeight?: number;
|
|
311
|
+
/** @deprecated Use layout.headerHeight instead. */
|
|
288
312
|
headerHeight?: number;
|
|
289
313
|
fixedHeader?: boolean;
|
|
290
314
|
locale?: TableLocaleConfig;
|
|
291
|
-
/** Hide vertical grid lines while keeping horizontal row separators. */
|
|
315
|
+
/** Hide vertical grid lines while keeping horizontal row separators. Prefer borderless for new code. */
|
|
316
|
+
borderless?: boolean;
|
|
317
|
+
/** @deprecated Use borderless instead. */
|
|
292
318
|
verticalBorderless?: boolean;
|
|
293
319
|
/** Paint alternating row backgrounds. Pass a color string to customize the stripe color. */
|
|
294
320
|
striped?: boolean | string;
|
|
295
321
|
/** Visual highlight feedback configuration. All entries default to false. */
|
|
296
322
|
highlight?: TableHighlightConfig;
|
|
297
323
|
/** Merged body cell configuration. Utility columns are ignored and horizontal spans are limited to the same fixed column region. */
|
|
298
|
-
cellSpans?:
|
|
324
|
+
cellSpans?: TableCellSpans<Row>;
|
|
299
325
|
loading?: boolean;
|
|
300
326
|
/** Custom loading content. When provided, it is used for both initial loading and refresh loading. */
|
|
301
327
|
loadingContent?: ReactNode;
|
|
@@ -322,7 +348,13 @@ interface TableProps<Row extends object> {
|
|
|
322
348
|
onSelectedColumnKeysChange?: (keys: string[]) => void;
|
|
323
349
|
columnDraggable?: boolean;
|
|
324
350
|
columnResizable?: boolean;
|
|
325
|
-
onColumnOrderChange?: (sourceIndex: number, targetIndex: number
|
|
351
|
+
onColumnOrderChange?: (sourceIndex: number, targetIndex: number, detail?: {
|
|
352
|
+
type: 'column' | 'group';
|
|
353
|
+
sourceKey: string;
|
|
354
|
+
targetKey: string;
|
|
355
|
+
parentKey?: string;
|
|
356
|
+
placement: 'before' | 'after';
|
|
357
|
+
}) => void;
|
|
326
358
|
onColumnResize?: (columnKey: string, width: number) => void;
|
|
327
359
|
rowDraggable?: boolean;
|
|
328
360
|
onRowOrderChange?: (sourceIndex: number, targetIndex: number) => void;
|
|
@@ -348,7 +380,7 @@ interface ViewportRange {
|
|
|
348
380
|
columnEnd: number;
|
|
349
381
|
}
|
|
350
382
|
|
|
351
|
-
declare function Table<Row extends object>({ columns: sourceColumns, rows: sourceRows, rowKey, width, height, autoHeight, rowHeight, headerHeight, fixedHeader, locale, verticalBorderless, striped, highlight, cellSpans, loading, loadingContent, virtualized, tooltip, summary, rowNumber, selectedCell, defaultSelectedCell, onSelectedCellChange, rangeSelection, rowSelection, selectedRowKeys, defaultSelectedRowKeys, onSelectedRowKeysChange, columnSelection, selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnKeysChange, columnDraggable, columnResizable, onColumnOrderChange, onColumnResize, rowDraggable, onRowOrderChange, onInsertRows, onDeleteRows, sortState, onSortStateChange, filterValues, onFilterValuesChange, onCellChange, onCellContextMenu, contextMenu: contextMenuConfig, emptyContent, className, style, ariaLabel, }: TableProps<Row>): react.JSX.Element;
|
|
383
|
+
declare function Table<Row extends object>({ columns: sourceColumns, rows: sourceRows, rowKey, width, height, autoHeight, layout, rowHeight: rowHeightProp, headerHeight: headerHeightProp, fixedHeader, locale, borderless, verticalBorderless, striped, highlight, cellSpans, loading, loadingContent, virtualized, tooltip, summary, rowNumber, selectedCell, defaultSelectedCell, onSelectedCellChange, rangeSelection, rowSelection, selectedRowKeys, defaultSelectedRowKeys, onSelectedRowKeysChange, columnSelection, selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnKeysChange, columnDraggable, columnResizable, onColumnOrderChange, onColumnResize, rowDraggable, onRowOrderChange, onInsertRows, onDeleteRows, sortState, onSortStateChange, filterValues, onFilterValuesChange, onCellChange, onCellContextMenu, contextMenu: contextMenuConfig, emptyContent, className, style, ariaLabel, }: TableProps<Row>): react.JSX.Element;
|
|
352
384
|
|
|
353
385
|
type LayoutColumn<Row> = GridColumn<Row> & {
|
|
354
386
|
rowSelection?: boolean;
|
|
@@ -395,4 +427,4 @@ declare function hitTestColumn(metrics: ColumnMetric[], contentX: number): numbe
|
|
|
395
427
|
|
|
396
428
|
type TableFilterValues = Record<string, string>;
|
|
397
429
|
|
|
398
|
-
export { type AxisSelectionConfig, type CellChange, type ContextMenuEvent, type DeleteRowsEvent, type GridCellPosition, type GridColumn, type GridKey, type GridSelection, type GridSortState, type InsertRowsEvent, type SelectionMode, type SortDirection, Table, type CellChange as TableCellChange, type GridCellPosition as TableCellPosition, type TableCellSpan, type GridColumn as TableColumn, type TableContextMenu, type TableContextMenuConfig, type ContextMenuEvent as TableContextMenuEvent, type DeleteRowsEvent as TableDeleteRowsEvent, type GridSelection as TableEditingCell, type TableFilterValues, type TableHighlightConfig, type InsertRowsEvent as TableInsertRowsEvent, type GridKey as TableKey, type TableLabels, type TableLocaleCode, type TableLocaleConfig, type TableProps, type TableResolvedCellSpan, type GridSortState as TableSorter, type TableSummaryConfig, type TableTooltipConfig, type ViewportRange as TableViewportRange, type TableVirtualizedConfig, Table as VelocityGrid, type TableCellSpan as VelocityGridCellSpan, type TableContextMenu as VelocityGridContextMenu, type TableContextMenuConfig as VelocityGridContextMenuConfig, type TableHighlightConfig as VelocityGridHighlightConfig, type TableLabels as VelocityGridLabels, type TableLocaleCode as VelocityGridLocaleCode, type TableLocaleConfig as VelocityGridLocaleConfig, type TableProps as VelocityGridProps, type TableResolvedCellSpan as VelocityGridResolvedCellSpan, type TableSummaryConfig as VelocityGridSummaryConfig, type TableTooltipConfig as VelocityGridTooltipConfig, type TableVirtualizedConfig as VelocityGridVirtualizedConfig, type ViewportRange, buildColumnMetrics, getViewportRange, hitTestColumn };
|
|
430
|
+
export { type AxisSelectionConfig, type CellChange, type ContextMenuEvent, type DeleteRowsEvent, type GridCellPosition, type GridColumn, type GridKey, type GridSelection, type GridSortState, type InsertRowsEvent, type SelectionMode, type SortDirection, Table, type CellChange as TableCellChange, type GridCellPosition as TableCellPosition, type TableCellSpan, type TableCellSpanRule, type TableCellSpanRuleContext, type TableCellSpans, type GridColumn as TableColumn, type TableContextMenu, type TableContextMenuConfig, type ContextMenuEvent as TableContextMenuEvent, type DeleteRowsEvent as TableDeleteRowsEvent, type GridSelection as TableEditingCell, type TableFilterValues, type TableHighlightConfig, type InsertRowsEvent as TableInsertRowsEvent, type GridKey as TableKey, type TableLabels, type TableLayoutConfig, type TableLocaleCode, type TableLocaleConfig, type TableProps, type TableResolvedCellSpan, type GridSortState as TableSorter, type TableSummaryConfig, type TableTooltipConfig, type ViewportRange as TableViewportRange, type TableVirtualizedConfig, Table as VelocityGrid, type TableCellSpan as VelocityGridCellSpan, type TableCellSpanRule as VelocityGridCellSpanRule, type TableCellSpanRuleContext as VelocityGridCellSpanRuleContext, type TableCellSpans as VelocityGridCellSpans, type TableContextMenu as VelocityGridContextMenu, type TableContextMenuConfig as VelocityGridContextMenuConfig, type TableHighlightConfig as VelocityGridHighlightConfig, type TableLabels as VelocityGridLabels, type TableLayoutConfig as VelocityGridLayoutConfig, type TableLocaleCode as VelocityGridLocaleCode, type TableLocaleConfig as VelocityGridLocaleConfig, type TableProps as VelocityGridProps, type TableResolvedCellSpan as VelocityGridResolvedCellSpan, type TableSummaryConfig as VelocityGridSummaryConfig, type TableTooltipConfig as VelocityGridTooltipConfig, type TableVirtualizedConfig as VelocityGridVirtualizedConfig, type ViewportRange, buildColumnMetrics, getViewportRange, hitTestColumn };
|