@quillsql/react 2.9.2 → 2.9.4

package/dist/cjs/Table.js

@@ -0,0 +1,579 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpecialTable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+const react_1 = require("react");
+const Context_1 = require("./Context");
+const dataFetcher_1 = require("./utils/dataFetcher");
+const valueFormatter_1 = require("./utils/valueFormatter");
+const valueFormatterCSV_1 = require("./utils/valueFormatterCSV");
+const merge_1 = require("./utils/merge");
+const Table = ({ chartId, columns, rows, containerStyle, csvFilename, showDownloadCsvButton, LoadingComponent, }) => {
+    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);
+    const downloadCSV = (rows, name) => {
+        // report.rows
+        if (!rows.length) {
+            return;
+        }
+        const json = rows; // JSON data passed as a prop
+        const fields = Object.keys(json[0]); // Assumes all objects have same keys
+        const csvRows = [];
+        // Header row
+        csvRows.push(fields.join(','));
+        // Data rows
+        for (const row of json) {
+            const values = fields.map((field) => JSON.stringify(row[field] || ''));
+            csvRows.push(values.join(','));
+        }
+        // Create CSV string and create a 'blob' with it
+        const csvString = csvRows.join('\r\n');
+        const csvBlob = new Blob([csvString], { type: 'text/csv' });
+        // Create a download link and click it
+        const downloadLink = document.createElement('a');
+        downloadLink.download = `${name}.csv`;
+        downloadLink.href = URL.createObjectURL(csvBlob);
+        downloadLink.style.display = 'none';
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+    };
+    if (!chartId && rows && columns) {
+        return ((0, jsx_runtime_1.jsx)(SpecialTable, { showDownloadCsvButton: showDownloadCsvButton, csvFilename: csvFilename || 'table', columns: columns, rows: rows ?? [], height: containerStyle?.height || '100%', theme: theme, containerStyle: containerStyle, LoadingComponent: LoadingComponent }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { showDownloadCsvButton: showDownloadCsvButton, dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, dashboardFilters: dashboardFilters, client: client, theme: theme, downloadCSV: downloadCSV, csvFilename: csvFilename, LoadingComponent: LoadingComponent }));
+};
+const compareValues = (a, b, column) => {
+    const valueA = a[column];
+    const valueB = b[column];
+    // For numbers
+    if (!isNaN(valueA) && !isNaN(valueB)) {
+        return valueA - valueB;
+    }
+    // For dates
+    if (new Date(valueA) !== 'Invalid Date' &&
+        !isNaN(new Date(valueA)) &&
+        new Date(valueB) !== 'Invalid Date' &&
+        !isNaN(new Date(valueB))) {
+        return new Date(valueA) - new Date(valueB);
+    }
+    // For strings
+    return valueA.localeCompare(valueB);
+};
+function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingComponent, theme, showDownloadCsvButton = true, csvFilename, DownloadCSVButtonComponent, AddToDashboardButtonComponent, isTableChart = false, name, }) {
+    const [activeRows, setActiveRows] = (0, react_1.useState)([]);
+    const [page, setPage] = (0, react_1.useState)(1);
+    const [maxPage, setMaxPage] = (0, react_1.useState)(1);
+    const [sortColumn, setSortColumn] = (0, react_1.useState)(null);
+    const [sortDirection, setSortDirection] = (0, react_1.useState)('desc');
+    (0, react_1.useEffect)(() => {
+        const sortedRows = [...rows];
+        if (sortColumn) {
+            sortedRows.sort((a, b) => {
+                const result = compareValues(a, b, sortColumn);
+                return sortDirection === 'asc' ? result : -result;
+            });
+        }
+        const start = (page - 1) * 10;
+        const end = page * 10;
+        if (sortedRows && sortedRows.length) {
+            setMaxPage(Math.ceil(sortedRows.length / 10));
+        }
+        setActiveRows(sortedRows.slice(start, end));
+    }, [page, rows, sortColumn, sortDirection]);
+    const increasePage = () => {
+        if (page === maxPage) {
+            return;
+        }
+        setPage((page) => page + 1);
+    };
+    const decreasePage = () => {
+        if (page === 1) {
+            return;
+        }
+        setPage((page) => page - 1);
+    };
+    const toggleSort = (column) => {
+        if (sortColumn === column.field) {
+            setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+        }
+        else {
+            setSortColumn(column.field);
+            setSortDirection('desc');
+        }
+    };
+    const downloadCSV = () => {
+        // report.rows
+        if (rows && !rows.length) {
+            return;
+        }
+        // if table chart, use columns and valueFormatter
+        if (isTableChart) {
+            const newRows = [];
+            for (let i = 0; i < rows.length; i++) {
+                const newRow = {};
+                Object.keys(rows[i]).forEach((field) => (newRow[field] = (0, valueFormatterCSV_1.valueFormatterCSV)({
+                    value: rows[i][field],
+                    field: field,
+                    fields: columns,
+                })));
+                newRows.push(newRow);
+            }
+            const fields = columns.map((col) => col.field); // Assumes all objects have same keys
+            const csvRows = [];
+            // Header row
+            csvRows.push(columns.map((col) => col.label || col.field).join(','));
+            // Data rows
+            for (const row of newRows) {
+                const values = fields.map((field) => {
+                    let value = JSON.stringify(row[field] ?? '');
+                    if (value.includes('\\"')) {
+                        value = value.replaceAll('\\"', '""');
+                    }
+                    return value;
+                });
+                csvRows.push(values.join(','));
+            }
+            // Create CSV string and create a 'blob' with it
+            const csvString = csvRows.join('\r\n');
+            const csvBlob = new Blob([csvString], { type: 'text/csv' });
+            // Create a download link and click it
+            const downloadLink = document.createElement('a');
+            downloadLink.download = `${name}.csv`;
+            downloadLink.href = URL.createObjectURL(csvBlob);
+            downloadLink.style.display = 'none';
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+            document.body.removeChild(downloadLink);
+            return;
+        }
+        const json = rows; // JSON data passed as a prop
+        const fields = Object.keys(json[0]); // Assumes all objects have same keys
+        const csvRows = [];
+        // Header row
+        csvRows.push(fields.join(','));
+        // Data rows
+        for (const row of json) {
+            const values = fields.map((field) => JSON.stringify(row[field] || ''));
+            csvRows.push(values.join(','));
+        }
+        // Create CSV string and create a 'blob' with it
+        const csvString = csvRows.join('\r\n');
+        const csvBlob = new Blob([csvString], { type: 'text/csv' });
+        // Create a download link and click it
+        const downloadLink = document.createElement('a');
+        downloadLink.download = `${csvFilename}.csv`;
+        downloadLink.href = URL.createObjectURL(csvBlob);
+        downloadLink.style.display = 'none';
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+    };
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                ...containerStyle,
+                // paddingLeft: 25,
+                // paddingRight: 25,
+                // borderRadius: 8,
+                // marginTop: 25,
+                // overflow: 'visible',
+                width: '100%',
+                height: height || '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                // overflow: 'hidden',
+                // @ts-ignore
+                // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
+            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                    height: '100%',
+                    overflow: 'auto',
+                    borderRadius: 6,
+                    border: '1px solid rgb(229, 231, 235)',
+                    padding: 0,
+                    margin: 0,
+                    // border: 'none',
+                    boxSizing: 'border-box',
+                    outline: 'none',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    // maxHeight: 600,
+                }, children: [LoadingComponent && (0, jsx_runtime_1.jsx)(LoadingComponent, {}), !LoadingComponent && ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] }) }));
+    }
+    if (!columns || !columns.length || !activeRows) {
+        return null;
+    }
+    // since setting the rows and columns of a table are separate actions,
+    // there will be a brief moment when the rows and columns don't match up
+    // when you are changing them. this guards against that case.
+    // TODO: make code below this check more resilient so that this check isn't needed
+    if (activeRows.length > 0) {
+        let allColumnsPresent = true;
+        columns.forEach((column) => {
+            if (!(column.field in activeRows[0])) {
+                allColumnsPresent = false;
+            }
+        });
+        if (!allColumnsPresent) {
+            return null;
+        }
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            ...containerStyle,
+            // paddingLeft: 25,
+            // paddingRight: 25,
+            // borderRadius: 8,
+            // marginTop: 25,
+            overflow: 'visible',
+            height: height,
+            display: 'flex',
+            flexDirection: 'column',
+            // overflow: 'hidden',
+            // @ts-ignore
+            // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    height: '100%',
+                    overflow: 'auto',
+                    borderRadius: 6,
+                    border: '1px solid rgb(229, 231, 235)',
+                    padding: 0,
+                    margin: 0,
+                    // border: 'none',
+                    boxSizing: 'border-box',
+                    outline: 'none',
+                    // maxHeight: 600,
+                }, children: (0, jsx_runtime_1.jsxs)("div", { role: "table", className: "table", style: { minWidth: '0px', width: '100%', height: '100%' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "thead", children: (0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
+                                    display: 'flex',
+                                    flex: '1 0 auto',
+                                    minWidth: '100px',
+                                    boxSizing: 'border-box',
+                                }, children: columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => toggleSort(column), 
+                                    // @ts-ignore
+                                    style: {
+                                        boxSizing: 'border-box',
+                                        flex: '150 0 auto',
+                                        minWidth: '50px',
+                                        width: '150px',
+                                        position: 'relative',
+                                        cursor: 'pointer',
+                                        background: 'rgb(249, 250, 251)',
+                                        borderRight: index + 1 === columns.length
+                                            ? '0px solid rgb(229, 231, 235)'
+                                            : '1px solid rgb(229, 231, 235)',
+                                        borderBottom: '1px solid rgb(229, 231, 235)',
+                                        whiteSpace: 'nowrap',
+                                        alignItems: 'center',
+                                        overflowX: 'visible',
+                                        margin: '0px',
+                                        textOverflow: 'ellipsis',
+                                        minHeight: '36px',
+                                        userSelect: 'none',
+                                        paddingLeft: 16,
+                                        paddingRight: 16,
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        justifyContent: 'space-between',
+                                    }, children: [(0, jsx_runtime_1.jsx)("div", { "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", 
+                                            // @ts-ignore
+                                            style: {
+                                                // fontFamily:
+                                                //   'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+                                                WebkitTapHighlightColor: 'transparent',
+                                                fontFamily: theme?.fontFamily,
+                                                // color: 'rgb(55, 65, 81)',
+                                                color: theme?.primaryTextColor,
+                                                textDecoration: 'none',
+                                                fontSize: theme?.fontSizeSmall || '14px',
+                                                fontWeight: theme?.fontWeightMedium || '500',
+                                                lineHeight: '20px', // 1.25rem * 16px = 20px
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                                overflow: 'hidden',
+                                            }, children: column.label || column.field }), column.field === sortColumn && ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.primaryTextColor, height: "14px", width: "14px", style: {
+                                                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))) }) }), (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: {
+                                    display: 'flex',
+                                    flex: '1 0 auto',
+                                    minWidth: '100px',
+                                    boxSizing: 'border-box',
+                                }, children: columns.map((column, columnIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "cell", style: {
+                                        boxSizing: 'border-box',
+                                        flex: '150 0 auto',
+                                        minWidth: '50px',
+                                        width: '150px',
+                                        display: 'flex',
+                                        margin: '0px',
+                                        textOverflow: 'ellipsis',
+                                        minHeight: '36px',
+                                        borderRight: columnIndex + 1 === columns.length
+                                            ? '0px solid rgb(229, 231, 235)'
+                                            : '1px solid rgb(229, 231, 235)',
+                                        overflow: 'hidden',
+                                        borderTop: rowIndex > 0
+                                            ? '1px solid rgb(229, 231, 235)'
+                                            : undefined,
+                                        borderBottom: rowIndex === rows.length - 1
+                                            ? '1px solid rgb(229, 231, 235)'
+                                            : undefined,
+                                        userSelect: 'none',
+                                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                            lineHeight: '24px',
+                                            width: '100%',
+                                            display: 'flex',
+                                            cursor: 'default',
+                                            position: 'relative',
+                                            userSelect: 'none',
+                                        }, "data-testid": "static-cell", children: (0, jsx_runtime_1.jsx)("div", { "aria-haspopup": "dialog", "aria-expanded": "false", style: {
+                                                fontFamily: theme?.fontFamily ||
+                                                    'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+                                                WebkitTapHighlightColor: 'transparent',
+                                                // color: 'rgb(55, 65, 81)',
+                                                color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
+                                                textDecoration: 'none',
+                                                fontWeight: 400,
+                                                fontSize: theme?.fontSizeSmall || '14px',
+                                                lineHeight: '20px',
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                                overflow: 'hidden',
+                                                padding: '8px 16px',
+                                                userSelect: 'none',
+                                            }, children: column.format
+                                                ? (0, valueFormatter_1.valueFormatter)({
+                                                    value: row[column.field],
+                                                    field: column.field,
+                                                    fields: columns,
+                                                })
+                                                : typeof row[column.field] === 'object'
+                                                    ? JSON.stringify(row[column.field]).length > 55
+                                                        ? JSON.stringify(row[column.field]).substring(0, 52) + '...'
+                                                        : JSON.stringify(row[column.field])
+                                                    : row[column.field].length > 55
+                                                        ? row[column.field].substring(0, 52) + '...'
+                                                        : row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex))) }), activeRows.length === 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                paddingTop: '60px',
+                                display: 'flex',
+                                flex: '1 0 auto',
+                                margin: 'auto',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                fontSize: 13,
+                                color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
+                            }, children: "No results found for specified time period." }))] }) }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        flex: '1 0 auto',
+                        minWidth: '100px',
+                        boxSizing: 'border-box',
+                        position: 'absolute',
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        height: 38,
+                        background: '#F9FAFB',
+                        borderRight: '1px solid rgb(229, 231, 235)',
+                        borderLeft: '1px solid rgb(229, 231, 235)',
+                        borderBottom: '1px solid rgb(229, 231, 235)',
+                        borderTop: '1px solid rgb(229, 231, 235)',
+                        borderBottomRightRadius: 6,
+                        borderBottomLeftRadius: 6,
+                        width: '100%',
+                    }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            width: '100%',
+                        }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: showDownloadCsvButton ? downloadCSV : undefined, style: {
+                                    fontSize: 14,
+                                    paddingLeft: 12,
+                                    fontFamily: theme?.fontFamily,
+                                    color: theme?.primaryTextColor,
+                                    background: 'transparent',
+                                    fontWeight: 500,
+                                    cursor: 'pointer',
+                                    border: 'none',
+                                }, children: showDownloadCsvButton ? 'Download CSV' : '' }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                            fontSize: 12,
+                                            fontFamily: theme?.fontFamily,
+                                            color: theme?.primaryTextColor,
+                                        }, children: [page, ' of ', maxPage] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 8 } }), (0, jsx_runtime_1.jsx)("button", { onClick: decreasePage, style: {
+                                            cursor: 'pointer',
+                                            border: 'none',
+                                            background: 'transparent',
+                                        }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z", clipRule: "evenodd" }) }) }), (0, jsx_runtime_1.jsx)("button", { onClick: increasePage, style: {
+                                            cursor: 'pointer',
+                                            border: 'none',
+                                            background: 'transparent',
+                                        }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z", clipRule: "evenodd" }) }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 12 } })] })] }) }) })] }));
+}
+exports.SpecialTable = SpecialTable;
+const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, dashboardFilters, theme, downloadCSV, csvFilename, showDownloadCsvButton = true, LoadingComponent, }) => {
+    const [chartConfig, setChartConfig] = (0, react_1.useState)(null);
+    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: client.customerId
+                            ? {
+                                dashboardItemId: chartId,
+                                orgId: client.customerId,
+                                task: 'item',
+                                filters: [...Object.values(dashboardFilters)],
+                                clientId: client.publicKey,
+                            }
+                            : {
+                                dashboardItemId: chartId,
+                                task: 'item',
+                                filters: [...Object.values(dashboardFilters)],
+                                clientId: client.publicKey,
+                            },
+                    };
+                    const cloudBody = {
+                        id: chartId,
+                        filters: [...Object.values(dashboardFilters)],
+                    };
+                    const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
+                    if (resp) {
+                        setLoading(false);
+                        if (resp.compareRows) {
+                            (0, merge_1.mergeComparisonRange)(resp);
+                        }
+                        dispatch({
+                            type: 'UPDATE_DASHBOARD_ITEM',
+                            id: chartId,
+                            data: {
+                                ...resp,
+                                filtersApplied: dashboardFilters
+                            },
+                        });
+                    }
+                }
+                catch (e) {
+                    console.log('Error fetching chart: ', e);
+                    setLoading(false);
+                }
+            }
+        }
+        getChartOptions();
+        return () => {
+            isSubscribed = false;
+        };
+    }, [dashboardFilters, client.customerId, chartId]);
+    const handleDownloadCSV = () => {
+        downloadCSV(memoizedData, chartConfig.name);
+    };
+    // const dateFilter = Object.values(dashboardFilters).find(
+    //   (filter) => filter.filterType == 'date_range',
+    // );
+    // const pivotTable = useMemo(() => {
+    //   const pivot = dashboard[chartId]?.pivot;
+    //   const data = dashboard[chartId];
+    //   return pivot && data?.rows
+    //     ? generatePivotTable(
+    //         pivot,
+    //         data.rows,
+    //         dateFilter?.startDate
+    //           ? [dateFilter?.startDate, dateFilter?.endDate, null]
+    //           : [null, null, null],
+    //       )
+    //     : null;
+    // }, [dashboard, chartId, dateFilter]);
+    if (!dashboard[chartId] || loading) {
+        return ((0, jsx_runtime_1.jsx)("div", { 
+            // className="flex flex-col flex-1 h-[100%]"
+            style: {
+                ...containerStyle,
+                // marginLeft: 25,
+                // marginRight: 25,
+                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)(SpecialTable, { showDownloadCsvButton: showDownloadCsvButton, csvFilename: csvFilename || dashboard[chartId].name, columns: dashboard[chartId].columns, rows: dashboard[chartId].rows ?? [], height: containerStyle?.height || '100%', theme: theme, containerStyle: containerStyle, LoadingComponent: LoadingComponent }));
+};
+function Columns({ columns, data, theme, handleDownloadCSV, numToShow }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    // overflowX: 'scroll',
+                    // overflowY: 'hidden',
+                    overflow: 'scroll',
+                    height: '100%',
+                }, children: columns.map((elem) => ((0, jsx_runtime_1.jsx)(Column, { column: elem, data: data, theme: theme }, elem.field))) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    //   background: 'black',
+                }, children: [data.length > numToShow && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            color: theme?.chartLabelColor,
+                            boxSizing: 'content-box',
+                            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+                            fontSize: theme?.fontSizeSmall || '0.875rem',
+                            marginLeft: 12,
+                            marginTop: 8,
+                        }, children: ["...", data.length - numToShow, " more"] })), (0, jsx_runtime_1.jsx)("div", { onClick: handleDownloadCSV, style: {
+                            height: 40,
+                            minHeight: 40,
+                            color: theme?.primaryTextColor,
+                            boxSizing: 'content-box',
+                            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+                            fontSize: theme?.fontSizeSmall || '0.875rem',
+                            fontWeight: theme?.fontWeightMedium || '500',
+                            marginTop: 8,
+                            marginLeft: 20,
+                            cursor: 'pointer',
+                        }, children: "Download CSV" })] })] }));
+}
+function Column({ column, data, theme }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            paddingLeft: 20,
+            paddingRight: 20,
+            // width: 'max-content',
+            display: 'inline-flex',
+            flexDirection: 'column',
+            whiteSpace: 'nowrap',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    height: 40,
+                    minHeight: 40,
+                    color: theme?.primaryTextColor,
+                    boxSizing: 'content-box',
+                    fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+                    fontSize: theme?.fontSizeSmall || '0.875rem',
+                    fontWeight: theme?.fontWeightMedium || '500',
+                }, children: column.label || column.field }), data.map((elem) => ((0, jsx_runtime_1.jsx)(Cell, { item: elem[column.field], theme: theme })))] }));
+}
+function Cell({ item, theme }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            height: 40,
+            minHeight: 40,
+            whiteSpace: 'nowrap',
+            width: '100%',
+            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+            fontSize: theme?.fontSizeSmall || '0.875rem',
+            color: theme?.chartLabelColor,
+        }, children: item }));
+}
+exports.default = Table;

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableChart.d.ts","sourceRoot":"","sources":["../../src/TableChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAqEjD,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAuED,QAAA,MAAM,UAAU,qFAoQf,CAAC;AAEF,eAAe,UAAU,CAAC"}