@symply.io/basic-components 1.7.0-beta.3 → 1.7.0-beta.5

package/README.md

@@ -977,7 +977,7 @@ Reusable data table component with virtualizer
 ```tsx
 import { VirtualDataTablev } from '@symply.io/basic-components';
 // or 
-import VirtualDataTable, { useVirtualGird } from '@symply.io/basic-components/VirtualDataTable'; 
+import VirtualDataTable from '@symply.io/basic-components/VirtualDataTable'; 
 ```
 
 <h5>Column Props</h5>
@@ -1006,6 +1006,7 @@ import VirtualDataTable, { useVirtualGird } from '@symply.io/basic-components/Vi
 
 | Name                  | Type                       | Default    | Required | Description                                                  |
 | --------------------- | -------------------------- | ---------- | -------- | ------------------------------------------------------------ |
+| aux                   | {[name:string]: any}       |            | false    | Extra properties                                             |
 | columns               | Array                      | []         | true     | Table columns                                                |
 | dense                 | bool                       |            | false    | If `true` the table size/density would be tight.             |
 | footerBgColor         | CSSProperties["color"]     |            | false    | Customized footer background color.                          |

package/VirtualDataTable/index.d.ts

@@ -1,7 +1,7 @@
 import { ForwardedRef } from "react";
