@quillsql/react 2.10.30 → 2.10.32

package/dist/cjs/Table.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface TableColumn {
+    label: string;
+    field: string;
+}
+interface ChartIdTableProps {
+    chartId: string;
+    containerStyle?: React.CSSProperties;
+    csvFilename?: string;
+    showDownloadCsvButton?: boolean;
+    LoadingComponent?: () => JSX.Element;
+}
+interface DataTableProps {
+    columns: TableColumn[];
+    rows: object[];
+    containerStyle?: React.CSSProperties;
+    csvFilename?: string;
+    showDownloadCsvButton?: boolean;
+    LoadingComponent?: () => JSX.Element;
+    loading?: boolean;
+    height?: string;
+}
+type TableWrapperProps = ChartIdTableProps | DataTableProps;
+declare const Table: (data: TableWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export default Table;
+//# sourceMappingURL=Table.d.ts.map

package/dist/cjs/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAY/D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC;AAED,UAAU,cAAc;IACtB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,iBAAiB,GAAG,iBAAiB,GAAG,cAAc,CAAC;AAE5D,QAAA,MAAM,KAAK,SAAU,iBAAiB,4CAmCrC,CAAC;AAyKF,eAAe,KAAK,CAAC"}

package/dist/cjs/Table.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Context_1 = require("./Context");
+const dataFetcher_1 = require("./utils/dataFetcher");
+const merge_1 = require("./utils/merge");
+const QuillTable_1 = __importDefault(require("./components/QuillTable"));
+const Table = (data) => {
+    const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
+    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    if ('rows' in data && 'columns' in data) {
+        return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { showDownloadCSVButton: data.showDownloadCsvButton, downloadFileName: data.csvFilename, columns: data.columns, rows: data.rows, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, loading: data.loading }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { showDownloadCsvButton: data.showDownloadCsvButton, dispatch: dispatch, dashboard: dashboard, chartId: data.chartId, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, theme: theme, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent }));
+};
+const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, dashboardFilters, theme, csvFilename, showDownloadCsvButton = true, LoadingComponent, }) => {
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        let isSubscribed = true;
+        async function getChartOptions() {
+            if (isSubscribed) {
+                setLoading(true);
+                try {
+                    const hostedBody = {
+                        metadata: {
+                            dashboardItemId: chartId,
+                            orgId: client.customerId || '*',
+                            task: 'item',
+                            filters: [...Object.values(dashboardFilters)],
+                            clientId: client.publicKey,
+                            databaseType: client?.databaseType,
+                        },
+                    };
+                    const cloudBody = {
+                        id: chartId,
+                        filters: [...Object.values(dashboardFilters)],
+                    };
+                    const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
+                    if (resp && resp.name !== 'error') {
+                        if (resp.compareRows) {
+                            (0, merge_1.mergeComparisonRange)(resp);
+                        }
+                        dispatch({
+                            type: 'UPDATE_DASHBOARD_ITEM',
+                            id: chartId,
+                            data: {
+                                ...resp,
+                                filtersApplied: dashboardFilters,
+                            },
+                        });
+                    }
+                    setLoading(false);
+                }
+                catch (e) {
+                    console.log('Error fetching chart: ', e);
+                    setLoading(false);
+                }
+            }
+        }
+        getChartOptions();
+        return () => {
+            isSubscribed = false;
+        };
+    }, [dashboardFilters, client.customerId, chartId]);
+    // @ts-ignore
+    if (!dashboard[chartId] || loading) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                ...containerStyle,
+                boxSizing: 'content-box',
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                flex: 1,
+            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    height: containerStyle?.height || 300,
+                    width: '100%',
+                    boxSizing: 'content-box',
+                }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [(0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "#F9F9FA" }), (0, jsx_runtime_1.jsx)("defs", { fill: "#F9F9FA", children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "#FEFEFE" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), (0, jsx_runtime_1.jsx)("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { showDownloadCSVButton: showDownloadCsvButton, 
+        // @ts-ignore
+        downloadFileName: csvFilename || dashboard[chartId].name, 
+        // @ts-ignore
+        columns: dashboard[chartId].columns || [], 
+        // @ts-ignore
+        rows: dashboard[chartId].rows || [], containerStyle: containerStyle, LoadingComponent: LoadingComponent, loading: loading }));
+};
+exports.default = Table;

