@symply.io/basic-components 1.7.0-alpha.2 → 1.7.0-alpha.4

package/VirtualDataTable/index.d.ts

@@ -0,0 +1,8 @@
+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> & {
+    ref?: ForwardedRef<VirtualDataTableRefProps> | undefined;
+}) => ReturnType<typeof VirtualDataTable>;
+export default _default;
+export type { VirtualDataTableRefProps, VirtualDataTableOrderType, VirtualDataTableSortingProps, } from "./types";

package/VirtualDataTable/index.js

@@ -0,0 +1,284 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, forwardRef, useCallback, cloneElement, useImperativeHandle, } from "react";
+import { TableVirtuoso } from "react-virtuoso";
+import Table from "@mui/material/Table";
+import TableRow from "@mui/material/TableRow";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableFooter from "@mui/material/TableFooter";
+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;
+    var _b = useInteractions({ rows: rows, columns: columns }), normalCols = _b.normalCols, pinnedLeftCols = _b.pinnedLeftCols, pinnedRightCols = _b.pinnedRightCols, leftShadowVisible = _b.leftShadowVisible, rightShadowVisible = _b.rightShadowVisible, onScroll = _b.onScroll, handleSort = _b.handleSort, onResetSorting = _b.onResetSorting, renderSortingSymbol = _b.renderSortingSymbol;
+    useImperativeHandle(ref, function () { return ({
+        onResetSorting: onResetSorting,
+    }); }, [onResetSorting]);
+    var fixedHeaderContent = useCallback(function () {
+        return (_jsxs(TableRow, __assign({ sx: {
+                backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
+                color: "".concat(headerTextColor || "inherit", " !important"),
+                width: "100%F",
+            } }, { children: [pinnedLeftCols.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;
+                    var left = pinnedLeftCols
+                        .slice(0, index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsxs(TableCell, __assign({ variant: "head", title: headerTip, align: align, onClick: function () {
+                            if (canSortBy) {
+                                handleSort({ accessor: accessor });
+                            }
+                        }, sx: {
+                            position: "sticky",
+                            left: left,
+                            width: width,
+                            cursor: sortable ? "pointer" : "default",
+                            backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
+                            color: "".concat(headerTextColor || "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: [cloneElement(Header, { column: column, rows: rows, options: options }), 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;
+                    return (_jsxs(TableCell, __assign({ variant: "head", title: headerTip, align: align, onClick: function () {
+                            if (canSortBy) {
+                                handleSort({ accessor: accessor });
+                            }
+                        }, sx: {
+                            width: width,
+                            cursor: sortable ? "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));
+                }), 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;
+                    var right = pinnedRightCols
+                        .slice(0, pinnedRightCols.length - 1 - index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsxs(TableCell, __assign({ variant: "head", title: headerTip, align: align, onClick: function () {
+                            if (canSortBy) {
+                                handleSort({ accessor: accessor });
+                            }
+                        }, sx: {
+                            position: "sticky",
+                            right: right,
+                            width: width,
+                            cursor: sortable ? "pointer" : "default",
+                            backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
+                            color: "".concat(headerTextColor || "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: [cloneElement(Header, { column: column, rows: rows, options: options }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
+                })] })));
+    }, [
+        normalCols,
+        pinnedLeftCols,
+        pinnedRightCols,
+        headerBgColor,
+        sortingDisabled,
+        headerTextColor,
+        leftShadowVisible,
+        rightShadowVisible,
+        handleSort,
+        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,
+                            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,
+                            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,
+                            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));
+                })] })));
+    }, [
+        normalCols,
+        pinnedLeftCols,
+        pinnedRightCols,
+        footerBgColor,
+        footerTextColor,
+        leftShadowVisible,
+        rightShadowVisible,
+    ]);
+    var itemContent = useCallback(function (rowIndex, row) {
+        return (_jsxs(_Fragment, { children: [pinnedLeftCols.map(function (column, index) {
+                    var align = column.align, width = column.width, Body = column.Body, 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,
+                            zIndex: 1,
+                            width: width,
+                            backgroundColor: "background.paper",
+                            "&::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: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, options: options }) }), 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: {
+                            width: width,
+                            backgroundColor: "background.paper",
+                        } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, options: options }) }), accessor));
+                }), pinnedRightCols.map(function (column, index) {
+                    var align = column.align, width = column.width, Body = column.Body, 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,
+                            zIndex: 1,
+                            width: width,
+                            backgroundColor: "background.paper",
+                            "&::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: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, options: options }) }), accessor));
+                })] }));
+    }, [
+        rows,
+        normalCols,
+        pinnedLeftCols,
+        pinnedRightCols,
+        leftShadowVisible,
+        rightShadowVisible,
+    ]);
+    var VirtuosoTableComponents = useMemo(function () { return ({
+        EmptyPlaceholder: function () { return (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length }, { children: _jsx(Typography, __assign({ align: "center", variant: "body1", fontSize: 14, fontWeight: 600 }, { children: noDataText })) })) })); },
+        Scroller: forwardRef(function (props, ref) { return (_jsx(TableContainer, __assign({}, props, { ref: ref, sx: {
+                maxHeight: "inherit",
+                borderWidth: "thin",
+                borderColor: "#e5e5e5",
+                borderStyle: "solid",
+                borderRadius: "4px",
+                borderCollapse: "unset !important",
+                transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+            } }))); }),
+        Table: function (props) { return (_jsx(Table, __assign({}, props, { size: dense ? "small" : "medium", sx: {
+                borderCollapse: "separate",
+                minWidth: 600,
+                tableLayout: "fixed",
+            } }))); },
+        TableHead: forwardRef(function (props, ref) { return (_jsx(TableHead, __assign({}, props, { ref: ref }))); }),
+        TableRow: TableRow,
+        TableBody: forwardRef(function (props, ref) { return (_jsx(TableBody, __assign({}, props, { ref: ref }))); }),
+        TableFoot: forwardRef(function (props, ref) { return (_jsx(TableFooter, __assign({}, props, { ref: ref }))); }),
+    }); }, []);
+    return (_jsx(TableVirtuoso, { data: rows, style: { height: height }, onResize: onScroll, onScroll: onScroll, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, fixedFooterContent: fixedFooterContent, itemContent: itemContent, followOutput: "smooth", increaseViewportBy: 5 }));
+};
+export default forwardRef(VirtualDataTable);

