@symply.io/basic-components 1.6.10 → 1.6.11-alpha.2

package/DataTable/TableBody.d.ts

@@ -1,3 +1,3 @@
-import { TableBodyProps, KvProps } from "./types";
+import type { TableBodyProps, KvProps } from "./types";
 declare function TBody<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableBodyProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
 export default TBody;

package/DataTable/TableBody.js

@@ -26,7 +26,9 @@ import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableBodyRow from "./TableBodyRow";
 function TBody(props) {
-    var rows = props.rows, columns = props.columns, _a = props.noDataText, noDataText = _a === void 0 ? "No Data!" : _a, rest = __rest(props, ["rows", "columns", "noDataText"]);
-    return (_jsx(TableBody, { children: rows.length > 0 ? (rows.map(function (row, index) { return (_jsx(TableBodyRow, __assign({ rowIndex: index, row: row, rows: rows, columns: columns }, rest), "DataTable_".concat(index))); })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) }));
+    var rows = props.rows, columns = props.columns, virtualRows = props.virtualRows, _a = props.noDataText, noDataText = _a === void 0 ? "No Data!" : _a, rest = __rest(props, ["rows", "columns", "virtualRows", "noDataText"]);
+    return (_jsx(TableBody, { children: virtualRows.length > 0 ? (virtualRows.map(function (virtualRow) {
+            return (_jsx(TableBodyRow, __assign({ rowIndex: virtualRow.index, virtualRow: virtualRow, rows: rows, columns: columns }, rest), "DataTable_".concat(virtualRow.key || virtualRow.index)));
+        })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) }));
 }
 export default TBody;

package/DataTable/TableBodyRow.d.ts

@@ -1,3 +1,3 @@
-import { TableBodyRowProps, KvProps } from "./types";
+import type { TableBodyRowProps, KvProps } from "./types";
 declare function TableBodyRow<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableBodyRowProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
 export default TableBodyRow;

package/DataTable/TableBodyRow.js

@@ -16,10 +16,11 @@ import TableCell from "@mui/material/TableCell";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useTheme from "@mui/material/styles/useTheme";
 function TableBodyRow(props) {
-    var row = props.row, rows = props.rows, columns = props.columns, rowIndex = props.rowIndex, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
+    var rows = props.rows, columns = props.columns, rowIndex = props.rowIndex, virtualRow = props.virtualRow, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
     var _a = useState(), rowEl = _a[0], setRowEl = _a[1];
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var row = useMemo(function () { return rows[virtualRow.index]; }, [rows, virtualRow]);
     var _b = useMemo(function () {
         if (isUpMd) {
             var left = columns.filter(function (c) { return c.fixable === "left"; });
@@ -37,17 +38,18 @@ function TableBodyRow(props) {
             var _a = onCustomizeRowBgColor({ row: row, columns: columns }), normal_1 = _a.normal, hover_1 = _a.hover;
             return {
                 normal: normal_1 && regex.test(normal_1) ? normal_1 : "#FEFEFE",
-                hover: hover_1 && regex.test(hover_1) ? hover_1 : "#F2F1F3"
+                hover: hover_1 && regex.test(hover_1) ? hover_1 : "#F2F1F3",
             };
         }
         return { normal: "#FEFEFE", hover: "#F2F1F3" };
     }, [row, columns, onCustomizeRowBgColor]), normal = _c.normal, hover = _c.hover;
     return (_jsxs(TableRow, __assign({ sx: {
             backgroundColor: normal,
+            transform: "translateY(".concat(virtualRow.start - rowIndex * virtualRow.size, "px)"),
             "&:hover": {
                 cursor: onRowClick ? "pointer" : "default",
-                backgroundColor: onRowClick ? hover : normal
-            }
+                backgroundColor: onRowClick ? hover : normal,
+            },
         }, onMouseEnter: function (event) {
             setRowEl(event.currentTarget);
         }, onMouseLeave: function () {
@@ -82,16 +84,16 @@ function TableBodyRow(props) {
                                 transform: "translateX(100%)",
                                 transition: "box-shadow .3s",
                                 content: "''",
-                                boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
+                                boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
                             }
-                            : undefined
+                            : undefined,
                     } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row, rowIndex: rowIndex }) }), accessor));
             }), dynamicCols.map(function (col) {
                 var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
                 return (_jsx(TableCell, __assign({ align: align, sx: {
                         width: width,
                         zIndex: 9,
-                        backgroundColor: onRowClick && rowEl ? hover : normal
+                        backgroundColor: onRowClick && rowEl ? hover : normal,
                     } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row, rowIndex: rowIndex }) }), accessor));
             }), fixedRightCols.map(function (col, index) {
                 var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
@@ -114,9 +116,9 @@ function TableBodyRow(props) {
                                 transform: "translateX(-100%)",
                                 transition: "box-shadow .3s",
                                 content: "''",
-                                boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
+                                boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
                             }
-                            : undefined
+                            : undefined,
                     } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row, rowIndex: rowIndex }) }), accessor));
             })] })));
 }