package/dist/cjs/components/Dashboard/TableComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,iBAAiB,GAClB,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAgDnB"}
+{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,iBAAiB,GAClB,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAkDnB"}

package/dist/cjs/components/Dashboard/TableComponent.js

@@ -30,6 +30,6 @@ function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, load
                     height: 400,
                     borderRadius: 8,
                     ...style,
-                }, rows: dashboardItem?.rows, columns: dashboardItem?.columns })) : null] }, dashboardItem?.name));
+                }, rows: dashboardItem?.rows || [], columns: dashboardItem?.columns, downloadFileName: name, showDownloadCSVButton: true })) : null] }, dashboardItem?.name));
 }
 exports.default = DashboardItem;

package/dist/cjs/components/QuillTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAKrE,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,gBAA2C,GAC5C,EAAE,mBAAmB,2CA+arB"}
+{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAKrE,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,gBAA2C,GAC5C,EAAE,mBAAmB,2CAmbrB"}

package/dist/cjs/components/QuillTable.js

@@ -16,6 +16,10 @@ function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFil
     const [isFormatting, setIsFormatting] = (0, react_1.useState)(false);
     const formattedRows = (0, react_1.useMemo)(() => {
         setIsFormatting(true);
+        if (!rows || !columns) {
+            setIsFormatting(false);
+            return [];
+        }
         return rows.map((row) => {
             return columns.reduce((formattedRow, column) => {
                 // Apply the format function to each field in the row
@@ -103,7 +107,7 @@ function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFil
                                     flex: '1 0 auto',
                                     minWidth: '100px',
                                     boxSizing: 'border-box',
-                                }, children: columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => toggleSort(column), style: {
+                                }, children: columns && columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => toggleSort(column), style: {
                                         boxSizing: 'border-box',
                                         flex: '150 0 auto',
                                         minWidth: '50px',
@@ -145,7 +149,7 @@ function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFil
                                                 transform: sortDirection === 'desc'
                                                     ? 'rotate(180deg)'
                                                     : undefined,
-                                            }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z", clipRule: "evenodd" }) }))] }, 'sqlcol' + index))) }) }), activeRows.length === 0 || columns.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                            }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z", clipRule: "evenodd" }) }))] }, 'sqlcol' + index))) }) }), (activeRows && activeRows.length === 0) || (columns && columns.length === 0) ? ((0, jsx_runtime_1.jsx)("div", { style: {
                                 paddingTop: '60px',
                                 display: 'flex',
                                 flex: '1 0 auto',
@@ -154,7 +158,7 @@ function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFil
                                 alignItems: 'center',
                                 fontSize: 13,
                                 color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
-                            }, children: "No results returned." })) : ((0, jsx_runtime_1.jsx)("div", { role: "rowgroup", className: "tbody", children: activeRows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
+                            }, children: "No results returned." })) : ((0, jsx_runtime_1.jsx)("div", { role: "rowgroup", className: "tbody", children: activeRows && activeRows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
                                     display: 'flex',
                                     flex: '1 0 auto',
                                     minWidth: '100px',

package/dist/cjs/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Dashboard, type DashboardProps, type DashboardItemProps, type DashboardItem, type AxisFormat, } from './Dashboard';
 export { default as QuillProvider } from './QuillProvider';
 export { default as Chart } from './Chart';
-export { default as QuillTable } from './components/QuillTable';
+export { default as Table } from './Table';
 export { default as SQLEditor, SchemaListComponent } from './SQLEditor';
 export { default as ReportBuilder } from './ReportBuilder';
 export { default as ChartBuilder } from './ChartBuilder';

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,UAAU,GAChB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,YAAY,EACV,uBAAuB,EACvB,oBAAoB,EACpB,MAAM,EACN,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,WAAW,GACZ,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,SAAS,GACV,MAAM,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,UAAU,GAChB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,YAAY,EACV,uBAAuB,EACvB,oBAAoB,EACpB,MAAM,EACN,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,WAAW,GACZ,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,SAAS,GACV,MAAM,mCAAmC,CAAC"}

package/dist/cjs/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeContext = exports.downloadCSV = exports.useMemoizedRows = exports.useExport = exports.useQuill = exports.useDashboard = exports.format = exports.ChartEditor = exports.ChartBuilder = exports.ReportBuilder = exports.SchemaListComponent = exports.SQLEditor = exports.QuillTable = exports.Chart = exports.QuillProvider = exports.Dashboard = void 0;
+exports.ThemeContext = exports.downloadCSV = exports.useMemoizedRows = exports.useExport = exports.useQuill = exports.useDashboard = exports.format = exports.ChartEditor = exports.ChartBuilder = exports.ReportBuilder = exports.SchemaListComponent = exports.SQLEditor = exports.Table = exports.Chart = exports.QuillProvider = exports.Dashboard = void 0;
 // src/index.ts
 var Dashboard_1 = require("./Dashboard");
 Object.defineProperty(exports, "Dashboard", { enumerable: true, get: function () { return __importDefault(Dashboard_1).default; } });
@@ -11,8 +11,8 @@ var QuillProvider_1 = require("./QuillProvider");
 Object.defineProperty(exports, "QuillProvider", { enumerable: true, get: function () { return __importDefault(QuillProvider_1).default; } });
 var Chart_1 = require("./Chart");
 Object.defineProperty(exports, "Chart", { enumerable: true, get: function () { return __importDefault(Chart_1).default; } });
-var QuillTable_1 = require("./components/QuillTable");
-Object.defineProperty(exports, "QuillTable", { enumerable: true, get: function () { return __importDefault(QuillTable_1).default; } });
+var Table_1 = require("./Table");
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
 var SQLEditor_1 = require("./SQLEditor");
 Object.defineProperty(exports, "SQLEditor", { enumerable: true, get: function () { return __importDefault(SQLEditor_1).default; } });
 Object.defineProperty(exports, "SchemaListComponent", { enumerable: true, get: function () { return SQLEditor_1.SchemaListComponent; } });

package/dist/esm/Table.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface TableColumn {
+    label: string;
+    field: string;
+}
+interface ChartIdTableProps {
+    chartId: string;
+    containerStyle?: React.CSSProperties;
+    csvFilename?: string;
+    showDownloadCsvButton?: boolean;
+    LoadingComponent?: () => JSX.Element;
+}
+interface DataTableProps {
+    columns: TableColumn[];
+    rows: object[];
+    containerStyle?: React.CSSProperties;
+    csvFilename?: string;
+    showDownloadCsvButton?: boolean;
+    LoadingComponent?: () => JSX.Element;
+    loading?: boolean;
+    height?: string;
+}
+type TableWrapperProps = ChartIdTableProps | DataTableProps;
+declare const Table: (data: TableWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export default Table;
+//# sourceMappingURL=Table.d.ts.map

package/dist/esm/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAY/D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC;AAED,UAAU,cAAc;IACtB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,iBAAiB,GAAG,iBAAiB,GAAG,cAAc,CAAC;AAE5D,QAAA,MAAM,KAAK,SAAU,iBAAiB,4CAmCrC,CAAC;AAyKF,eAAe,KAAK,CAAC"}

package/dist/esm/Table.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from 'react';
+import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, } from './Context';
+import { getData } from './utils/dataFetcher';
+import { mergeComparisonRange } from './utils/merge';
+import QuillTable from './components/QuillTable';
+const Table = (data) => {
+    const { dispatch, dashboard } = useContext(DashboardContext);
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const [client, _] = useContext(ClientContext);
+    const [theme] = useContext(ThemeContext);
+    if ('rows' in data && 'columns' in data) {
+        return (_jsx(QuillTable, { showDownloadCSVButton: data.showDownloadCsvButton, downloadFileName: data.csvFilename, columns: data.columns, rows: data.rows, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, loading: data.loading }));
+    }
+    return (_jsx(ChartUpdater, { showDownloadCsvButton: data.showDownloadCsvButton, dispatch: dispatch, dashboard: dashboard, chartId: data.chartId, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, theme: theme, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent }));
+};
+const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, dashboardFilters, theme, csvFilename, showDownloadCsvButton = true, LoadingComponent, }) => {
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        let isSubscribed = true;
+        async function getChartOptions() {
+            if (isSubscribed) {
+                setLoading(true);
+                try {
+                    const hostedBody = {
+                        metadata: {
+                            dashboardItemId: chartId,
+                            orgId: client.customerId || '*',
+                            task: 'item',
+                            filters: [...Object.values(dashboardFilters)],
+                            clientId: client.publicKey,
+                            databaseType: client?.databaseType,
+                        },
+                    };
+                    const cloudBody = {
+                        id: chartId,
+                        filters: [...Object.values(dashboardFilters)],
+                    };
+                    const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
+                    if (resp && resp.name !== 'error') {
+                        if (resp.compareRows) {
+                            mergeComparisonRange(resp);
+                        }
+                        dispatch({
+                            type: 'UPDATE_DASHBOARD_ITEM',
+                            id: chartId,
+                            data: {
+                                ...resp,
+                                filtersApplied: dashboardFilters,
+                            },
+                        });
+                    }
+                    setLoading(false);
+                }
+                catch (e) {
+                    console.log('Error fetching chart: ', e);
+                    setLoading(false);
+                }
+            }
+        }
+        getChartOptions();
+        return () => {
+            isSubscribed = false;
+        };
+    }, [dashboardFilters, client.customerId, chartId]);
+    // @ts-ignore
+    if (!dashboard[chartId] || loading) {
+        return (_jsx("div", { style: {
+                ...containerStyle,
+                boxSizing: 'content-box',
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                flex: 1,
+            }, children: _jsx("div", { style: {
+                    height: containerStyle?.height || 300,
+                    width: '100%',
+                    boxSizing: 'content-box',
+                }, children: _jsxs("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [_jsx("rect", { width: "100%", height: "100%", fill: "#F9F9FA" }), _jsx("defs", { fill: "#F9F9FA", children: _jsxs("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }), _jsx("stop", { offset: "50%", stopColor: "#FEFEFE" }), _jsx("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }), _jsx("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), _jsx("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), _jsx("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: _jsx("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }));
+    }
+    return (_jsx(QuillTable, { showDownloadCSVButton: showDownloadCsvButton, 
+        // @ts-ignore
+        downloadFileName: csvFilename || dashboard[chartId].name, 
+        // @ts-ignore
+        columns: dashboard[chartId].columns || [], 
+        // @ts-ignore
+        rows: dashboard[chartId].rows || [], containerStyle: containerStyle, LoadingComponent: LoadingComponent, loading: loading }));
+};
+export default Table;

package/dist/esm/components/Dashboard/TableComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,iBAAiB,GAClB,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAgDnB"}
+{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,iBAAiB,GAClB,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAkDnB"}

package/dist/esm/components/Dashboard/TableComponent.js

@@ -25,5 +25,5 @@ export default function DashboardItem({ dashboardItem, onClickDashboardItem, the
                     height: 400,
                     borderRadius: 8,
                     ...style,
-                }, rows: dashboardItem?.rows, columns: dashboardItem?.columns })) : null] }, dashboardItem?.name));
+                }, rows: dashboardItem?.rows || [], columns: dashboardItem?.columns, downloadFileName: name, showDownloadCSVButton: true })) : null] }, dashboardItem?.name));
 }

