@symply.io/basic-components 1.7.0-beta.2 → 1.7.0-beta.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 +2 -1
- package/VirtualDataTable/index.d.ts +3 -3
- package/VirtualDataTable/index.js +92 -73
- package/VirtualDataTable/types.d.ts +3 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -977,7 +977,7 @@ Reusable data table component with virtualizer
|
|
|
977
977
|
```tsx
|
|
978
978
|
import { VirtualDataTablev } from '@symply.io/basic-components';
|
|
979
979
|
// or
|
|
980
|
-
import VirtualDataTable
|
|
980
|
+
import VirtualDataTable from '@symply.io/basic-components/VirtualDataTable';
|
|
981
981
|
```
|
|
982
982
|
|
|
983
983
|
<h5>Column Props</h5>
|
|
@@ -1006,6 +1006,7 @@ import VirtualDataTable, { useVirtualGird } from '@symply.io/basic-components/Vi
|
|
|
1006
1006
|
|
|
1007
1007
|
| Name | Type | Default | Required | Description |
|
|
1008
1008
|
| --------------------- | -------------------------- | ---------- | -------- | ------------------------------------------------------------ |
|
|
1009
|
+
| aux | {[name:string]: any} | | false | Extra properties |
|
|
1009
1010
|
| columns | Array | [] | true | Table columns |
|
|
1010
1011
|
| dense | bool | | false | If `true` the table size/density would be tight. |
|
|
1011
1012
|
| footerBgColor | CSSProperties["color"] | | false | Customized footer background color. |
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ForwardedRef } from "react";
|
|
2
|
-
import type { VirtualTableProps, TVirtualTableRow,
|
|
3
|
-
declare const VirtualDataTable: <RowProps extends TVirtualTableRow,
|
|
4
|
-
declare const _default: <RowProps extends TVirtualTableRow,
|
|
2
|
+
import type { VirtualTableProps, TVirtualTableRow, TVirtualTableAuxiliary, VirtualDataTableRefProps } from "./types";
|
|
3
|
+
declare const VirtualDataTable: <RowProps extends TVirtualTableRow, AuxProps extends TVirtualTableAuxiliary>(props: VirtualTableProps<RowProps, AuxProps>, ref: ForwardedRef<VirtualDataTableRefProps>) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare const _default: <RowProps extends TVirtualTableRow, AuxProps extends TVirtualTableAuxiliary>(props: VirtualTableProps<RowProps, AuxProps> & {
|
|
5
5
|
ref?: ForwardedRef<VirtualDataTableRefProps> | undefined;
|
|
6
6
|
}) => ReturnType<typeof VirtualDataTable>;
|
|
7
7
|
export default _default;
|
|
@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
13
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
14
|
+
if (ar || !(i in from)) {
|
|
15
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
16
|
+
ar[i] = from[i];
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
20
|
+
};
|
|
12
21
|
import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
13
22
|
import { useMemo, useState, forwardRef, useCallback, cloneElement, useImperativeHandle, } from "react";
|
|
14
23
|
import { TableVirtuoso } from "react-virtuoso";
|
|
@@ -22,7 +31,7 @@ import TableContainer from "@mui/material/TableContainer";
|
|
|
22
31
|
import Typography from "@mui/material/Typography";
|
|
23
32
|
import useInteractions from "./useInteractions";
|
|
24
33
|
var VirtualDataTable = function (props, ref) {
|
|
25
|
-
var rows = props.rows, columns = props.columns, dense = props.dense, height = props.height, _a = props.noDataText, noDataText = _a === void 0 ? "No Data" : _a, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, sortingDisabled = props.sortingDisabled,
|
|
34
|
+
var aux = props.aux, rows = props.rows, columns = props.columns, dense = props.dense, height = props.height, _a = props.noDataText, noDataText = _a === void 0 ? "No Data" : _a, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, sortingDisabled = props.sortingDisabled, initialState = props.initialState, onSort = props.onSort, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
|
|
26
35
|
var _b = useState(null), rowDataIndex = _b[0], setRowDataIndex = _b[1];
|
|
27
36
|
var _c = useInteractions({ rows: rows, columns: columns, initialState: initialState, sortingDisabled: sortingDisabled, onSort: onSort }), normalCols = _c.normalCols, pinnedLeftCols = _c.pinnedLeftCols, pinnedRightCols = _c.pinnedRightCols, leftShadowVisible = _c.leftShadowVisible, rightShadowVisible = _c.rightShadowVisible, onScroll = _c.onScroll, handleSort = _c.handleSort, onResetSorting = _c.onResetSorting, reflectScrollerRef = _c.reflectScrollerRef, renderSortingSymbol = _c.renderSortingSymbol;
|
|
28
37
|
useImperativeHandle(ref, function () { return ({
|
|
@@ -77,7 +86,7 @@ var VirtualDataTable = function (props, ref) {
|
|
|
77
86
|
boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
78
87
|
}
|
|
79
88
|
: undefined,
|
|
80
|
-
} }, { children: [cloneElement(Header, { column: column, rows: rows,
|
|
89
|
+
} }, { children: [cloneElement(Header, { column: column, rows: rows, aux: aux }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
|
|
81
90
|
}), normalCols.map(function (column) {
|
|
82
91
|
var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
|
|
83
92
|
var canSortBy = sortable && !sortingDisabled;
|
|
@@ -91,7 +100,7 @@ var VirtualDataTable = function (props, ref) {
|
|
|
91
100
|
cursor: canSortBy ? "pointer" : "default",
|
|
92
101
|
backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
|
|
93
102
|
color: "".concat(headerTextColor || "inherit", " !important"),
|
|
94
|
-
} }, { children: [cloneElement(Header, { column: column, rows: rows,
|
|
103
|
+
} }, { children: [cloneElement(Header, { column: column, rows: rows, aux: aux }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
|
|
95
104
|
}), pinnedRightCols.map(function (column, index) {
|
|
96
105
|
var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
|
|
97
106
|
var canSortBy = sortable && !sortingDisabled;
|
|
@@ -123,9 +132,11 @@ var VirtualDataTable = function (props, ref) {
|
|
|
123
132
|
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
124
133
|
}
|
|
125
134
|
: undefined,
|
|
126
|
-
} }, { children: [cloneElement(Header, { column: column, rows: rows,
|
|
135
|
+
} }, { children: [cloneElement(Header, { column: column, rows: rows, aux: aux }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
|
|
127
136
|
})] })));
|
|
128
137
|
}, [
|
|
138
|
+
aux,
|
|
139
|
+
rows,
|
|
129
140
|
normalCols,
|
|
130
141
|
pinnedLeftCols,
|
|
131
142
|
pinnedRightCols,
|
|
@@ -138,72 +149,79 @@ var VirtualDataTable = function (props, ref) {
|
|
|
138
149
|
renderSortingSymbol,
|
|
139
150
|
]);
|
|
140
151
|
var fixedFooterContent = useCallback(function () {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
152
|
+
if (__spreadArray(__spreadArray(__spreadArray([], pinnedLeftCols, true), normalCols, true), pinnedRightCols, true).some(function (c) { return c.Footer; })) {
|
|
153
|
+
return (_jsxs(TableRow, __assign({ sx: {
|
|
154
|
+
backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
|
|
155
|
+
color: "".concat(footerTextColor || "inherit", " !important"),
|
|
156
|
+
width: "100%",
|
|
157
|
+
} }, { children: [pinnedLeftCols.map(function (column, index) {
|
|
158
|
+
var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
|
|
159
|
+
var left = pinnedLeftCols
|
|
160
|
+
.slice(0, index)
|
|
161
|
+
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
162
|
+
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
163
|
+
position: "sticky",
|
|
164
|
+
left: left,
|
|
165
|
+
width: width,
|
|
166
|
+
userSelect: "none",
|
|
167
|
+
backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
|
|
168
|
+
color: "".concat(footerTextColor || "inherit", " !important"),
|
|
169
|
+
"&::after": index === pinnedLeftCols.length - 1 && leftShadowVisible
|
|
170
|
+
? {
|
|
171
|
+
position: "absolute",
|
|
172
|
+
top: 0,
|
|
173
|
+
right: 0,
|
|
174
|
+
bottom: "-1px",
|
|
175
|
+
width: "20px",
|
|
176
|
+
transform: "translateX(100%)",
|
|
177
|
+
transition: "box-shadow .3s",
|
|
178
|
+
content: "''",
|
|
179
|
+
boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
180
|
+
}
|
|
181
|
+
: undefined,
|
|
182
|
+
} }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, aux: aux }) : _jsx(_Fragment, {}) }), accessor));
|
|
183
|
+
}), normalCols.map(function (column) {
|
|
184
|
+
var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
|
|
185
|
+
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
186
|
+
width: width,
|
|
187
|
+
userSelect: "none",
|
|
188
|
+
backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
|
|
189
|
+
color: "".concat(footerTextColor || "inherit", " !important"),
|
|
190
|
+
} }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, aux: aux }) : _jsx(_Fragment, {}) }), accessor));
|
|
191
|
+
}), pinnedRightCols.map(function (column, index) {
|
|
192
|
+
var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
|
|
193
|
+
var right = pinnedRightCols
|
|
194
|
+
.slice(0, pinnedRightCols.length - 1 - index)
|
|
195
|
+
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
196
|
+
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
197
|
+
position: "sticky",
|
|
198
|
+
right: right,
|
|
199
|
+
width: width,
|
|
200
|
+
userSelect: "none",
|
|
201
|
+
backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
|
|
202
|
+
color: "".concat(footerTextColor || "inherit", " !important"),
|
|
203
|
+
"&::after": index === 0 && rightShadowVisible
|
|
204
|
+
? {
|
|
205
|
+
position: "absolute",
|
|
206
|
+
top: 0,
|
|
207
|
+
left: 0,
|
|
208
|
+
bottom: "-1px",
|
|
209
|
+
width: "20px",
|
|
210
|
+
transform: "translateX(-100%)",
|
|
211
|
+
transition: "box-shadow .3s",
|
|
212
|
+
content: "''",
|
|
213
|
+
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
214
|
+
}
|
|
215
|
+
: undefined,
|
|
216
|
+
} }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, aux: aux }) : _jsx(_Fragment, {}) }), accessor));
|
|
217
|
+
})] })));
|
|
218
|
+
}
|
|
219
|
+
else {
|
|
220
|
+
return undefined;
|
|
221
|
+
}
|
|
206
222
|
}, [
|
|
223
|
+
aux,
|
|
224
|
+
rows,
|
|
207
225
|
normalCols,
|
|
208
226
|
pinnedLeftCols,
|
|
209
227
|
pinnedRightCols,
|
|
@@ -240,7 +258,7 @@ var VirtualDataTable = function (props, ref) {
|
|
|
240
258
|
boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
241
259
|
}
|
|
242
260
|
: undefined,
|
|
243
|
-
} }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex,
|
|
261
|
+
} }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, aux: aux }) }), accessor));
|
|
244
262
|
}), normalCols.map(function (column) {
|
|
245
263
|
var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
|
|
246
264
|
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
@@ -248,7 +266,7 @@ var VirtualDataTable = function (props, ref) {
|
|
|
248
266
|
backgroundColor: (onRowClick && rowDataIndex === rowIndex
|
|
249
267
|
? hover
|
|
250
268
|
: normal) || "background.paper",
|
|
251
|
-
} }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex,
|
|
269
|
+
} }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, aux: aux }) }), accessor));
|
|
252
270
|
}), pinnedRightCols.map(function (column, index) {
|
|
253
271
|
var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
|
|
254
272
|
var right = pinnedRightCols
|
|
@@ -275,9 +293,10 @@ var VirtualDataTable = function (props, ref) {
|
|
|
275
293
|
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
276
294
|
}
|
|
277
295
|
: undefined,
|
|
278
|
-
} }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex,
|
|
296
|
+
} }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, aux: aux }) }), accessor));
|
|
279
297
|
})] }));
|
|
280
298
|
}, [
|
|
299
|
+
aux,
|
|
281
300
|
rows,
|
|
282
301
|
rowDataIndex,
|
|
283
302
|
normalCols,
|
|
@@ -330,6 +349,6 @@ var VirtualDataTable = function (props, ref) {
|
|
|
330
349
|
TableBody: forwardRef(function (props, ref) { return (_jsx(TableBody, __assign({}, props, { ref: ref }))); }),
|
|
331
350
|
TableFoot: forwardRef(function (props, ref) { return (_jsx(TableFooter, __assign({}, props, { ref: ref }))); }),
|
|
332
351
|
}); }, [onRowClick, onContextMenu, handleCustomizeRowBgColor]);
|
|
333
|
-
return (_jsx(TableVirtuoso, { data: rows, initialTopMostItemIndex: 0, style: { height: height }, onScroll: onScroll, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, fixedFooterContent: fixedFooterContent, itemContent: itemContent, followOutput: "smooth", scrollerRef: reflectScrollerRef }));
|
|
352
|
+
return (_jsx(TableVirtuoso, { data: rows, increaseViewportBy: { top: 5, bottom: 8 }, initialTopMostItemIndex: 0, style: { height: height }, onScroll: onScroll, onResize: onScroll, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, fixedFooterContent: fixedFooterContent, itemContent: itemContent, followOutput: "smooth", scrollerRef: reflectScrollerRef }));
|
|
334
353
|
};
|
|
335
354
|
export default forwardRef(VirtualDataTable);
|
|
@@ -13,7 +13,7 @@ declare type InitialVirtualDataTableStateProps = {
|
|
|
13
13
|
sortBy?: VirtualDataTableSortingProps;
|
|
14
14
|
};
|
|
15
15
|
export declare type TVirtualTableRow = Record<string, any>;
|
|
16
|
-
export declare type
|
|
16
|
+
export declare type TVirtualTableAuxiliary = Record<string, any>;
|
|
17
17
|
export declare type TVirtualTableColumn = {
|
|
18
18
|
headerTip?: string;
|
|
19
19
|
Header: ReactElement;
|
|
@@ -32,7 +32,7 @@ export interface InteractionProps<RowProps extends TVirtualTableRow> {
|
|
|
32
32
|
sortingDisabled?: boolean;
|
|
33
33
|
onSort?: (props: VirtualDataTableSortingProps) => unknown;
|
|
34
34
|
}
|
|
35
|
-
export interface VirtualTableProps<RowProps extends TVirtualTableRow,
|
|
35
|
+
export interface VirtualTableProps<RowProps extends TVirtualTableRow, AuxProps extends TVirtualTableAuxiliary> extends InteractionProps<RowProps> {
|
|
36
36
|
dense?: boolean;
|
|
37
37
|
height: number;
|
|
38
38
|
headerBgColor?: CSSProperties["color"];
|
|
@@ -46,7 +46,7 @@ export interface VirtualTableProps<RowProps extends TVirtualTableRow, OptionProp
|
|
|
46
46
|
row: RowProps;
|
|
47
47
|
columns: Array<TVirtualTableColumn>;
|
|
48
48
|
}) => CustomVirtualTableRowBgColor;
|
|
49
|
-
|
|
49
|
+
aux?: AuxProps;
|
|
50
50
|
}
|
|
51
51
|
export declare type VirtualDataTableRefProps = {
|
|
52
52
|
onResetSorting: () => void;
|