package/VirtualDataTable/types.d.ts

@@ -0,0 +1,54 @@
+import type { ReactElement, CSSProperties, MouseEvent } from "react";
+declare type HexColor = `#${string}`;
+declare type CustomVirtualTableRowBgColor = {
+    normal?: HexColor;
+    hover?: HexColor;
+};
+export declare type VirtualDataTableOrderType = "ASC" | "DESC" | "NONE";
+export declare type VirtualDataTableSortingProps = {
+    accessor: string;
+    order: VirtualDataTableOrderType;
+};
+declare type InitialVirtualDataTableStateProps = {
+    sortBy?: VirtualDataTableSortingProps;
+};
+export declare type TVirtualTableRow = Record<string, any>;
+export declare type TVirtualTableOptions = Record<string, any>;
+export declare type TVirtualTableColumn = {
+    headerTip?: string;
+    Header: ReactElement;
+    Body: ReactElement;
+    Footer?: ReactElement;
+    align?: "left" | "center" | "right";
+    accessor: string;
+    sortable?: boolean;
+    fixable?: "left" | "right";
+    width: number;
+};
+export interface InteractionProps<RowProps extends TVirtualTableRow> {
+    rows: Array<RowProps>;
+    columns: Array<TVirtualTableColumn>;
+    initialState?: InitialVirtualDataTableStateProps;
+    sortingDisabled?: boolean;
+    onSort?: (props: VirtualDataTableSortingProps) => unknown;
+}
+export interface VirtualTableProps<RowProps extends TVirtualTableRow, OptionProps extends TVirtualTableOptions> extends InteractionProps<RowProps> {
+    dense?: boolean;
+    height: number;
+    headerBgColor?: CSSProperties["color"];
+    headerTextColor?: CSSProperties["color"];
+    footerBgColor?: CSSProperties["color"];
+    footerTextColor?: CSSProperties["color"];
+    noDataText?: string;
+    onRowClick?: (row: RowProps) => unknown;
+    onContextMenu?: (event: MouseEvent<HTMLTableRowElement>, row: RowProps) => unknown;
+    onCustomizeRowBgColor?: ({ row, columns, }: {
+        row: RowProps;
+        columns: TVirtualTableColumn;
+    }) => CustomVirtualTableRowBgColor;
+    options?: OptionProps;
+}
+export declare type VirtualDataTableRefProps = {
+    onResetSorting: () => void;
+};
+export {};