package/dist/esm/components/QuillTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAKrE,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,gBAA2C,GAC5C,EAAE,mBAAmB,2CA+arB"}
+{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAKrE,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,gBAA2C,GAC5C,EAAE,mBAAmB,2CAmbrB"}

package/dist/esm/components/QuillTable.js

@@ -14,6 +14,10 @@ export default function QuillTable({ rows, columns, loading, showDownloadCSVButt
     const [isFormatting, setIsFormatting] = useState(false);
     const formattedRows = useMemo(() => {
         setIsFormatting(true);
+        if (!rows || !columns) {
+            setIsFormatting(false);
+            return [];
+        }
         return rows.map((row) => {
             return columns.reduce((formattedRow, column) => {
                 // Apply the format function to each field in the row
@@ -101,7 +105,7 @@ export default function QuillTable({ rows, columns, loading, showDownloadCSVButt
                                     flex: '1 0 auto',
                                     minWidth: '100px',
                                     boxSizing: 'border-box',
-                                }, children: columns.map((column, index) => (_jsxs("div", { onClick: () => toggleSort(column), style: {
+                                }, children: columns && columns.map((column, index) => (_jsxs("div", { onClick: () => toggleSort(column), style: {
                                         boxSizing: 'border-box',
                                         flex: '150 0 auto',
                                         minWidth: '50px',
@@ -143,7 +147,7 @@ export default function QuillTable({ rows, columns, loading, showDownloadCSVButt
                                                 transform: sortDirection === 'desc'
                                                     ? 'rotate(180deg)'
                                                     : undefined,
-                                            }, children: _jsx("path", { fillRule: "evenodd", d: "M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z", clipRule: "evenodd" }) }))] }, 'sqlcol' + index))) }) }), activeRows.length === 0 || columns.length === 0 ? (_jsx("div", { style: {
+                                            }, children: _jsx("path", { fillRule: "evenodd", d: "M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z", clipRule: "evenodd" }) }))] }, 'sqlcol' + index))) }) }), (activeRows && activeRows.length === 0) || (columns && columns.length === 0) ? (_jsx("div", { style: {
                                 paddingTop: '60px',
                                 display: 'flex',
                                 flex: '1 0 auto',
@@ -152,7 +156,7 @@ export default function QuillTable({ rows, columns, loading, showDownloadCSVButt
                                 alignItems: 'center',
                                 fontSize: 13,
                                 color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
-                            }, children: "No results returned." })) : (_jsx("div", { role: "rowgroup", className: "tbody", children: activeRows.map((row, rowIndex) => (_jsx("div", { role: "row", className: "tr", style: {
+                            }, children: "No results returned." })) : (_jsx("div", { role: "rowgroup", className: "tbody", children: activeRows && activeRows.map((row, rowIndex) => (_jsx("div", { role: "row", className: "tr", style: {
                                     display: 'flex',
                                     flex: '1 0 auto',
                                     minWidth: '100px',

package/dist/esm/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Dashboard, type DashboardProps, type DashboardItemProps, type DashboardItem, type AxisFormat, } from './Dashboard';
 export { default as QuillProvider } from './QuillProvider';
 export { default as Chart } from './Chart';
-export { default as QuillTable } from './components/QuillTable';
+export { default as Table } from './Table';
 export { default as SQLEditor, SchemaListComponent } from './SQLEditor';
 export { default as ReportBuilder } from './ReportBuilder';
 export { default as ChartBuilder } from './ChartBuilder';

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,UAAU,GAChB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,YAAY,EACV,uBAAuB,EACvB,oBAAoB,EACpB,MAAM,EACN,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,WAAW,GACZ,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,SAAS,GACV,MAAM,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,UAAU,GAChB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,YAAY,EACV,uBAAuB,EACvB,oBAAoB,EACpB,MAAM,EACN,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,WAAW,GACZ,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,SAAS,GACV,MAAM,mCAAmC,CAAC"}

package/dist/esm/index.js

@@ -2,7 +2,7 @@
 export { default as Dashboard, } from './Dashboard';
 export { default as QuillProvider } from './QuillProvider';
 export { default as Chart } from './Chart';
-export { default as QuillTable } from './components/QuillTable';
+export { default as Table } from './Table';
 export { default as SQLEditor, SchemaListComponent } from './SQLEditor';
 export { default as ReportBuilder } from './ReportBuilder';
 export { default as ChartBuilder } from './ChartBuilder';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "2.10.30",
+  "version": "2.10.32",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",