package/DataTable/TableFooter.d.ts

@@ -1,3 +1,5 @@
-import { TableFooterProps, KvProps } from "./types";
+/// <reference types="react" />
+import type { TableFooterProps, KvProps } from "./types";
 declare function TableFooter<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableFooterProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
-export default TableFooter;
+declare const _default: import("react").MemoExoticComponent<typeof TableFooter>;
+export default _default;

package/DataTable/TableFooter.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, useMemo } from "react";
+import { memo, cloneElement, useMemo } from "react";
 import TableRow from "@mui/material/TableRow";
 import Footer from "@mui/material/TableFooter";
 import TableCell from "@mui/material/TableCell";
@@ -99,4 +99,4 @@ function TableFooter(props) {
                         } }, { children: cloneElement(Cell) }), accessor));
                 })] })) })));
 }
-export default TableFooter;
+export default memo(TableFooter);

package/DataTable/TableHeader.d.ts

@@ -1,3 +1,5 @@
-import { TableHeaderProps, KvProps } from "./types";
+/// <reference types="react" />
+import type { TableHeaderProps, KvProps } from "./types";
 declare function TableHeader<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableHeaderProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
-export default TableHeader;
+declare const _default: import("react").MemoExoticComponent<typeof TableHeader>;
+export default _default;

package/DataTable/TableHeader.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, useMemo } from "react";
+import { memo, cloneElement, useMemo } from "react";
 import TableRow from "@mui/material/TableRow";
 import TableHead from "@mui/material/TableHead";
 import TableCell from "@mui/material/TableCell";
@@ -108,4 +108,4 @@ function TableHeader(props) {
                         } }, { children: cloneElement(Cell) }), accessor));
                 })] })) })));
 }
-export default TableHeader;
+export default memo(TableHeader);

package/DataTable/index.d.ts

@@ -1,5 +1,5 @@
 import useDataTable from "./useTable";
-import { DataTableProps, KvProps } from "./types";
+import type { DataTableProps, KvProps } from "./types";
 declare function DataTable<RowProps extends KvProps, ExtendedProps extends KvProps>(props: DataTableProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
 export default DataTable;
 export * from "./types";

package/DataTable/index.js

@@ -14,17 +14,29 @@ import { useState, useCallback, useRef, useEffect } from "react";
 import Table from "@mui/material/Table";
 import TableContainer from "@mui/material/TableContainer";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import useCustomTheme from "../useCustomTheme";
 import useDataTable from "./useTable";
 import TableBody from "./TableBody";
 import TableHeader from "./TableHeader";
 import TableFooter from "./TableFooter";
 function DataTable(props) {
-    var _a = props.columns, columns = _a === void 0 ? [] : _a, _b = props.rows, rows = _b === void 0 ? [] : _b, _c = props.headers, headers = _c === void 0 ? [] : _c, _d = props.footers, footers = _d === void 0 ? [] : _d, _e = props.noDataText, noDataText = _e === void 0 ? "No Data!" : _e, dense = props.dense, stickyHeader = props.stickyHeader, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
+    var dense = props.dense, _a = props.rows, rows = _a === void 0 ? [] : _a, _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.headers, headers = _c === void 0 ? [] : _c, _d = props.footers, footers = _d === void 0 ? [] : _d, _e = props.noDataText, noDataText = _e === void 0 ? "No Data!" : _e, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var tableRef = useRef(null);
+    var rowVirtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: function () { return tableRef.current; },
+        estimateSize: function () { return (dense ? 48 : 72); },
+        measureElement: typeof window !== "undefined" &&
+            navigator.userAgent.indexOf("Firefox") === -1
+            ? function (element) { return element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height; }
+            : undefined,
+        overscan: 6,
+    });
     var _f = useState(false), leftShadowVisible = _f[0], setLeftShadowVisible = _f[1];
     var _g = useState(false), rightShadowVisible = _g[0], setRightShadowVisible = _g[1];