package/VirtualDataTable/types.js

@@ -0,0 +1 @@
+export {};

package/VirtualDataTable/useInteractions.d.ts

@@ -0,0 +1,14 @@
+import { UIEventHandler } from "react";
+import type { InteractionProps, TVirtualTableRow, TVirtualTableColumn, VirtualDataTableSortingProps } from "./types";
+declare function useInteractions<RowProps extends TVirtualTableRow>(props: InteractionProps<RowProps>): {
+    normalCols: TVirtualTableColumn[];
+    pinnedLeftCols: TVirtualTableColumn[];
+    pinnedRightCols: TVirtualTableColumn[];
+    leftShadowVisible: boolean;
+    rightShadowVisible: boolean;
+    onScroll: UIEventHandler<HTMLDivElement>;
+    handleSort: ({ accessor }: Pick<VirtualDataTableSortingProps, "accessor">) => void;
+    onResetSorting: () => void;
+    renderSortingSymbol: (accessor: string) => "" | "↑" | "↓";
+};
+export default useInteractions;

package/VirtualDataTable/useInteractions.js

@@ -0,0 +1,99 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useMemo, useState, useCallback } from "react";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import useTheme from "@mui/material/styles/useTheme";
+function useInteractions(props) {
+    var rows = props.rows, columns = props.columns, sortingDisabled = props.sortingDisabled, initialState = props.initialState, onSort = props.onSort;
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var _a = useState(false), leftShadowVisible = _a[0], setLeftShadowVisible = _a[1];
+    var _b = useState(columns.filter(function (c) { return c.fixable === "right"; }).length > 0 || false), rightShadowVisible = _b[0], setRightShadowVisible = _b[1];
+    var initialSortingProps = useMemo(function () {
+        var sortBy = (initialState || {}).sortBy;
+        var _a = sortBy || {}, accessor = _a.accessor, order = _a.order;
+        return {
+            accessor: accessor || "",
+            order: !!accessor ? order || "NONE" : "NONE",
+        };
+    }, [initialState]);
+    var _c = useState(initialSortingProps), sortingProps = _c[0], setSortingProps = _c[1];
+    var handleSort = useCallback(function (_a) {
+        var accessor = _a.accessor;
+        if (!sortingDisabled) {
+            var newSortingProps = __assign({}, sortingProps);
+            if (accessor !== sortingProps.accessor ||
+                sortingProps.order === "NONE") {
+                newSortingProps = { accessor: accessor, order: "ASC" };
+            }
+            else if (sortingProps.order === "ASC") {
+                newSortingProps = __assign(__assign({}, sortingProps), { order: "DESC" });
+            }
+            else {
+                newSortingProps = __assign(__assign({}, sortingProps), { order: "NONE" });
+            }
+            if (onSort) {
+                onSort(__assign({}, newSortingProps));
+            }
+            setSortingProps(__assign({}, newSortingProps));
+        }
+    }, [sortingDisabled, onSort, sortingProps]);
+    var onResetSorting = useCallback(function () {
+        if (onSort) {
+            onSort(__assign({}, initialSortingProps));
+        }
+        setSortingProps(__assign({}, initialSortingProps));
+    }, [initialSortingProps, onSort]);
+    var renderSortingSymbol = useCallback(function (accessor) {
+        var field = sortingProps.accessor, order = sortingProps.order;
+        if (accessor !== field || order === "NONE") {
+            return "";
+        }
+        if (order === "ASC") {
+            return "↑";
+        }
+        return "↓";
+    }, [sortingProps]);
+    var onScroll = useCallback(function (event) {
+        var target = event.currentTarget;
+        var scrollLeft = target.scrollLeft;
+        var scrollWidth = target.scrollWidth;
+        var clientWidth = target.clientWidth;
+        var hasScrollBar = scrollWidth > clientWidth;
+        setLeftShadowVisible(hasScrollBar && scrollLeft > 0);
+        setRightShadowVisible(hasScrollBar && scrollWidth - scrollLeft > clientWidth + 1);
+    }, []);
+    var _d = useMemo(function () {
+        var hasData = rows.length > 0;
+        if (isUpMd && hasData) {
+            var left = columns.filter(function (c) { return c.fixable === "left"; });
+            var right = columns.filter(function (c) { return c.fixable === "right"; });
+            var dynamic = columns.filter(function (c) { return !c.fixable; });
+            return [left, dynamic, right];
+        }
+        else {
+            return [[], columns, []];
+        }
+    }, [isUpMd, rows, columns]), pinnedLeftCols = _d[0], normalCols = _d[1], pinnedRightCols = _d[2];
+    return {
+        normalCols: normalCols,
+        pinnedLeftCols: pinnedLeftCols,
+        pinnedRightCols: pinnedRightCols,
+        leftShadowVisible: leftShadowVisible,
+        rightShadowVisible: rightShadowVisible,
+        onScroll: onScroll,
+        handleSort: handleSort,
+        onResetSorting: onResetSorting,
+        renderSortingSymbol: renderSortingSymbol,
+    };
+}
+export default useInteractions;

