@quillsql/react 2.10.28 → 2.10.29

package/dist/esm/{Table.js → components/QuillTable.js}

@@ -1,62 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-import { useContext, useEffect, useState } from 'react';
-import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, } from './Context';
-import { getData } from './utils/dataFetcher';
-import { valueFormatter } from './utils/valueFormatter';
-import { mergeComparisonRange } from './utils/merge';
-import { useExport } from './hooks/useExport';
-const Table = ({ chartId, columns, rows, containerStyle, csvFilename, showDownloadCsvButton, LoadingComponent, loading, height, }) => {
-    const { dispatch, dashboard } = useContext(DashboardContext);
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
-    const [client, _] = useContext(ClientContext);
-    const [theme] = useContext(ThemeContext);
-    if (!chartId && rows && columns) {
-        return (_jsx(SpecialTable, { showDownloadCsvButton: showDownloadCsvButton, csvFilename: csvFilename || 'table', columns: columns, rows: rows ?? [], height: containerStyle?.height || height || '100%', theme: theme, containerStyle: containerStyle, LoadingComponent: LoadingComponent, loading: loading }));
-    }
-    return (_jsx(ChartUpdater, { showDownloadCsvButton: showDownloadCsvButton, dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, dashboardFilters: dashboardFilters, client: client, theme: theme, csvFilename: csvFilename, LoadingComponent: LoadingComponent }));
-};
-const compareValues = (a, b, column) => {
-    const valueA = a[column];
-    const valueB = b[column];
-    // Null checks
-    if (valueA === null && valueB === null) {
-        return 0; // Both values are null, consider them equal
-    }
-    else if (valueA === null) {
-        return -1; // ValueA is null, consider it smaller
-    }
-    else if (valueB === null) {
-        return 1; // ValueB is null, consider it smaller
-    }
-    // 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);
-};
-export function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingComponent, theme, showDownloadCsvButton = true, csvFilename, DownloadCSVButtonComponent, AddToDashboardButtonComponent, }) {
+import { useContext, useEffect, useState, useMemo } from 'react';
+import { LoadingSpinner } from './UiComponents';
+import { useExport } from '../hooks/useExport';
+import { compareValues, quillFormat } from '../utils/valueFormatter';
+import { ThemeContext } from '../Context';
+export default function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFileName, containerStyle, LoadingComponent = () => _jsx(LoadingSpinner, {}), }) {
     const [activeRows, setActiveRows] = useState([]);
     const [page, setPage] = useState(1);
     const [maxPage, setMaxPage] = useState(1);
     const [sortColumn, setSortColumn] = useState(null);
     const [sortDirection, setSortDirection] = useState('desc');
+    const [theme] = useContext(ThemeContext);
+    const [isFormatting, setIsFormatting] = useState(false);
+    const formattedRows = useMemo(() => {
+        setIsFormatting(true);
+        return rows.map((row) => {
+            return columns.reduce((formattedRow, column) => {
+                // Apply the format function to each field in the row
+                const formattedValue = quillFormat({
+                    value: row[column.field],
+                    format: column.format,
+                });
+                formattedRow[column.field] = formattedValue;
+                return formattedRow;
+            }, {});
+        });
+    }, [rows]);
     const { downloadCSV } = useExport({
-        rows,
+        rows: formattedRows,
         fields: columns,
-        name: csvFilename,
+        name: downloadFileName,
     });
     useEffect(() => {
-        const sortedRows = [...rows];
+        const sortedRows = [...formattedRows];
         if (sortColumn) {
             sortedRows.sort((a, b) => {
                 const result = compareValues(a, b, sortColumn);
@@ -69,7 +45,8 @@ export function SpecialTable({ columns, rows, height, containerStyle, loading, L
             setMaxPage(Math.ceil(sortedRows.length / 10));
         }
         setActiveRows(sortedRows.slice(start, end));
-    }, [page, rows, sortColumn, sortDirection]);
+        setIsFormatting(false);
+    }, [page, formattedRows, sortColumn, sortDirection]);
     const increasePage = () => {
         if (page === maxPage) {
             return;
@@ -91,70 +68,40 @@ export function SpecialTable({ columns, rows, height, containerStyle, loading, L
             setSortDirection('desc');
         }
     };
-    if (loading) {
+    if (loading || isFormatting) {
         return (_jsx("div", { style: {
-                ...containerStyle,
-                // paddingLeft: 25,
-                // paddingRight: 25,
-                // borderRadius: 8,
-                // marginTop: 25,
-                // overflow: 'visible',
+                height: '100%',
                 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: _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 && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsxs("svg", { width: "24", height: "24", children: [_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: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _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: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] }) }));
+                justifyContent: 'center',
+                alignItems: 'center',
+                ...containerStyle,
+            }, children: _jsx(LoadingComponent, {}) }));
     }
     return (_jsxs("div", { style: {
-            ...containerStyle,
-            // paddingLeft: 25,
-            // paddingRight: 25,
-            // borderRadius: 8,
-            // marginTop: 25,
+            width: '100%',
+            height: '100%',
             overflow: 'visible',
-            height: height,
             display: 'flex',
             flexDirection: 'column',
-            // overflow: 'hidden',
-            // @ts-ignore
-            // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
+            ...containerStyle,
         }, children: [_jsx("div", { style: {
                     height: '100%',
+                    width: '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: _jsxs("div", { role: "table", className: "table", style: { minWidth: '0px', width: '100%', height: '100%' }, children: [_jsx("div", { className: "thead", children: _jsx("div", { role: "row", className: "tr", style: {
                                     display: 'flex',
                                     flex: '1 0 auto',
                                     minWidth: '100px',
                                     boxSizing: 'border-box',
-                                }, children: columns.map((column, index) => (_jsxs("div", { onClick: () => toggleSort(column), 
-                                    // @ts-ignore
-                                    style: {
+                                }, children: columns.map((column, index) => (_jsxs("div", { onClick: () => toggleSort(column), style: {
                                         boxSizing: 'border-box',
                                         flex: '150 0 auto',
                                         minWidth: '50px',
@@ -178,9 +125,7 @@ export function SpecialTable({ columns, rows, height, containerStyle, loading, L
                                         display: 'flex',
                                         flexDirection: 'row',
                                         justifyContent: 'space-between',
-                                    }, children: [_jsx("div", { "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", 
-                                            // @ts-ignore
-                                            style: {
+                                    }, children: [_jsx("div", { "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown", style: {
                                                 // fontFamily:
                                                 //   'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
                                                 WebkitTapHighlightColor: 'transparent',
@@ -198,7 +143,16 @@ export function SpecialTable({ columns, rows, height, containerStyle, loading, L
                                                 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))) }) }), _jsx("div", { role: "rowgroup", className: "tbody", children: activeRows.map((row, rowIndex) => (_jsx("div", { role: "row", className: "tr", 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.length === 0 || columns.length === 0 ? (_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 returned." })) : (_jsx("div", { role: "rowgroup", className: "tbody", children: activeRows.map((row, rowIndex) => (_jsx("div", { role: "row", className: "tr", style: {
                                     display: 'flex',
                                     flex: '1 0 auto',
                                     minWidth: '100px',
@@ -245,28 +199,7 @@ export function SpecialTable({ columns, rows, height, containerStyle, loading, L
                                                 overflow: 'hidden',
                                                 padding: '8px 16px',
                                                 userSelect: 'none',
-                                            }, children: column.format
-                                                ? 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 || !columns.length === 0) && (_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." }))] }) }), _jsx("div", { style: { position: 'relative' }, children: _jsx("div", { style: {
+                                            }, children: row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex))) }))] }) }), _jsx("div", { style: { position: 'relative' }, children: _jsx("div", { style: {
                         display: 'flex',
                         flex: '1 0 auto',
                         minWidth: '100px',
@@ -290,7 +223,7 @@ export function SpecialTable({ columns, rows, height, containerStyle, loading, L
                             alignItems: 'center',
                             justifyContent: 'space-between',
                             width: '100%',
-                        }, children: [_jsx("button", { onClick: showDownloadCsvButton ? downloadCSV : undefined, style: {
+                        }, children: [showDownloadCSVButton ? (_jsx("button", { onClick: downloadCSV, style: {
                                     fontSize: 14,
                                     paddingLeft: 12,
                                     fontFamily: theme?.fontFamily,
@@ -299,7 +232,7 @@ export function SpecialTable({ columns, rows, height, containerStyle, loading, L
                                     fontWeight: 500,
                                     cursor: 'pointer',
                                     border: 'none',
-                                }, children: showDownloadCsvButton ? 'Download CSV' : '' }), _jsxs("div", { style: {
+                                }, children: "Download CSV" })) : (_jsx("div", {})), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
@@ -317,88 +250,3 @@ export function SpecialTable({ columns, rows, height, containerStyle, loading, L
                                             background: 'transparent',
                                         }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: theme?.chartLabelFontFamily || theme?.fontFamily, height: "16px", width: "16px", children: _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" }) }) }), _jsx("div", { style: { width: 12 } })] })] }) }) })] }));
 }
-const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, dashboardFilters, theme, downloadCSV, csvFilename, showDownloadCsvButton = true, LoadingComponent, }) => {
-    const [chartConfig, setChartConfig] = useState(null);
-    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]);
-    // 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 (_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: _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(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 }));
-};
-export default Table;

package/dist/esm/components/UiComponents.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export interface Option {
     value: string;
     label: string;
@@ -27,9 +27,12 @@ export interface ButtonComponentProps {
 export interface TableComponentProps {
     rows: any[];
     columns: any[];
-    height: string;
+    containerStyle?: React.CSSProperties;
     loading?: boolean;
+    showDownloadCSVButton?: boolean;
+    downloadFileName?: string;
     LoadingComponent?: () => JSX.Element;
+    DownloadCSVButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
 }
 export interface TextInputComponentProps {
     onChange: (e: any) => void;
@@ -121,4 +124,7 @@ export declare const MemoizedDeleteButton: ({ onClick, style }: {
     onClick: any;
     style: any;
 }) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingSpinner: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=UiComponents.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/UiComponents.js

@@ -245,3 +245,4 @@ export const MemoizedDeleteButton = ({ onClick, style }) => (_jsxs("button", { c
   .quill-delete-button:hover {
     background-color: rgba(56, 65, 81, 0.03);
   }` }), _jsx(XIcon, { height: "20", width: "20", fill: "#6C727F" })] }));
+export const LoadingSpinner = ({ ...props }) => (_jsxs("svg", { width: "24", height: "24", children: [_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: "#364153", fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _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: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }));

package/dist/esm/hooks/useFormat.d.ts

@@ -1,4 +1,6 @@
 export declare const useMemoizedRows: (chartId: string) => {
-    formattedRows: string[][];
+    formattedRows: {
+        [key: string]: string;
+    }[];
 };
 //# sourceMappingURL=useFormat.d.ts.map

package/dist/esm/hooks/useFormat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormat.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFormat.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,YAAa,MAAM;;CAiB9C,CAAC"}
+{"version":3,"file":"useFormat.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFormat.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,YAAa,MAAM;;;;CAwB9C,CAAC"}

package/dist/esm/hooks/useFormat.js

@@ -3,18 +3,19 @@ import { useQuill } from './useQuill';
 import { useMemo } from 'react';
 export const useMemoizedRows = (chartId) => {
     const { data } = useQuill(chartId);
-    const formattedRows = useMemo(() => {
-        if (!data)
-            return [];
-        const { rows, columns } = data;
-        return rows.map((row) => {
-            return columns.map((column) => {
-                return quillFormat({
-                    value: row[column.field],
-                    format: column.format,
-                });
+    if (!data)
+        return { formattedRows: [] };
+    const { rows, columns } = data;
+    const formattedRows = useMemo(() => rows.map((row) => {
+        return columns.reduce((formattedRow, column) => {
+            // Apply the format function to each field in the row
+            const formattedValue = quillFormat({
+                value: row[column.field],
+                format: column.format,
             });
-        });
-    }, [data]);
+            formattedRow[column.field] = formattedValue;
+            return formattedRow;
+        }, {});
+    }), [rows]);
     return { formattedRows };
 };

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 Table } from './Table';
+export { default as QuillTable } from './components/QuillTable';
 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,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"}
+{"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"}

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 Table } from './Table';
+export { default as QuillTable } from './components/QuillTable';
 export { default as SQLEditor, SchemaListComponent } from './SQLEditor';
 export { default as ReportBuilder } from './ReportBuilder';
 export { default as ChartBuilder } from './ChartBuilder';

package/dist/esm/utils/valueFormatter.d.ts

@@ -18,5 +18,10 @@ export declare const quillFormat: ({ value, format, }: {
     value: any;
     format: string;
 }) => string;
+export declare const compareValues: (a: {
+    [key: string]: any;
+}, b: {
+    [key: string]: any;
+}, column: string) => number;
 export {};
 //# sourceMappingURL=valueFormatter.d.ts.map

package/dist/esm/utils/valueFormatter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"valueFormatter.d.ts","sourceRoot":"","sources":["../../../src/utils/valueFormatter.ts"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAQ7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,6BAA8B,KAAK,KAAG,MAwChE,CAAC;AAEF,eAAO,MAAM,WAAW;WAIf,GAAG;YACF,MAAM;MACZ,MAkCH,CAAC"}
+{"version":3,"file":"valueFormatter.d.ts","sourceRoot":"","sources":["../../../src/utils/valueFormatter.ts"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAQ7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,6BAA8B,KAAK,KAAG,MAwChE,CAAC;AAEF,eAAO,MAAM,WAAW;WAIf,GAAG;YACF,MAAM;MACZ,MAoCH,CAAC;AAmJF,eAAO,MAAM,aAAa;;;;WAGhB,MAAM,KACb,MA2BF,CAAC"}

package/dist/esm/utils/valueFormatter.js

@@ -50,6 +50,8 @@ export const valueFormatter = ({ value, field, fields }) => {
     return formatString(value); // by default make this value a string
 };
 export const quillFormat = ({ value, format, }) => {
+    if (value === undefined || value === null)
+        return '';
     const HANDLERS = {
         percent: formatPercent,
         dollar_amount: formatDollarAmount,
@@ -68,7 +70,7 @@ export const quillFormat = ({ value, format, }) => {
     };
     // try to handle this value using the associated formatType handler
     const formatType = format;
-    if (Object.keys(HANDLERS).includes(formatType)) {
+    if (HANDLERS[formatType]) {
         // if bigquery date type, we have to pull the value out of the json
         if (DATE_FORMAT_TYPES.includes(formatType) &&
             typeof value === 'object' &&
@@ -96,38 +98,38 @@ const formatString = (value) => {
  *
  * eg. @example format(1234.567) => "$1,235"
  */
+const formatterDollar = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 0,
+});
 const formatDollarAmount = (value) => {
-    const formatter = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-        maximumFractionDigits: 0,
-    });
-    return formatter.format(Number(value ?? 0));
+    return formatterDollar.format(Number(value ?? 0));
 };
 /**
  * Formats the value as a (rounded) currency amount in dollars and cents.
  *
  * @example format(1234.567) => "$1,234.57"
  */
+const formatterCentsDollar = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
 const formatDollarCents = (value) => {
-    const formatter = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-    });
-    return formatter.format(Number(value ?? 0));
+    return formatterCentsDollar.format(Number(value ?? 0));
 };
 /**
  * Formats the value as a (rounded) integer.
  *
  * @example format(1234.567) => "1,235"
  */
+const wholeNumberFormatter = new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 0,
+});
 const formatWholeNumber = (value) => {
-    const formatter = new Intl.NumberFormat('en-US', {
-        maximumFractionDigits: 0,
-    });
-    return formatter.format(Number(value));
+    return wholeNumberFormatter.format(Number(value));
 };
 /**
  * Formats the value as a number rounded to exactly one decimal place.
@@ -146,12 +148,12 @@ const formatOneDecimalPlace = (value) => {
  *
  * @example format(1234.567) => "1,234.57"
  */
+const formatterTwoDecimalPlaces = new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
 const formatTwoDecimalPlaces = (value) => {
-    const formatter = new Intl.NumberFormat('en-US', {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-    });
-    return formatter.format(Number(value));
+    return formatterTwoDecimalPlaces.format(Number(value));
 };
 /**
  * Formats the value as a percentage.
@@ -166,13 +168,13 @@ const formatTwoDecimalPlaces = (value) => {
  * @example format(1234.567) => "123,456.70%"
  * @example format(99) => "9,900.00%"
  */
+const formatterPercent = new Intl.NumberFormat('en-US', {
+    style: 'percent',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
 const formatPercent = (value) => {
-    const formatter = new Intl.NumberFormat('en-US', {
-        style: 'percent',
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-    });
-    return formatter.format(Number(value));
+    return formatterPercent.format(Number(value));
 };
 // Converts the value to a UTC date with the given format string. If the
 // resulting date is invalid, it returns "Invalid date".
@@ -216,3 +218,29 @@ const format_wo_yyyy = (value) => {
         return 'Invalid date';
     return `${getWeek(utcDate)},${utcDate.getFullYear()}`;
 };
+export const compareValues = (a, b, column) => {
+    const valueA = a[column];
+    const valueB = b[column];
+    // Null checks
+    if (valueA === null && valueB === null) {
+        return 0; // Both values are null, consider them equal
+    }
+    else if (valueA === null) {
+        return -1; // ValueA is null, consider it smaller
+    }
+    else if (valueB === null) {
+        return 1; // ValueB is null, consider it smaller
+    }
+    // For numbers
+    if (!isNaN(valueA) && !isNaN(valueB)) {
+        return valueA - valueB;
+    }
+    // For dates
+    const dateA = new Date(valueA);
+    const dateB = new Date(valueB);
+    if (!isNaN(dateA.getTime()) && !isNaN(dateB.getTime())) {
+        return dateA.getTime() - dateB.getTime();
+    }
+    // For strings
+    return valueA.localeCompare(valueB);
+};

package/package.json

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