+    var virtualRows = rowVirtualizer.getVirtualItems();
     var onProcessShadowVisible = useCallback(function () {
         if (tableRef.current) {
             var target = tableRef.current;
@@ -55,7 +67,7 @@ function DataTable(props) {
                 borderRadius: "4px",
                 borderCollapse: "unset !important",
                 transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-            } }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, headerBgColor: headerBgColor, headerTextColor: headerTextColor, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, onContextMenu: onContextMenu, onCustomizeRowBgColor: onCustomizeRowBgColor, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), (footers === null || footers === void 0 ? void 0 : footers.length) > 0 ? (_jsx(TableFooter, { footers: footers, footerBgColor: footerBgColor, footerTextColor: footerTextColor, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
+            } }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, headerBgColor: headerBgColor, headerTextColor: headerTextColor, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, virtualRows: virtualRows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, onContextMenu: onContextMenu, onCustomizeRowBgColor: onCustomizeRowBgColor, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), (footers === null || footers === void 0 ? void 0 : footers.length) > 0 ? (_jsx(TableFooter, { footers: footers, footerBgColor: footerBgColor, footerTextColor: footerTextColor, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
 }
 export default DataTable;
 export * from "./types";

package/DataTable/types.d.ts

@@ -1,4 +1,5 @@
-import { ReactElement, CSSProperties, MouseEvent } from "react";
+import type { ReactElement, CSSProperties, MouseEvent } from "react";
+import type { VirtualItem } from "@tanstack/react-virtual";
 declare type HexColor = `#${string}`;
 export declare type CustomRowBgColor = {
     normal?: HexColor;
@@ -43,7 +44,7 @@ export declare type TableBodyCellProps<RowProps extends KvProps, ExtendedProps e
 export declare type TableFooterCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseTableProps<RowProps, ExtendedProps>, keyof UseTableBaseProps<RowProps>> & {
     Cell: ReactElement;
 };
-export declare type UserTableReturns<RowProps extends KvProps, ExtendedProps extends KvProps> = {
+export declare type UseTableReturns<RowProps extends KvProps, ExtendedProps extends KvProps> = {
     headers: Array<TableHeaderCellProps<RowProps, ExtendedProps>>;
     footers: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
     columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
@@ -61,6 +62,7 @@ export declare type TableHeaderProps<RowProps extends KvProps, ExtendedProps ext
 export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
     columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
     rows: Array<RowProps>;
+    virtualRows: Array<VirtualItem>;
     leftShadowVisible?: boolean;
     rightShadowVisible?: boolean;
     noDataText?: string;
@@ -71,9 +73,9 @@ export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps exten
         columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
     }) => CustomRowBgColor;
 };
-export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableBodyProps<RowProps, ExtendedProps>, "noDataText"> & {
-    row: RowProps;
+export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableBodyProps<RowProps, ExtendedProps>, "noDataText" | "virtualRows"> & {
     rowIndex: number;
+    virtualRow: VirtualItem;
 };
 export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
     footers?: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
@@ -83,9 +85,8 @@ export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps ext
     leftShadowVisible?: boolean;
     rightShadowVisible?: boolean;
 };
-export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableHeaderProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "noData"> & Omit<TableBodyProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & Omit<TableFooterProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "noData"> & {
+export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableHeaderProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "noData"> & Omit<TableBodyProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "virtualRows"> & Omit<TableFooterProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "noData"> & {
     dense?: boolean;
-    stickyHeader?: boolean;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 };

package/DataTable/useTable.d.ts

@@ -1,3 +1,3 @@
-import { UseTableProps, KvProps, UserTableReturns } from "./types";
-declare function useTable<T extends KvProps, F extends KvProps>(props: UseTableProps<T, F>): UserTableReturns<T, F>;
+import type { KvProps, UseTableProps, UseTableReturns } from "./types";
+declare function useTable<T extends KvProps, F extends KvProps>(props: UseTableProps<T, F>): UseTableReturns<T, F>;
 export default useTable;

package/DataTable/useTable.js

@@ -75,7 +75,7 @@ function useTable(props) {
         }
         return "↓";
     }, [sortingProps]);
-    var rows = useMemo(function () { return data.map(function (d) { return (__assign({}, d)); }); }, [data]);
+    var rows = useMemo(function () { return data.map(function (d) { return d; }); }, [data]);
     var cols = useMemo(function () {
         return columns.map(function (col) {
             var Body = col.Body;

package/README.md

@@ -384,7 +384,6 @@ import DataTable, { useDataTable } from '@symply.io/basic-components/DataTable';
 | onCustomizeRowBgColor | func                          |            | false    | The function for customizing the row background color.<br />**Signature:**<br/>`function(props: {row: RowProps, columns: Array\<ColumnProps\>}) => {normal?: HexColor;<br/>  hover?: HexColor;<br/>}` |
 | onRowClick            | func                          |            | false    | The function for row clicking.<br />**Signature:**<br/>`function(row: RowProps) => unknown` |
 | rows                  | Array<RowProps\>              |            | true     | The rows for the table. (from the hook)                      |
-| stickyHeader          | bool                          |            | false    | Set the header sticky.<br/>⚠️ It doesn't work with IE11.      |
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.6.10",
+  "version": "1.6.11-alpha.2",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",
@@ -56,6 +56,7 @@
     "@mui/material": "5.11.0",
     "@mui/system": "5.11.0",
     "@reach/router": "^1.3.4",
+    "@tanstack/react-virtual": "^3.10.8",
     "color-alpha": "^1.1.3",
     "react-dropzone": "14.2.3",
     "react-player": "2.11.0",