-import type { VirtualTableProps, TVirtualTableRow, TVirtualTableOptions, VirtualDataTableRefProps } from "./types";
-declare const VirtualDataTable: <RowProps extends TVirtualTableRow, OptionProps extends TVirtualTableOptions>(props: VirtualTableProps<RowProps, OptionProps>, ref: ForwardedRef<VirtualDataTableRefProps>) => import("react/jsx-runtime").JSX.Element;
-declare const _default: <RowProps extends TVirtualTableRow, OptionProps extends TVirtualTableOptions>(props: VirtualTableProps<RowProps, OptionProps> & {
+import type { VirtualTableProps, TVirtualTableRow, TVirtualTableAuxiliary, VirtualDataTableRefProps } from "./types";
+declare const VirtualDataTable: <RowProps extends TVirtualTableRow, AuxProps extends TVirtualTableAuxiliary>(props: VirtualTableProps<RowProps, AuxProps>, ref: ForwardedRef<VirtualDataTableRefProps>) => import("react/jsx-runtime").JSX.Element;
+declare const _default: <RowProps extends TVirtualTableRow, AuxProps extends TVirtualTableAuxiliary>(props: VirtualTableProps<RowProps, AuxProps> & {
     ref?: ForwardedRef<VirtualDataTableRefProps> | undefined;
 }) => ReturnType<typeof VirtualDataTable>;
 export default _default;

package/VirtualDataTable/index.js

@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState, forwardRef, useCallback, cloneElement, useImperativeHandle, } from "react";
 import { TableVirtuoso } from "react-virtuoso";
@@ -22,7 +31,7 @@ import TableContainer from "@mui/material/TableContainer";
 import Typography from "@mui/material/Typography";
 import useInteractions from "./useInteractions";
 var VirtualDataTable = function (props, ref) {
-    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, options = props.options, initialState = props.initialState, onSort = props.onSort, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
+    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;
     var _b = useState(null), rowDataIndex = _b[0], setRowDataIndex = _b[1];
     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;
     useImperativeHandle(ref, function () { return ({
@@ -77,7 +86,7 @@ var VirtualDataTable = function (props, ref) {
                                     boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
                                 }
                                 : undefined,
-                        } }, { children: [cloneElement(Header, { column: column, rows: rows, options: options }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
+                        } }, { children: [cloneElement(Header, { column: column, rows: rows, aux: aux }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
                 }), normalCols.map(function (column) {
                     var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
                     var canSortBy = sortable && !sortingDisabled;
@@ -91,7 +100,7 @@ var VirtualDataTable = function (props, ref) {
                             cursor: canSortBy ? "pointer" : "default",
                             backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
                             color: "".concat(headerTextColor || "inherit", " !important"),
-                        } }, { children: [cloneElement(Header, { column: column, rows: rows, options: options }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
+                        } }, { children: [cloneElement(Header, { column: column, rows: rows, aux: aux }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
                 }), pinnedRightCols.map(function (column, index) {
                     var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
                     var canSortBy = sortable && !sortingDisabled;
@@ -123,9 +132,11 @@ var VirtualDataTable = function (props, ref) {
                                     boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
                                 }
                                 : undefined,
-                        } }, { children: [cloneElement(Header, { column: column, rows: rows, options: options }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
+                        } }, { children: [cloneElement(Header, { column: column, rows: rows, aux: aux }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
                 })] })));
     }, [
+        aux,
+        rows,
         normalCols,
         pinnedLeftCols,
         pinnedRightCols,
@@ -138,72 +149,79 @@ var VirtualDataTable = function (props, ref) {
         renderSortingSymbol,
     ]);
     var fixedFooterContent = useCallback(function () {
-        return (_jsxs(TableRow, __assign({ sx: {
-                backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
-                color: "".concat(footerTextColor || "inherit", " !important"),
-                width: "100%F",
-            } }, { children: [pinnedLeftCols.map(function (column, index) {
-                    var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
-                    var left = pinnedLeftCols
-                        .slice(0, index)
-                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
-                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
-                            position: "sticky",
-                            left: left,
-                            width: width,
-                            userSelect: "none",
-                            backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
-                            color: "".concat(footerTextColor || "inherit", " !important"),
-                            "&::after": index === pinnedLeftCols.length - 1 && leftShadowVisible
-                                ? {
-                                    position: "absolute",
-                                    top: 0,
-                                    right: 0,
-                                    bottom: "-1px",
-                                    width: "20px",
-                                    transform: "translateX(100%)",
-                                    transition: "box-shadow .3s",
-                                    content: "''",
-                                    boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
-                                }
-                                : undefined,
-                        } }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, options: options }) : _jsx(_Fragment, {}) }), accessor));
-                }), normalCols.map(function (column) {
-                    var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
-                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
-                            width: width,
-                            userSelect: "none",
-                            backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
-                            color: "".concat(footerTextColor || "inherit", " !important"),
-                        } }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, options: options }) : _jsx(_Fragment, {}) }), accessor));
-                }), pinnedRightCols.map(function (column, index) {
-                    var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
-                    var right = pinnedRightCols
-                        .slice(0, pinnedRightCols.length - 1 - index)
-                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
-                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
-                            position: "sticky",
-                            right: right,
-                            width: width,
-                            userSelect: "none",
-                            backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
-                            color: "".concat(footerTextColor || "inherit", " !important"),
-                            "&::after": index === 0 && rightShadowVisible
-                                ? {
-                                    position: "absolute",
-                                    top: 0,
-                                    left: 0,
-                                    bottom: "-1px",
-                                    width: "20px",
-                                    transform: "translateX(-100%)",
-                                    transition: "box-shadow .3s",
-                                    content: "''",
-                                    boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
-                                }
-                                : undefined,
-                        } }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, options: options }) : _jsx(_Fragment, {}) }), accessor));
-                })] })));
+        if (__spreadArray(__spreadArray(__spreadArray([], pinnedLeftCols, true), normalCols, true), pinnedRightCols, true).some(function (c) { return c.Footer; })) {
+            return (_jsxs(TableRow, __assign({ sx: {
+                    backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
+                    color: "".concat(footerTextColor || "inherit", " !important"),
+                    width: "100%",
+                } }, { children: [pinnedLeftCols.map(function (column, index) {
+                        var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
+                        var left = pinnedLeftCols
+                            .slice(0, index)
+                            .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                        return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                                position: "sticky",
+                                left: left,
+                                width: width,
+                                userSelect: "none",
+                                backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
+                                color: "".concat(footerTextColor || "inherit", " !important"),
+                                "&::after": index === pinnedLeftCols.length - 1 && leftShadowVisible
+                                    ? {
+                                        position: "absolute",
+                                        top: 0,
+                                        right: 0,
+                                        bottom: "-1px",
+                                        width: "20px",
+                                        transform: "translateX(100%)",
+                                        transition: "box-shadow .3s",
+                                        content: "''",
+                                        boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
+                                    }
+                                    : undefined,
+                            } }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, aux: aux }) : _jsx(_Fragment, {}) }), accessor));
+                    }), normalCols.map(function (column) {
+                        var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
+                        return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                                width: width,
+                                userSelect: "none",
+                                backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
+                                color: "".concat(footerTextColor || "inherit", " !important"),
+                            } }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, aux: aux }) : _jsx(_Fragment, {}) }), accessor));
+                    }), pinnedRightCols.map(function (column, index) {
+                        var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
+                        var right = pinnedRightCols
+                            .slice(0, pinnedRightCols.length - 1 - index)
+                            .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                        return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                                position: "sticky",
+                                right: right,
+                                width: width,
+                                userSelect: "none",
+                                backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
+                                color: "".concat(footerTextColor || "inherit", " !important"),
+                                "&::after": index === 0 && rightShadowVisible
+                                    ? {
+                                        position: "absolute",
+                                        top: 0,
+                                        left: 0,
+                                        bottom: "-1px",
+                                        width: "20px",
+                                        transform: "translateX(-100%)",
+                                        transition: "box-shadow .3s",
+                                        content: "''",
+                                        boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
+                                    }
+                                    : undefined,
+                            } }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, aux: aux }) : _jsx(_Fragment, {}) }), accessor));
+                    })] })));
+        }
+        else {
+            return undefined;
+        }
     }, [
+        aux,
+        rows,
         normalCols,
         pinnedLeftCols,
         pinnedRightCols,
@@ -240,7 +258,7 @@ var VirtualDataTable = function (props, ref) {
                                     boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
                                 }
                                 : undefined,
-                        } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, options: options }) }), accessor));
+                        } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, aux: aux }) }), accessor));
                 }), normalCols.map(function (column) {
                     var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
                     return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
@@ -248,7 +266,7 @@ var VirtualDataTable = function (props, ref) {
                             backgroundColor: (onRowClick && rowDataIndex === rowIndex
                                 ? hover
                                 : normal) || "background.paper",
-                        } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, options: options }) }), accessor));
+                        } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, aux: aux }) }), accessor));
                 }), pinnedRightCols.map(function (column, index) {
                     var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
                     var right = pinnedRightCols
@@ -275,9 +293,10 @@ var VirtualDataTable = function (props, ref) {
                                     boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
                                 }
                                 : undefined,
-                        } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, options: options }) }), accessor));
+                        } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, aux: aux }) }), accessor));
                 })] }));
     }, [
+        aux,
         rows,
         rowDataIndex,
         normalCols,
@@ -330,6 +349,6 @@ var VirtualDataTable = function (props, ref) {
         TableBody: forwardRef(function (props, ref) { return (_jsx(TableBody, __assign({}, props, { ref: ref }))); }),
         TableFoot: forwardRef(function (props, ref) { return (_jsx(TableFooter, __assign({}, props, { ref: ref }))); }),
     }); }, [onRowClick, onContextMenu, handleCustomizeRowBgColor]);
