@ackplus/react-tanstack-data-table 1.1.16 → 1.1.17
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 +0 -8
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -1
- package/dist/lib/components/data-table-view.d.ts +7 -0
- package/dist/lib/components/data-table-view.d.ts.map +1 -0
- package/dist/lib/components/data-table-view.js +151 -0
- package/dist/lib/components/toolbar/data-table-toolbar.d.ts.map +1 -1
- package/dist/lib/components/toolbar/data-table-toolbar.js +14 -1
- package/dist/lib/components/toolbar/table-export-control.d.ts.map +1 -1
- package/dist/lib/components/toolbar/table-export-control.js +0 -2
- package/dist/lib/data-table.d.ts +0 -3
- package/dist/lib/data-table.d.ts.map +1 -1
- package/dist/lib/data-table.js +9 -1638
- package/dist/lib/hooks/index.d.ts +3 -0
- package/dist/lib/hooks/index.d.ts.map +1 -0
- package/dist/lib/hooks/index.js +5 -0
- package/dist/lib/hooks/use-data-table-engine.d.ts +104 -0
- package/dist/lib/hooks/use-data-table-engine.d.ts.map +1 -0
- package/dist/lib/hooks/use-data-table-engine.js +961 -0
- package/dist/lib/types/data-table.types.d.ts +0 -1
- package/dist/lib/types/data-table.types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +4 -0
- package/src/lib/components/data-table-view.tsx +386 -0
- package/src/lib/components/toolbar/data-table-toolbar.tsx +15 -1
- package/src/lib/components/toolbar/table-export-control.tsx +0 -2
- package/src/lib/data-table.tsx +17 -2183
- package/src/lib/hooks/index.ts +2 -0
- package/src/lib/hooks/use-data-table-engine.ts +1282 -0
- package/src/lib/types/data-table.types.ts +0 -1
package/README.md
CHANGED
|
@@ -131,7 +131,6 @@ function MyDataTable() {
|
|
|
131
131
|
| `initialLoadData` | `boolean` | `true` | Load data on component mount |
|
|
132
132
|
| `onFetchData` | `(filters, meta?) => Promise<{data, total}>` | - | Server-side data fetching with optional refresh metadata (`reason`, `force`) |
|
|
133
133
|
| `onRefreshData` | `(context) => void \| Promise<void>` | - | External refresh handler for controlled data sources (React Query, SWR, etc.) |
|
|
134
|
-
| `onDataChange` | `(nextData, context) => void` | - | Receives mutations from `apiRef.data.*` when data is controlled by props |
|
|
135
134
|
| `onDataStateChange` | `(state) => void` | - | Called when table state changes |
|
|
136
135
|
| `totalRow` | `number` | `0` | Total rows for server-side pagination |
|
|
137
136
|
|
|
@@ -616,13 +615,6 @@ function ReactQueryTable() {
|
|
|
616
615
|
refetchType: options.force ? 'all' : 'active',
|
|
617
616
|
})
|
|
618
617
|
}
|
|
619
|
-
// Row mutation sync stays outside DataTable
|
|
620
|
-
onDataChange={(nextData) => {
|
|
621
|
-
queryClient.setQueryData(queryKey, (prev: any) => {
|
|
622
|
-
if (!prev) return prev;
|
|
623
|
-
return { ...prev, data: nextData };
|
|
624
|
-
});
|
|
625
|
-
}}
|
|
626
618
|
/>
|
|
627
619
|
);
|
|
628
620
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -18,6 +18,10 @@
|
|
|
18
18
|
* - Loading states and empty data handling
|
|
19
19
|
*/
|
|
20
20
|
export { DataTable } from './lib/data-table';
|
|
21
|
+
export { DataTableView } from './lib/components/data-table-view';
|
|
22
|
+
export type { DataTableViewProps } from './lib/components/data-table-view';
|
|
23
|
+
export { useDataTableEngine } from './lib/hooks';
|
|
24
|
+
export type { EngineResult } from './lib/hooks';
|
|
21
25
|
export * from './lib/components/headers';
|
|
22
26
|
export * from './lib/components/rows';
|
|
23
27
|
export * from './lib/components/filters';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,YAAY,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0CAA0C,CAAC;AAGzD,OAAO,EACH,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,GACnB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAGxE,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AAGnC,cAAc,aAAa,CAAC;AAG5B,YAAY,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,KAAK,EACL,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,GAClB,MAAM,uBAAuB,CAAC;AAG/B,cAAc,gBAAgB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -33,10 +33,14 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
33
33
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
34
34
|
};
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
exports.DataTableToolbar = exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTable = void 0;
|
|
36
|
+
exports.DataTableToolbar = exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.useDataTableEngine = exports.DataTableView = exports.DataTable = void 0;
|
|
37
37
|
// Main components - be specific to avoid conflicts
|
|
38
38
|
var data_table_1 = require("./lib/data-table");
|
|
39
39
|
Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return data_table_1.DataTable; } });
|
|
40
|
+
var data_table_view_1 = require("./lib/components/data-table-view");
|
|
41
|
+
Object.defineProperty(exports, "DataTableView", { enumerable: true, get: function () { return data_table_view_1.DataTableView; } });
|
|
42
|
+
var hooks_1 = require("./lib/hooks");
|
|
43
|
+
Object.defineProperty(exports, "useDataTableEngine", { enumerable: true, get: function () { return hooks_1.useDataTableEngine; } });
|
|
40
44
|
// Other component exports
|
|
41
45
|
__exportStar(require("./lib/components/headers"), exports);
|
|
42
46
|
__exportStar(require("./lib/components/rows"), exports);
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { DataTableProps } from '../types/data-table.types';
|
|
2
|
+
import type { EngineResult } from '../hooks/use-data-table-engine';
|
|
3
|
+
export interface DataTableViewProps<T = any> extends DataTableProps<T> {
|
|
4
|
+
engine: EngineResult<T>;
|
|
5
|
+
}
|
|
6
|
+
export declare function DataTableView<T extends Record<string, any>>({ engine, extraFilter, footerFilter, enableGlobalFilter, enableColumnVisibility, enableColumnFilter, enableExport, enableReset, enableTableSizeControl, enableColumnPinning, enableRefresh, enableBulkActions, bulkActions, enableRowSelection, enableColumnDragging, enableColumnResizing, enableStickyHeaderOrFooter, maxHeight, enableVirtualization, enablePagination, tableProps, enableHover, enableStripes, emptyMessage, skeletonRows, onRowClick, selectOnRowClick, renderSubComponent, slots, slotProps, }: DataTableViewProps<T>): any;
|
|
7
|
+
//# sourceMappingURL=data-table-view.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-table-view.d.ts","sourceRoot":"","sources":["../../../src/lib/components/data-table-view.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAEnE,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAClE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EACzD,MAAM,EACN,WAAkB,EAClB,YAAmB,EACnB,kBAAyB,EACzB,sBAA6B,EAC7B,kBAA0B,EAC1B,YAAoB,EACpB,WAAkB,EAClB,sBAA6B,EAC7B,mBAA2B,EAC3B,aAAqB,EACrB,iBAAyB,EACzB,WAAW,EACX,kBAA0B,EAC1B,oBAA4B,EAC5B,oBAA4B,EAC5B,0BAAkC,EAClC,SAAmB,EACnB,oBAA4B,EAC5B,gBAAwB,EACxB,UAAe,EACf,WAAkB,EAClB,aAAqB,EACrB,YAAkC,EAClC,YAAgB,EAChB,UAAU,EACV,gBAAwB,EACxB,kBAAkB,EAClB,KAAU,EACV,SAAc,GACjB,EAAE,kBAAkB,CAAC,CAAC,CAAC,OA+UvB"}
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.DataTableView = DataTableView;
|
|
37
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
/**
|
|
39
|
+
* DataTableView – presentational layer for DataTable.
|
|
40
|
+
* Renders based on engine result; no fetch, export, or API logic.
|
|
41
|
+
*/
|
|
42
|
+
const material_1 = require("@mui/material");
|
|
43
|
+
const react_1 = __importStar(require("react"));
|
|
44
|
+
const slot_helpers_1 = require("../utils/slot-helpers");
|
|
45
|
+
const headers_1 = require("./headers");
|
|
46
|
+
const pagination_1 = require("./pagination");
|
|
47
|
+
const rows_1 = require("./rows");
|
|
48
|
+
const toolbar_1 = require("./toolbar");
|
|
49
|
+
function DataTableView({ engine, extraFilter = null, footerFilter = null, enableGlobalFilter = true, enableColumnVisibility = true, enableColumnFilter = false, enableExport = false, enableReset = true, enableTableSizeControl = true, enableColumnPinning = false, enableRefresh = false, enableBulkActions = false, bulkActions, enableRowSelection = false, enableColumnDragging = false, enableColumnResizing = false, enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, enablePagination = false, tableProps = {}, enableHover = true, enableStripes = false, emptyMessage = 'No data available', skeletonRows = 5, onRowClick, selectOnRowClick = false, renderSubComponent, slots = {}, slotProps = {}, }) {
|
|
50
|
+
const { table, refs, derived, state, actions, } = engine;
|
|
51
|
+
const { tableContainerRef, apiRef, } = refs;
|
|
52
|
+
const { tableLoading, rows, visibleLeafColumns, useFixedLayout, tableStyle, isSomeRowsSelected, selectedRowCount, tableTotalRow, } = derived;
|
|
53
|
+
const { pagination, selectionState, tableSize, } = state;
|
|
54
|
+
const { handleColumnReorder, renderRowModel, } = actions;
|
|
55
|
+
const rowVirtualizer = renderRowModel.rowVirtualizer;
|
|
56
|
+
const renderTableRows = (0, react_1.useCallback)(() => {
|
|
57
|
+
var _a, _b, _c, _d;
|
|
58
|
+
if (tableLoading) {
|
|
59
|
+
const { component: LoadingRowComponent, props: loadingRowProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'loadingRow', rows_1.LoadingRows, {});
|
|
60
|
+
return ((0, jsx_runtime_1.jsx)(LoadingRowComponent, { rowCount: enablePagination ? Math.min(pagination.pageSize, skeletonRows) : skeletonRows, colSpan: table.getAllColumns().length, slots: slots, slotProps: slotProps, ...loadingRowProps }));
|
|
61
|
+
}
|
|
62
|
+
if (rows.length === 0) {
|
|
63
|
+
const { component: EmptyRowComponent, props: emptyRowProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'emptyRow', rows_1.EmptyDataRow, {});
|
|
64
|
+
return ((0, jsx_runtime_1.jsx)(EmptyRowComponent, { colSpan: table.getAllColumns().length, message: emptyMessage, slots: slots, slotProps: slotProps, ...emptyRowProps }));
|
|
65
|
+
}
|
|
66
|
+
if (enableVirtualization && !enablePagination && rows.length > 0) {
|
|
67
|
+
const virtualItems = rowVirtualizer.getVirtualItems();
|
|
68
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [virtualItems.length > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: table.getAllColumns().length, style: {
|
|
69
|
+
height: `${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px`,
|
|
70
|
+
padding: 0,
|
|
71
|
+
border: 0,
|
|
72
|
+
} }) })), virtualItems.map((virtualRow) => {
|
|
73
|
+
const row = rows[virtualRow.index];
|
|
74
|
+
if (!row)
|
|
75
|
+
return null;
|
|
76
|
+
return ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, { row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: virtualRow.index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter, onRowClick: onRowClick, selectOnRowClick: selectOnRowClick, slots: slots, slotProps: slotProps }, row.id));
|
|
77
|
+
}), virtualItems.length > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: table.getAllColumns().length, style: {
|
|
78
|
+
height: `${rowVirtualizer.getTotalSize() -
|
|
79
|
+
((_d = (_c = virtualItems[virtualItems.length - 1]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0)}px`,
|
|
80
|
+
padding: 0,
|
|
81
|
+
border: 0,
|
|
82
|
+
} }) }))] }));
|
|
83
|
+
}
|
|
84
|
+
return rows.map((row, index) => ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, { row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter, onRowClick: onRowClick, selectOnRowClick: selectOnRowClick, slots: slots, slotProps: slotProps }, row.id)));
|
|
85
|
+
}, [
|
|
86
|
+
tableLoading,
|
|
87
|
+
rows,
|
|
88
|
+
enableVirtualization,
|
|
89
|
+
enablePagination,
|
|
90
|
+
pagination.pageSize,
|
|
91
|
+
skeletonRows,
|
|
92
|
+
table,
|
|
93
|
+
slotProps,
|
|
94
|
+
emptyMessage,
|
|
95
|
+
rowVirtualizer,
|
|
96
|
+
enableHover,
|
|
97
|
+
enableStripes,
|
|
98
|
+
renderSubComponent,
|
|
99
|
+
enableStickyHeaderOrFooter,
|
|
100
|
+
onRowClick,
|
|
101
|
+
selectOnRowClick,
|
|
102
|
+
slots,
|
|
103
|
+
]);
|
|
104
|
+
const { component: RootComponent, props: rootSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'root', material_1.Box, {});
|
|
105
|
+
const { component: ToolbarComponent, props: toolbarSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'toolbar', toolbar_1.DataTableToolbar, {});
|
|
106
|
+
const { component: BulkActionsComponent, props: bulkActionsSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'bulkActionsToolbar', toolbar_1.BulkActionsToolbar, {});
|
|
107
|
+
const { component: TableContainerComponent, props: tableContainerSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'tableContainer', material_1.TableContainer, {});
|
|
108
|
+
const { component: TableComponent, props: tableComponentSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'table', material_1.Table, {});
|
|
109
|
+
const { component: BodyComponent, props: bodySlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'body', material_1.TableBody, {});
|
|
110
|
+
const { component: FooterComponent, props: footerSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'footer', material_1.Box, {});
|
|
111
|
+
const { component: PaginationComponent, props: paginationSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'pagination', pagination_1.DataTablePagination, {});
|
|
112
|
+
return ((0, jsx_runtime_1.jsxs)(RootComponent, { ...rootSlotProps, children: [(enableGlobalFilter || extraFilter) ? ((0, jsx_runtime_1.jsx)(ToolbarComponent, { extraFilter: extraFilter, enableGlobalFilter: enableGlobalFilter, enableColumnVisibility: enableColumnVisibility, enableColumnFilter: enableColumnFilter, enableExport: enableExport, enableReset: enableReset, enableTableSizeControl: enableTableSizeControl, enableColumnPinning: enableColumnPinning, enableRefresh: enableRefresh, ...toolbarSlotProps, refreshButtonProps: {
|
|
113
|
+
loading: tableLoading,
|
|
114
|
+
showSpinnerWhileLoading: false,
|
|
115
|
+
onRefresh: () => { var _a, _b, _c; return (_c = (_b = (_a = apiRef.current) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.refresh) === null || _c === void 0 ? void 0 : _c.call(_b, true); },
|
|
116
|
+
...toolbarSlotProps.refreshButtonProps,
|
|
117
|
+
} })) : null, enableBulkActions && enableRowSelection && isSomeRowsSelected ? ((0, jsx_runtime_1.jsx)(BulkActionsComponent, { selectionState: selectionState, selectedRowCount: selectedRowCount, bulkActions: bulkActions, sx: {
|
|
118
|
+
position: 'relative',
|
|
119
|
+
zIndex: 2,
|
|
120
|
+
...bulkActionsSlotProps.sx,
|
|
121
|
+
}, ...bulkActionsSlotProps })) : null, (0, jsx_runtime_1.jsx)(TableContainerComponent, { component: material_1.Paper, ref: tableContainerRef, sx: {
|
|
122
|
+
width: '100%',
|
|
123
|
+
overflowX: 'auto',
|
|
124
|
+
...(enableStickyHeaderOrFooter && {
|
|
125
|
+
maxHeight,
|
|
126
|
+
overflowY: 'auto',
|
|
127
|
+
}),
|
|
128
|
+
...(enableVirtualization && {
|
|
129
|
+
maxHeight,
|
|
130
|
+
overflowY: 'auto',
|
|
131
|
+
}),
|
|
132
|
+
...tableContainerSlotProps === null || tableContainerSlotProps === void 0 ? void 0 : tableContainerSlotProps.sx,
|
|
133
|
+
}, ...tableContainerSlotProps, children: (0, jsx_runtime_1.jsxs)(TableComponent, { size: tableSize, stickyHeader: enableStickyHeaderOrFooter, style: {
|
|
134
|
+
...tableStyle,
|
|
135
|
+
...tableProps === null || tableProps === void 0 ? void 0 : tableProps.style,
|
|
136
|
+
}, ...(0, slot_helpers_1.mergeSlotProps)(tableProps || {}, tableComponentSlotProps), children: [useFixedLayout ? ((0, jsx_runtime_1.jsx)("colgroup", { children: visibleLeafColumns().map((column) => ((0, jsx_runtime_1.jsx)("col", { style: {
|
|
137
|
+
width: column.getSize(),
|
|
138
|
+
minWidth: column.columnDef.minSize,
|
|
139
|
+
maxWidth: column.columnDef.maxSize,
|
|
140
|
+
} }, column.id))) })) : null, (0, jsx_runtime_1.jsx)(headers_1.TableHeader, { draggable: enableColumnDragging, enableColumnResizing: enableColumnResizing, enableStickyHeader: enableStickyHeaderOrFooter, onColumnReorder: handleColumnReorder, slots: slots, slotProps: slotProps }), (0, jsx_runtime_1.jsx)(BodyComponent, { ...bodySlotProps, children: renderTableRows() })] }) }), enablePagination ? ((0, jsx_runtime_1.jsx)(FooterComponent, { sx: {
|
|
141
|
+
...(enableStickyHeaderOrFooter && {
|
|
142
|
+
position: 'sticky',
|
|
143
|
+
bottom: 0,
|
|
144
|
+
backgroundColor: 'background.paper',
|
|
145
|
+
borderTop: '1px solid',
|
|
146
|
+
borderColor: 'divider',
|
|
147
|
+
zIndex: 1,
|
|
148
|
+
}),
|
|
149
|
+
...footerSlotProps.sx,
|
|
150
|
+
}, ...footerSlotProps, children: (0, jsx_runtime_1.jsx)(PaginationComponent, { footerFilter: footerFilter, pagination: pagination, totalRow: tableTotalRow, ...paginationSlotProps }) })) : null] }));
|
|
151
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-toolbar.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/data-table-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKH,YAAY,EACZ,OAAO,EACV,MAAM,eAAe,CAAC;AACvB,OAAc,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAavD,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACvD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,GAAE,qBAA0B,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"data-table-toolbar.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/data-table-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKH,YAAY,EACZ,OAAO,EACV,MAAM,eAAe,CAAC;AACvB,OAAc,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAavD,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACvD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,GAAE,qBAA0B,GAAG,YAAY,CAsNhF"}
|
|
@@ -45,7 +45,20 @@ function DataTableToolbar(props = {}) {
|
|
|
45
45
|
table,
|
|
46
46
|
...otherProps,
|
|
47
47
|
}, toolbarSlotProps);
|
|
48
|
-
|
|
48
|
+
// Omit child-slot props so they are not spread onto the Toolbar DOM element (React warning)
|
|
49
|
+
const TOOLBAR_CHILD_SLOT_KEYS = [
|
|
50
|
+
'refreshButtonProps',
|
|
51
|
+
'searchInputProps',
|
|
52
|
+
'tableSizeControlProps',
|
|
53
|
+
'columnFilterProps',
|
|
54
|
+
'columnPinningProps',
|
|
55
|
+
'columnVisibilityProps',
|
|
56
|
+
'resetButtonProps',
|
|
57
|
+
'exportButtonProps',
|
|
58
|
+
];
|
|
59
|
+
const toolbarDomProps = { ...mergedToolbarProps };
|
|
60
|
+
TOOLBAR_CHILD_SLOT_KEYS.forEach((key) => delete toolbarDomProps[key]);
|
|
61
|
+
return ((0, jsx_runtime_1.jsx)(ToolbarSlot, { ...toolbarDomProps, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
|
|
49
62
|
width: '100%',
|
|
50
63
|
...containerSx,
|
|
51
64
|
}, children: [(title || subtitle) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 2 }, children: [title ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", sx: titleSx, children: title })) : null, subtitle ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: subtitleSx, children: subtitle })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-export-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/table-export-control.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,eAAe,EACf,OAAO,EAGV,MAAM,eAAe,CAAC;AAOvB,UAAU,uBAAuB;IAE7B,cAAc,CAAC,EAAE,MAAM,CAAC;IAMxB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,GAAE,uBAA4B,
|
|
1
|
+
{"version":3,"file":"table-export-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/table-export-control.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,eAAe,EACf,OAAO,EAGV,MAAM,eAAe,CAAC;AAOvB,UAAU,uBAAuB;IAE7B,cAAc,CAAC,EAAE,MAAM,CAAC;IAMxB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,GAAE,uBAA4B,OAoMrE"}
|
|
@@ -85,10 +85,8 @@ function TableExportControl(props = {}) {
|
|
|
85
85
|
...menuSx,
|
|
86
86
|
}, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { p: 2, pb: 1 }, children: "Export Format" }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
|
|
87
87
|
handleExport('csv');
|
|
88
|
-
handleClose();
|
|
89
88
|
}, disabled: isExporting, ...mergedMenuItemProps, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(CsvIconSlot, { ...csvIconSlotProps }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "CSV", secondary: "Comma-separated values" })] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
|
|
90
89
|
handleExport('excel');
|
|
91
|
-
handleClose();
|
|
92
90
|
}, disabled: isExporting, ...mergedMenuItemProps, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExcelIconSlot, { ...excelIconSlotProps }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Excel", secondary: "Microsoft Excel format" })] }), isExporting && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { px: 2, pb: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", sx: { display: 'block', mb: 0.75 }, children: getPhaseLabel() }), (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { variant: progressPercentage !== undefined ? 'determinate' : 'indeterminate', value: progressPercentage !== undefined ? progressPercentage : 0 }), ((exportProgress === null || exportProgress === void 0 ? void 0 : exportProgress.processedRows) !== undefined || (exportProgress === null || exportProgress === void 0 ? void 0 : exportProgress.totalRows) !== undefined) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", sx: { display: 'block', mt: 0.75 }, children: `${(_a = exportProgress === null || exportProgress === void 0 ? void 0 : exportProgress.processedRows) !== null && _a !== void 0 ? _a : 0}${(exportProgress === null || exportProgress === void 0 ? void 0 : exportProgress.totalRows) !== undefined ? ` / ${exportProgress.totalRows}` : ''}${progressPercentage !== undefined ? ` (${progressPercentage}%)` : ''}` }))] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { my: 1 } }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => {
|
|
93
91
|
handleCancelExport();
|
|
94
92
|
handleClose();
|
package/dist/lib/data-table.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/lib/data-table.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/lib/data-table.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,SAAS,KAapB,CAAC"}
|