@prt-ts/fluent-react-table-v2 9.53.0-build-2.0 → 9.53.0-build-3.0
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/index.cjs.js +19 -14
- package/index.esm.js +19 -14
- package/package.json +1 -1
- package/src/lib/types/TableProps.d.ts +11 -7
package/index.cjs.js
CHANGED
|
@@ -314,10 +314,10 @@ function tableReducer(state, action) {
|
|
|
314
314
|
|
|
315
315
|
const useGridContainer = (props, ref) => {
|
|
316
316
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
317
|
-
const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData } = props;
|
|
317
|
+
const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData, isRowSelectable, } = props;
|
|
318
318
|
const [drawerState, dispatch] = React__namespace.useReducer(tableReducer, {
|
|
319
319
|
isFilterDrawerOpen: false,
|
|
320
|
-
isViewsDrawerOpen: false
|
|
320
|
+
isViewsDrawerOpen: false,
|
|
321
321
|
});
|
|
322
322
|
const [pagination, setPagination] = React__namespace.useState({
|
|
323
323
|
pageSize: props.pageSize || 10,
|
|
@@ -367,14 +367,19 @@ const useGridContainer = (props, ref) => {
|
|
|
367
367
|
columnVisibility,
|
|
368
368
|
columnPinning,
|
|
369
369
|
columnSizing,
|
|
370
|
-
rowPinning
|
|
370
|
+
rowPinning,
|
|
371
371
|
},
|
|
372
372
|
getRowId(originalRow, index, parent) {
|
|
373
373
|
const keyProps = props.dataPrimaryKye;
|
|
374
374
|
return originalRow[keyProps] || `${index}`;
|
|
375
375
|
},
|
|
376
376
|
columnResizeMode: 'onChange',
|
|
377
|
-
enableRowSelection:
|
|
377
|
+
enableRowSelection: (row) => {
|
|
378
|
+
if (!isRowSelectable) {
|
|
379
|
+
return rowSelectionMode !== undefined;
|
|
380
|
+
}
|
|
381
|
+
return isRowSelectable(row);
|
|
382
|
+
},
|
|
378
383
|
enableMultiRowSelection: rowSelectionMode === 'multiple',
|
|
379
384
|
enableFilters: true,
|
|
380
385
|
enableGlobalFilter: true,
|
|
@@ -407,7 +412,7 @@ const useGridContainer = (props, ref) => {
|
|
|
407
412
|
pageSizeOptions: props.pageSizeOptions || [10, 20, 50, 100, 1000],
|
|
408
413
|
rowSelectionMode: props.rowSelectionMode,
|
|
409
414
|
isAutoExpandOnGroup: (_k = props.isAutoExpandOnGroup) !== null && _k !== void 0 ? _k : false,
|
|
410
|
-
tableHeight: props.tableHeight ||
|
|
415
|
+
tableHeight: props.tableHeight || '650px',
|
|
411
416
|
updateData: onUpdateData,
|
|
412
417
|
onTableViewDelete: props.onTableViewDelete,
|
|
413
418
|
onTableViewSave: props.onTableViewSave,
|
|
@@ -427,7 +432,7 @@ const useGridContainer = (props, ref) => {
|
|
|
427
432
|
setColumnSizing,
|
|
428
433
|
setRowPinning,
|
|
429
434
|
tableSettings: (_l = props.tableSettings) !== null && _l !== void 0 ? _l : {},
|
|
430
|
-
}
|
|
435
|
+
},
|
|
431
436
|
});
|
|
432
437
|
const tableViews = React__namespace.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
|
|
433
438
|
const resetToDefaultView = () => {
|
|
@@ -455,12 +460,12 @@ const useGridContainer = (props, ref) => {
|
|
|
455
460
|
columnSizing: {},
|
|
456
461
|
rowPinning: (_j = props.rowPinningState) !== null && _j !== void 0 ? _j : {},
|
|
457
462
|
columnSizingInfo: {
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
463
|
+
startOffset: null,
|
|
464
|
+
startSize: null,
|
|
465
|
+
deltaOffset: null,
|
|
466
|
+
deltaPercentage: null,
|
|
467
|
+
isResizingColumn: false,
|
|
468
|
+
columnSizingStart: [],
|
|
464
469
|
},
|
|
465
470
|
};
|
|
466
471
|
return applyTableState(defaultTableState);
|
|
@@ -497,7 +502,7 @@ const useGridContainer = (props, ref) => {
|
|
|
497
502
|
table,
|
|
498
503
|
getTableState: table.getState,
|
|
499
504
|
applyTableState,
|
|
500
|
-
resetToDefaultView
|
|
505
|
+
resetToDefaultView,
|
|
501
506
|
};
|
|
502
507
|
},
|
|
503
508
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -536,7 +541,7 @@ const useGridContainer = (props, ref) => {
|
|
|
536
541
|
headerMenu,
|
|
537
542
|
setGlobalFilter,
|
|
538
543
|
resetToDefaultView,
|
|
539
|
-
applyTableState
|
|
544
|
+
applyTableState,
|
|
540
545
|
};
|
|
541
546
|
};
|
|
542
547
|
|
package/index.esm.js
CHANGED
|
@@ -292,10 +292,10 @@ function tableReducer(state, action) {
|
|
|
292
292
|
|
|
293
293
|
const useGridContainer = (props, ref) => {
|
|
294
294
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
295
|
-
const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData } = props;
|
|
295
|
+
const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData, isRowSelectable, } = props;
|
|
296
296
|
const [drawerState, dispatch] = React.useReducer(tableReducer, {
|
|
297
297
|
isFilterDrawerOpen: false,
|
|
298
|
-
isViewsDrawerOpen: false
|
|
298
|
+
isViewsDrawerOpen: false,
|
|
299
299
|
});
|
|
300
300
|
const [pagination, setPagination] = React.useState({
|
|
301
301
|
pageSize: props.pageSize || 10,
|
|
@@ -345,14 +345,19 @@ const useGridContainer = (props, ref) => {
|
|
|
345
345
|
columnVisibility,
|
|
346
346
|
columnPinning,
|
|
347
347
|
columnSizing,
|
|
348
|
-
rowPinning
|
|
348
|
+
rowPinning,
|
|
349
349
|
},
|
|
350
350
|
getRowId(originalRow, index, parent) {
|
|
351
351
|
const keyProps = props.dataPrimaryKye;
|
|
352
352
|
return originalRow[keyProps] || `${index}`;
|
|
353
353
|
},
|
|
354
354
|
columnResizeMode: 'onChange',
|
|
355
|
-
enableRowSelection:
|
|
355
|
+
enableRowSelection: (row) => {
|
|
356
|
+
if (!isRowSelectable) {
|
|
357
|
+
return rowSelectionMode !== undefined;
|
|
358
|
+
}
|
|
359
|
+
return isRowSelectable(row);
|
|
360
|
+
},
|
|
356
361
|
enableMultiRowSelection: rowSelectionMode === 'multiple',
|
|
357
362
|
enableFilters: true,
|
|
358
363
|
enableGlobalFilter: true,
|
|
@@ -385,7 +390,7 @@ const useGridContainer = (props, ref) => {
|
|
|
385
390
|
pageSizeOptions: props.pageSizeOptions || [10, 20, 50, 100, 1000],
|
|
386
391
|
rowSelectionMode: props.rowSelectionMode,
|
|
387
392
|
isAutoExpandOnGroup: (_k = props.isAutoExpandOnGroup) !== null && _k !== void 0 ? _k : false,
|
|
388
|
-
tableHeight: props.tableHeight ||
|
|
393
|
+
tableHeight: props.tableHeight || '650px',
|
|
389
394
|
updateData: onUpdateData,
|
|
390
395
|
onTableViewDelete: props.onTableViewDelete,
|
|
391
396
|
onTableViewSave: props.onTableViewSave,
|
|
@@ -405,7 +410,7 @@ const useGridContainer = (props, ref) => {
|
|
|
405
410
|
setColumnSizing,
|
|
406
411
|
setRowPinning,
|
|
407
412
|
tableSettings: (_l = props.tableSettings) !== null && _l !== void 0 ? _l : {},
|
|
408
|
-
}
|
|
413
|
+
},
|
|
409
414
|
});
|
|
410
415
|
const tableViews = React.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
|
|
411
416
|
const resetToDefaultView = () => {
|
|
@@ -433,12 +438,12 @@ const useGridContainer = (props, ref) => {
|
|
|
433
438
|
columnSizing: {},
|
|
434
439
|
rowPinning: (_j = props.rowPinningState) !== null && _j !== void 0 ? _j : {},
|
|
435
440
|
columnSizingInfo: {
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
441
|
+
startOffset: null,
|
|
442
|
+
startSize: null,
|
|
443
|
+
deltaOffset: null,
|
|
444
|
+
deltaPercentage: null,
|
|
445
|
+
isResizingColumn: false,
|
|
446
|
+
columnSizingStart: [],
|
|
442
447
|
},
|
|
443
448
|
};
|
|
444
449
|
return applyTableState(defaultTableState);
|
|
@@ -475,7 +480,7 @@ const useGridContainer = (props, ref) => {
|
|
|
475
480
|
table,
|
|
476
481
|
getTableState: table.getState,
|
|
477
482
|
applyTableState,
|
|
478
|
-
resetToDefaultView
|
|
483
|
+
resetToDefaultView,
|
|
479
484
|
};
|
|
480
485
|
},
|
|
481
486
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -514,7 +519,7 @@ const useGridContainer = (props, ref) => {
|
|
|
514
519
|
headerMenu,
|
|
515
520
|
setGlobalFilter,
|
|
516
521
|
resetToDefaultView,
|
|
517
|
-
applyTableState
|
|
522
|
+
applyTableState,
|
|
518
523
|
};
|
|
519
524
|
};
|
|
520
525
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ExpandedState, GroupingState, RowData, RowPinningState, RowSelectionState, SortingState, Table, VisibilityState } from
|
|
3
|
-
import { TableView } from
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ExpandedState, GroupingState, Row, RowData, RowPinningState, RowSelectionState, SortingState, Table, VisibilityState } from '@tanstack/react-table';
|
|
3
|
+
import { TableView } from './TableView';
|
|
4
4
|
export type TableProps<TItem extends RowData> = {
|
|
5
5
|
/**
|
|
6
6
|
* Table Columns definitions.
|
|
@@ -40,7 +40,7 @@ export type TableProps<TItem extends RowData> = {
|
|
|
40
40
|
/**
|
|
41
41
|
* Row selection mode.
|
|
42
42
|
*/
|
|
43
|
-
rowSelectionMode?:
|
|
43
|
+
rowSelectionMode?: 'single' | 'multiple';
|
|
44
44
|
/**
|
|
45
45
|
* Default global filter value.
|
|
46
46
|
*/
|
|
@@ -82,9 +82,9 @@ export type TableProps<TItem extends RowData> = {
|
|
|
82
82
|
*/
|
|
83
83
|
rowPinningState?: RowPinningState;
|
|
84
84
|
/**
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
85
|
+
* Component visible if the no item match the filter condition
|
|
86
|
+
* @default defaultNoItemComponent
|
|
87
|
+
*/
|
|
88
88
|
noFilterMatchPage?: React.ReactNode;
|
|
89
89
|
/**
|
|
90
90
|
* Component visible in the grid body if there is no items in the list
|
|
@@ -121,6 +121,10 @@ export type TableProps<TItem extends RowData> = {
|
|
|
121
121
|
* Additional settings for the table
|
|
122
122
|
*/
|
|
123
123
|
tableSettings?: TableSettings;
|
|
124
|
+
/**
|
|
125
|
+
* Callback to check if a row is selectable or not
|
|
126
|
+
*/
|
|
127
|
+
isRowSelectable?: (row: Row<TItem>) => boolean;
|
|
124
128
|
};
|
|
125
129
|
export type TableSettings = {
|
|
126
130
|
/**
|