-    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 }));
+    return (_jsx(TableVirtuoso, { data: rows, increaseViewportBy: { top: 320, bottom: 480 }, initialTopMostItemIndex: 0, style: { height: height }, onScroll: onScroll, onResize: onScroll, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, fixedFooterContent: fixedFooterContent, itemContent: itemContent, scrollerRef: reflectScrollerRef }));
 };
 export default forwardRef(VirtualDataTable);

package/VirtualDataTable/types.d.ts

@@ -13,7 +13,7 @@ declare type InitialVirtualDataTableStateProps = {
     sortBy?: VirtualDataTableSortingProps;
 };
 export declare type TVirtualTableRow = Record<string, any>;
-export declare type TVirtualTableOptions = Record<string, any>;
+export declare type TVirtualTableAuxiliary = Record<string, any>;
 export declare type TVirtualTableColumn = {
     headerTip?: string;
     Header: ReactElement;
@@ -32,7 +32,7 @@ export interface InteractionProps<RowProps extends TVirtualTableRow> {
     sortingDisabled?: boolean;
     onSort?: (props: VirtualDataTableSortingProps) => unknown;
 }
-export interface VirtualTableProps<RowProps extends TVirtualTableRow, OptionProps extends TVirtualTableOptions> extends InteractionProps<RowProps> {
+export interface VirtualTableProps<RowProps extends TVirtualTableRow, AuxProps extends TVirtualTableAuxiliary> extends InteractionProps<RowProps> {
     dense?: boolean;
     height: number;
     headerBgColor?: CSSProperties["color"];
@@ -46,7 +46,7 @@ export interface VirtualTableProps<RowProps extends TVirtualTableRow, OptionProp
         row: RowProps;
         columns: Array<TVirtualTableColumn>;
     }) => CustomVirtualTableRowBgColor;
-    options?: OptionProps;
+    aux?: AuxProps;
 }
 export declare type VirtualDataTableRefProps = {
     onResetSorting: () => void;

package/VirtualDataTable/useInteractions.js

@@ -97,6 +97,9 @@ function useInteractions(props) {
     }, [columns, onScroll]);
     useEffect(function () {
         window.addEventListener("resize", onScroll);
+        return function () {
+            window.removeEventListener("resize", onScroll);
+        };
     }, [onScroll]);
     return {
         normalCols: normalCols,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.7.0-beta.3",
+  "version": "1.7.0-beta.5",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",