package/VirtualGrid/GridCore/GridBodyRow.js

@@ -18,7 +18,6 @@ import useTheme from "@mui/material/styles/useTheme";
 import { useGridVirtualizer } from "../GridVirtualizerContext";
 function VirtualGridBodyRow(props) {
     var rows = props.rows, columns = props.columns, rowIndex = props.rowIndex, virtualRow = props.virtualRow, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
-    console.log({ virtualRow: virtualRow });
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
     var _a = useGridVirtualizer(), leftShadowVisible = _a.leftShadowVisible, rightShadowVisible = _a.rightShadowVisible, onMeasureElement = _a.onMeasureElement;

package/VirtualGrid/types.d.ts

@@ -79,8 +79,6 @@ export declare type VirtualGridFooterProps<RowProps extends Record<string, any>,
 };
 export declare type VirtualGridCoreProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = Omit<VirtualGridHeaderProps<RowProps, ExtendedProps>, "noData"> & VirtualGridBodyProps<RowProps, ExtendedProps> & Omit<VirtualGridFooterProps<RowProps, ExtendedProps>, "noData"> & {
     dense?: boolean;
-    primaryColor?: CSSProperties["color"];
-    secondaryColor?: CSSProperties["color"];
 };
 export declare type VirtualGridProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = VirtualGridCoreProps<RowProps, ExtendedProps> & {
     estimateRowHeight?: number;

package/index.d.ts

@@ -29,6 +29,7 @@ export * from "./TablePagination";
 export * from "./TextInput";
 export * from "./ToastPrompt";
 export * from "./VideoPlayerModal";
+export * from "./VirtualDataTable";
 export * from "./VirtualGrid";
 export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
@@ -58,4 +59,5 @@ export { default as TabGroup } from "./TabGroup";
 export { default as TablePagination } from "./TablePagination";
 export { default as TextInput } from "./TextInput";
 export { default as VideoPlayerModal } from "./VideoPlayerModal";
+export { default as VirtualDataTable } from "./VirtualDataTable";
 export { default as VirtualGrid } from "./VirtualGrid";

package/index.js

@@ -29,6 +29,7 @@ export * from "./TablePagination";
 export * from "./TextInput";
 export * from "./ToastPrompt";
 export * from "./VideoPlayerModal";
+export * from "./VirtualDataTable";
 export * from "./VirtualGrid";
 export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
@@ -58,4 +59,5 @@ export { default as TabGroup } from "./TabGroup";
 export { default as TablePagination } from "./TablePagination";
 export { default as TextInput } from "./TextInput";
 export { default as VideoPlayerModal } from "./VideoPlayerModal";
+export { default as VirtualDataTable } from "./VirtualDataTable";
 export { default as VirtualGrid } from "./VirtualGrid";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.7.0-alpha.2",
+  "version": "1.7.0-alpha.4",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",
@@ -60,6 +60,7 @@
     "color-alpha": "^1.1.3",
     "react-dropzone": "14.2.3",
     "react-player": "2.11.0",
+    "react-virtuoso": "^4.12.0",
     "rifm": "^0.12.1"
   },
   "resolutions": {