@quillsql/react 2.12.4 → 2.12.6

package/dist/esm/Table.js

@@ -44,7 +44,7 @@ const Table = (props) => {
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [client, _] = useContext(ClientContext);
     if ('rows' in data && 'columns' in data) {
-        return (_jsx(QuillTable, { hideCSVDownloadButton: data.hideCSVDownloadButton, downloadFileName: data.csvFilename, columns: data.columns, rows: data.rows, className: data.className, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, isLoading: data.isLoading, downloadCSV: data.downloadCSV }));
+        return (_jsx(QuillTable, { hideCSVDownloadButton: data.hideCSVDownloadButton, columns: data.columns, rows: data.rows, className: data.className, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, isLoading: data.isLoading, downloadCSV: data.downloadCSV }));
     }
     return (_jsx(ChartUpdater, { hideCSVDownloadButton: data.hideCSVDownloadButton, dispatch: dispatch, dashboard: dashboard, reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent }));
 };
@@ -99,8 +99,6 @@ const ChartUpdater = ({ reportId, containerStyle, className, dashboard, dispatch
         };
     }, [dashboardFilters, client.customerId, reportId]);
     return (_jsx(QuillTable, { hideCSVDownloadButton: hideCSVDownloadButton, 
-        // @ts-ignore
-        downloadFileName: csvFilename || dashboard[reportId]?.name || '', 
         // @ts-ignore
         columns: dashboard[reportId]?.columns || [], 
         // @ts-ignore

package/dist/esm/components/Dashboard/DataLoader.d.ts

@@ -4,10 +4,18 @@ import { QuillTheme } from '../../QuillProvider';
 export type DataLoaderChildProps = {
     isLoading: boolean;
     error?: string;
+    onPageChange: (page: {
+        currentPage: number;
+        rowsPerPage: number;
+    }) => void;
+    onSortChange: (sort: {
+        field: string;
+        direction: string;
+    }) => void;
 };
 export default function DataLoader({ id, children, }: {
     id: string;
-    children: ({ isLoading, error }: DataLoaderChildProps) => JSX.Element;
+    children: ({ isLoading, error, onPageChange, onSortChange, }: DataLoaderChildProps) => JSX.Element;
 }): JSX.Element;
 type ColorMapType = {
     [key: string]: {

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

@@ -1 +1 @@
-{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAKjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,QAAQ,GACT,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACvE,GAAG,GAAG,CAAC,OAAO,CAkFd;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC;AAIF,eAAO,MAAM,eAAe;QAKtB,MAAM;;mCAGC,WAAW,UACZ,UAAU,KACf,YAAY;4CAKd,yBAAyB,KAAK,WAAW;MAC1C,WA6FH,CAAC"}
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAKjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACpE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,QAAQ,GACT,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,GACb,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACzC,GAAG,GAAG,CAAC,OAAO,CAmHd;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC;AAIF,eAAO,MAAM,eAAe;QAKtB,MAAM;;mCAGC,WAAW,UACZ,UAAU,KACf,YAAY;4CAKd,yBAAyB,KAAK,WAAW;MAC1C,WA2FH,CAAC"}

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

@@ -12,71 +12,101 @@ export default function DataLoader({ id, children, }) {
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [customFields] = useContext(CustomFieldContext);
     const [isLoading, setIsLoading] = useState(true);
+    const [isPaginationLoading, setIsPaginationLoading] = useState(true);
     const [error, setError] = useState(undefined);
-    useEffect(() => {
-        async function getChartOptions() {
-            setIsLoading(true);
-            if (!didFiltersChange(dashboard[id], dashboardFilters)) {
-                setIsLoading(false);
-                return;
+    const [previousPage, setPreviousPage] = useState(0);
+    const [additionalProcessing, setAdditionProcessing] = useState({
+        page: 0,
+    });
+    const onPageChange = (page) => {
+        if ((previousPage < page.currentPage &&
+            (page.currentPage * page.rowsPerPage) % 100 === 0) ||
+            (previousPage > page.currentPage &&
+                (previousPage * page.rowsPerPage) % 100 === 0)) {
+            getChartOptions({ page });
+        }
+        setPreviousPage(page.currentPage);
+    };
+    const onSortChange = (sort) => {
+        getChartOptions({ sort });
+        setPreviousPage(0);
+    };
+    const getChartOptions = async (processing) => {
+        setIsLoading(true);
+        if (!didFiltersChange(dashboard[id], dashboardFilters)) {
+            setIsLoading(false);
+            return;
+        }
+        try {
+            let updatedProcessing = { ...additionalProcessing, ...processing };
+            if (processing && processing.sort) {
+                if (!updatedProcessing.page) {
+                    updatedProcessing.page = {};
+                }
+                updatedProcessing.page.currentPage = 0;
             }
-            try {
-                // Remove extra fields on each filter so we don't confuse the backend.
-                const minimalFilters = Object.values(dashboardFilters).length
-                    ? Object.values(dashboardFilters).map((filter) => {
-                        const newFilter = { ...filter };
-                        if (newFilter.filterType === 'date_range') {
-                            delete newFilter['field'];
-                            delete newFilter['options'];
-                            delete newFilter['selectedValue'];
-                        }
-                        return newFilter;
-                    })
-                    : [];
-                const hostedBody = {
-                    metadata: {
-                        dashboardItemId: id,
-                        orgId: client.customerId || '*',
-                        clientId: client.publicKey,
-                        task: 'item',
-                        databaseType: client.databaseType,
-                        filters: minimalFilters,
-                        customFields,
-                    },
-                };
-                const cloudBody = {
-                    id: id,
-                    filters: minimalFilters,
-                };
-                const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
-                processFilterErrorList(resp);
-                if (resp && resp.name !== 'error' && !resp.errorMessage) {
-                    if (resp.compareRows) {
-                        mergeComparisonRange(resp);
+            // Remove extra fields on each filter so we don't confuse the backend.
+            const minimalFilters = Object.values(dashboardFilters).length
+                ? Object.values(dashboardFilters).map((filter) => {
+                    const newFilter = { ...filter };
+                    if (newFilter.filterType === 'date_range') {
+                        delete newFilter['field'];
+                        delete newFilter['options'];
+                        delete newFilter['selectedValue'];
                     }
-                    dispatch({
-                        type: 'UPDATE_DASHBOARD_ITEM',
-                        id: id,
-                        data: {
-                            ...resp,
-                            filtersApplied: dashboardFilters,
-                            id: resp._id,
-                        },
-                    });
-                }
-                else {
-                    setError(resp?.errorMessage);
+                    return newFilter;
+                })
+                : [];
+            const hostedBody = {
+                metadata: {
+                    dashboardItemId: id,
+                    orgId: client.customerId || '*',
+                    clientId: client.publicKey,
+                    task: 'item',
+                    databaseType: client.databaseType,
+                    filters: minimalFilters,
+                    customFields,
+                    paginateTable: true,
+                    additionalProcessing: updatedProcessing,
+                },
+            };
+            const cloudBody = {
+                id: id,
+                filters: minimalFilters,
+            };
+            const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
+            processFilterErrorList(resp);
+            if (resp && resp.name !== 'error' && !resp.errorMessage) {
+                if (resp.compareRows) {
+                    mergeComparisonRange(resp);
                 }
-                setIsLoading(false);
+                dispatch({
+                    type: 'UPDATE_DASHBOARD_ITEM',
+                    id: id,
+                    data: {
+                        ...resp,
+                        filtersApplied: dashboardFilters,
+                        id: resp._id,
+                    },
+                });
             }
-            catch (e) {
-                console.log('Error fetching chart: ', e);
-                setError(e.message);
+            else {
+                setError(resp?.errorMessage);
             }
+            setAdditionProcessing(updatedProcessing);
+            setTimeout(() => {
+                setIsLoading(false);
+            }, 200);
+        }
+        catch (e) {
+            console.log('Error fetching chart: ', e);
+            setError(e.message);
         }
+    };
+    useEffect(() => {
         getChartOptions();
     }, [dashboardFilters, client, id]);
-    return _jsx(_Fragment, { children: children({ isLoading, error }) });
+    return _jsx(_Fragment, { children: children({ isLoading, error, onPageChange, onSortChange }) });
 }
 // The same data-loader pattern as above, but with special logic for charts
 // At some point these may be able to get merged into one function.
@@ -90,69 +120,69 @@ export const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, })
     const [client, _] = useContext(ClientContext);
     const [customFields] = useContext(CustomFieldContext);
     const theme = useTheme();
-    useEffect(() => {
-        async function getChartOptions() {
-            setLoading(true);
-            if (!didFiltersChange(dashboard[id], dashboardFilters)) {
-                setLoading(false);
-                return;
-            }
-            try {
-                // Remove extra fields on each filter so we don't confuse the backend.
-                const allowDateRange = !hideDateRangeFilter;
-                const minimalFilters = Object.values(dashboardFilters).length
-                    ? Object.values(dashboardFilters)
-                        .filter((f) => allowDateRange || f.filterType !== 'date_range')
-                        .map((filter) => {
-                        const newFilter = { ...filter };
-                        if (newFilter.filterType === 'date_range') {
-                            delete newFilter['field'];
-                            delete newFilter['options'];
-                            delete newFilter['selectedValue'];
-                        }
-                        return newFilter;
-                    })
-                    : [];
-                const hostedBody = {
-                    metadata: {
-                        dashboardItemId: id,
-                        orgId: client.customerId || '*',
-                        clientId: client.publicKey,
-                        task: 'item',
-                        databaseType: client.databaseType,
-                        filters: minimalFilters,
-                        customFields,
-                    },
-                };
-                const cloudBody = {
-                    id: id,
-                    filters: minimalFilters,
-                };
-                setError(undefined);
-                const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
-                processFilterErrorList(resp);
-                if (resp && resp.name !== 'error' && !resp.errorMessage) {
-                    setIsComparison(!!resp.compareRows?.length);
-                    if (resp.compareRows) {
-                        mergeComparisonRange(resp);
+    const getChartOptions = async () => {
+        setLoading(true);
+        if (!didFiltersChange(dashboard[id], dashboardFilters)) {
+            setLoading(false);
+            return;
+        }
+        try {
+            // Remove extra fields on each filter so we don't confuse the backend.
+            const allowDateRange = !hideDateRangeFilter;
+            const minimalFilters = Object.values(dashboardFilters).length
+                ? Object.values(dashboardFilters)
+                    .filter((f) => allowDateRange || f.filterType !== 'date_range')
+                    .map((filter) => {
+                    const newFilter = { ...filter };
+                    if (newFilter.filterType === 'date_range') {
+                        delete newFilter['field'];
+                        delete newFilter['options'];
+                        delete newFilter['selectedValue'];
                     }
-                    const dashboardItem = { ...resp, filtersApplied: dashboardFilters };
-                    dispatch({
-                        type: 'UPDATE_DASHBOARD_ITEM',
-                        id: id,
-                        data: dashboardItem,
-                    });
-                }
-                else {
-                    setError(resp?.errorMessage);
+                    return newFilter;
+                })
+                : [];
+            const hostedBody = {
+                metadata: {
+                    dashboardItemId: id,
+                    orgId: client.customerId || '*',
+                    clientId: client.publicKey,
+                    task: 'item',
+                    databaseType: client.databaseType,
+                    filters: minimalFilters,
+                    customFields,
+                },
+            };
+            const cloudBody = {
+                id: id,
+                filters: minimalFilters,
+            };
+            setError(undefined);
+            const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
+            processFilterErrorList(resp);
+            if (resp && resp.name !== 'error' && !resp.errorMessage) {
+                setIsComparison(!!resp.compareRows?.length);
+                if (resp.compareRows) {
+                    mergeComparisonRange(resp);
                 }
-                setLoading(false);
+                const dashboardItem = { ...resp, filtersApplied: dashboardFilters };
+                dispatch({
+                    type: 'UPDATE_DASHBOARD_ITEM',
+                    id: id,
+                    data: dashboardItem,
+                });
             }
-            catch (e) {
-                console.log('Error fetching chart: ', e);
-                setLoading(false);
+            else {
+                setError(resp?.errorMessage);
             }
+            setLoading(false);
+        }
+        catch (e) {
+            console.log('Error fetching chart: ', e);
+            setLoading(false);
         }
+    };
+    useEffect(() => {
         setInitialLoad(false);
         getChartOptions();
     }, [dashboardFilters, client, id]);

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { QuillReportProps } from '../../Dashboard';
-export default function QuillTableComponent({ report, onClick, isLoading, error, }: QuillReportProps): JSX.Element;
+export default function QuillTableComponent({ report, onClick, isLoading, error, onPageChange, onSortChange, }: QuillReportProps): JSX.Element;
 //# sourceMappingURL=TableComponent.d.ts.map

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":";AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA+JhC"}
+{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,GACb,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAuLhC"}

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useMemo } from 'react';
-import { downloadCSV } from '../../utils/csv';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import QuillTable from '../QuillTable';
 import { generatePivotTable } from '../../internals/ReportBuilder/PivotModal';
 import { DashboardFiltersContext } from '../../Context';
@@ -8,9 +7,17 @@ import { quillFormat } from '../../utils/valueFormatter';
 import ChartSkeleton from '../Chart/ChartSkeleton';
 import ChartError from '../Chart/ChartError';
 import { useTheme } from '../../hooks';
-export default function QuillTableComponent({ report, onClick, isLoading, error, }) {
+import { useExport } from '../../hooks/useExport';
+export default function QuillTableComponent({ report, onClick, isLoading, error, onPageChange, onSortChange, }) {
     const theme = useTheme();
     const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const [initialLoad, setInitialLoad] = useState(true);
+    const { downloadCSV } = useExport(report?.id);
+    useEffect(() => {
+        if (!isLoading) {
+            setInitialLoad(false);
+        }
+    }, [isLoading]);
     const config = report;
     const data = report;
     const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
@@ -61,6 +68,17 @@ export default function QuillTableComponent({ report, onClick, isLoading, error,
             return formattedRow;
         }, {});
     });
+    let numberOfRows = undefined;
+    if (data.compareRows &&
+        data.compareRows[0] &&
+        (data.compareRows[0].count || data.compareRows[0].COUNT)) {
+        if (data.compareRows[0].COUNT) {
+            numberOfRows = parseInt(data.compareRows[0].COUNT);
+        }
+        else if (data.compareRows[0].count) {
+            numberOfRows = parseInt(data.compareRows[0].count);
+        }
+    }
     return (_jsxs("div", { style: { cursor: 'pointer' }, onClick: () => onClick && onClick(report), children: [_jsxs("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
@@ -90,20 +108,20 @@ export default function QuillTableComponent({ report, onClick, isLoading, error,
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'flex-end',
-                        }, children: 'view report →' })) : null] }), isLoading ? (_jsx(ChartSkeleton, { containerStyle: {
+                        }, children: 'view report →' })) : null] }), initialLoad ? (_jsx(ChartSkeleton, { containerStyle: {
                     width: '100%',
                     height: '400px',
                 } })) : error ? (_jsx(ChartError, { containerStyle: {
                     width: '100%',
                     height: '400px',
-                } })) : (_jsx(QuillTable, { rows: formattedRows ?? [], columns: columns ?? data.yAxisFields, rowsPerPage: 10, containerStyle: {
+                } })) : (_jsx(QuillTable, { isLoading: isLoading, rows: formattedRows ?? [], numberOfRows: numberOfRows, columns: columns ?? data.yAxisFields, rowsPerPage: 10, containerStyle: {
                     width: '100%',
                     height: '400px',
-                }, hideCSVDownloadButton: true, downloadCSV: () => {
-                    downloadCSV({
-                        rows: pivotTable?.rows ?? data.rows ?? [],
-                        fields: columns ?? data.yAxisFields,
-                        name: data.name || '',
-                    });
-                } }))] }, report?.name));
+                }, downloadCSV: () => {
+                    downloadCSV();
+                }, onPageChange: (page) => {
+                    onPageChange && onPageChange(page);
+                }, onSortChange: (sort) => {
+                    onSortChange && onSortChange(sort);
+                }, currentPage: data.page, sort: data.sort }))] }, report?.name));
 }

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

@@ -2,20 +2,33 @@ import React from 'react';
 import { ButtonComponentProps } from './UiComponents';
 export interface TableComponentProps {
     rows: any[];
+    numberOfRows?: number;
     columns: {
         label: string;
         field: string;
     }[];
+    currentPage?: number;
+    sort?: {
+        field: string;
+        direction: string;
+    };
     className?: string;
     containerStyle?: React.CSSProperties;
     isLoading?: boolean;
     hideCSVDownloadButton?: boolean;
-    downloadFileName?: string;
     downloadCSV?: () => void;
     LoadingComponent?: () => JSX.Element;
     DownloadCSVButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
     rowsPerPage?: number;
     emptyStateLabel?: string;
+    onPageChange?: (page: {
+        currentPage: number;
+        rowsPerPage: number;
+    }) => void;
+    onSortChange?: (sort: {
+        field: string;
+        direction: string;
+    }) => void;
 }
-export default function QuillTable({ rows, columns, isLoading, hideCSVDownloadButton, downloadFileName, containerStyle, className, LoadingComponent, rowsPerPage, emptyStateLabel, downloadCSV, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
+export default function QuillTable({ rows, numberOfRows, columns, isLoading, currentPage, sort, hideCSVDownloadButton, containerStyle, className, LoadingComponent, rowsPerPage, emptyStateLabel, downloadCSV, onPageChange, onSortChange, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillTable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAGtD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,qBAA4B,EAC5B,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,gBAA0C,EAC1C,WAAgB,EAChB,eAA8B,EAC9B,WAAW,GACZ,EAAE,mBAAmB,2CAyZrB"}
+{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,oBAAoB,EAAyB,MAAM,gBAAgB,CAAC;AAI7E,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,WAAW,EACX,IAAI,EACJ,qBAA4B,EAC5B,cAAc,EACd,SAAS,EACT,gBAAwC,EACxC,WAAgB,EAChB,eAA8B,EAC9B,WAAW,EACX,YAAY,EACZ,YAAY,GACb,EAAE,mBAAmB,2CAicrB"}

package/dist/esm/components/QuillTable.js

@@ -2,57 +2,87 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useState } from 'react';
 import { compareValues } from '../utils/valueFormatter';
 import { ThemeContext } from '../Context';
-import ChartSkeleton from './Chart/ChartSkeleton';
-export default function QuillTable({ rows, columns, isLoading, hideCSVDownloadButton = true, downloadFileName, containerStyle, className, LoadingComponent = () => _jsx(ChartSkeleton, {}), rowsPerPage = 10, emptyStateLabel = 'No results', downloadCSV, }) {
+import { QuillLoadingComponent } from './UiComponents';
+export default function QuillTable({ rows, numberOfRows, columns, isLoading, currentPage, sort, hideCSVDownloadButton = true, containerStyle, className, LoadingComponent = QuillLoadingComponent, rowsPerPage = 10, emptyStateLabel = 'No results', downloadCSV, onPageChange, onSortChange, }) {
     const [activeRows, setActiveRows] = useState([]);
-    const [page, setPage] = useState(1);
+    const [pageIndex, setPageIndex] = useState(currentPage || 0);
     const [maxPage, setMaxPage] = useState(1);
-    const [sortColumn, setSortColumn] = useState('');
-    const [sortDirection, setSortDirection] = useState('desc');
+    const [sortColumn, setSortColumn] = useState(sort?.field || '');
+    const [sortDirection, setSortDirection] = useState(sort?.direction || 'desc');
     const [theme] = useContext(ThemeContext);
     const [isPaginating, setIsPaginating] = useState(true);
+    const [initialLoad, setInitialLoad] = useState(isLoading);
+    const [currentLoad, setCurrentLoad] = useState(isLoading);
+    useEffect(() => {
+        setSortColumn(sort?.field || '');
+        setSortDirection(sort?.direction || 'desc');
+    }, [sort]);
     useEffect(() => {
         setIsPaginating(true);
+        const curInterval = pageIndex
+            ? Math.floor(pageIndex / (100 / rowsPerPage)) * (100 / rowsPerPage)
+            : 0;
         if (rows?.length === 0 && isLoading) {
             return;
         }
-        const sortedRows = [...rows];
-        if (sortColumn) {
-            sortedRows.sort((a, b) => {
-                const result = compareValues(a, b, sortColumn);
-                return sortDirection === 'asc' ? result : -result;
-            });
+        const start = (pageIndex - curInterval) * rowsPerPage;
+        const end = (pageIndex - curInterval + 1) * rowsPerPage;
+        if (numberOfRows) {
+            setMaxPage(Math.ceil(numberOfRows / rowsPerPage));
+            setActiveRows(rows.slice(start, end));
         }
-        const start = (page - 1) * rowsPerPage;
-        const end = page * rowsPerPage;
-        if (sortedRows && sortedRows.length) {
+        else {
+            const sortedRows = [...rows];
+            if (sortColumn) {
+                sortedRows.sort((a, b) => {
+                    const result = compareValues(a, b, sortColumn);
+                    return sortDirection === 'asc' ? result : -result;
+                });
+            }
             setMaxPage(Math.ceil(sortedRows.length / rowsPerPage));
+            setActiveRows(sortedRows.slice(start, end));
         }
-        setActiveRows(sortedRows.slice(start, end));
         setIsPaginating(false);
-    }, [page, rows, sortColumn, sortDirection, isLoading, columns]);
+        setInitialLoad(false);
+    }, [pageIndex, rows, sortColumn, sortDirection, columns, numberOfRows]);
     const increasePage = () => {
-        if (page === maxPage) {
+        if (pageIndex + 1 === maxPage) {
             return;
         }
-        setPage((page) => page + 1);
+        setPageIndex((pageIndex) => pageIndex + 1);
+        onPageChange && onPageChange({ currentPage: pageIndex + 1, rowsPerPage });
     };
     const decreasePage = () => {
-        if (page === 1) {
+        if (pageIndex === 0) {
             return;
         }
-        setPage((page) => page - 1);
+        setPageIndex((pageIndex) => pageIndex - 1);
+        onPageChange && onPageChange({ currentPage: pageIndex - 1, rowsPerPage });
     };
     const toggleSort = (column) => {
         if (sortColumn === column.field) {
             setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+            setPageIndex(0);
+            if (onSortChange) {
+                onSortChange({
+                    field: column.field,
+                    direction: sortDirection === 'asc' ? 'desc' : 'asc',
+                });
+            }
         }
         else {
             setSortColumn(column.field);
             setSortDirection('desc');
+            setPageIndex(0);
+            if (onSortChange) {
+                onSortChange({
+                    field: column.field,
+                    direction: 'desc',
+                });
+            }
         }
     };
-    if (isLoading || isPaginating) {
+    if (initialLoad) {
         return (_jsx("div", { style: {
                 height: '100%',
                 ...containerStyle,
@@ -87,7 +117,9 @@ export default function QuillTable({ rows, columns, isLoading, hideCSVDownloadBu
                                         minWidth: '100px',
                                         boxSizing: 'border-box',
                                     }, children: columns &&
-                                        columns.map((column, index) => (_jsxs("div", { onClick: () => toggleSort(column), style: {
+                                        columns.map((column, index) => (_jsxs("div", { onClick: () => {
+                                                toggleSort(column);
+                                            }, style: {
                                                 boxSizing: 'border-box',
                                                 flex: '150 0 auto',
                                                 minWidth: '50px',
@@ -129,10 +161,10 @@ export default function QuillTable({ rows, columns, isLoading, hideCSVDownloadBu
                                                         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 && activeRows.length === 0) ||
+                                                    }, 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))) }) }), (isPaginating || isLoading) && (_jsx("div", { className: className, children: _jsx(LoadingComponent, {}) })), (activeRows && activeRows.length === 0) ||
                                 (columns && columns.length === 0) ? (_jsx("div", { style: {
                                     padding: '30px 0',
-                                    display: 'flex',
+                                    display: isPaginating || isLoading ? 'none' : 'flex',
                                     flex: '1 0 auto',
                                     margin: 'auto',
                                     justifyContent: 'center',
@@ -141,7 +173,7 @@ export default function QuillTable({ rows, columns, isLoading, hideCSVDownloadBu
                                     color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
                                 }, children: emptyStateLabel })) : (_jsx("div", { role: "rowgroup", className: "tbody", children: activeRows &&
                                     activeRows.map((row, rowIndex) => (_jsx("div", { role: "row", className: "tr", style: {
-                                            display: 'flex',
+                                            display: isPaginating || isLoading ? 'none' : 'flex',
                                             flex: '1 0 auto',
                                             minWidth: '100px',
                                             boxSizing: 'border-box',
@@ -219,7 +251,7 @@ export default function QuillTable({ rows, columns, isLoading, hideCSVDownloadBu
                                                 fontSize: 12,
                                                 fontFamily: theme?.fontFamily,
                                                 color: theme?.primaryTextColor,
-                                            }, children: [page, ' of ', maxPage] }), _jsx("div", { style: { width: 8 } }), _jsx("button", { onClick: decreasePage, style: {
+                                            }, children: [pageIndex + 1, ' of ', maxPage] }), _jsx("div", { style: { width: 8 } }), _jsx("button", { onClick: decreasePage, style: {
                                                 cursor: 'pointer',
                                                 border: 'none',
                                                 background: 'transparent',

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

@@ -149,8 +149,18 @@ export interface TableComponentProps {
         label: string;
     }[];
     isLoading?: boolean;
+    onPageChange?: (page: {
+        currentPage: number;
+        rowsPerPage: number;
+    }) => void;
+    onSortChange?: (sort: {
+        field: string;
+        direction: string;
+    }) => void;
+    numberOfRows?: number;
 }
-export declare const QuillTableComponent: ({ rows, columns, isLoading, }: TableComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const QuillTableSQLEditorComponent: ({ rows, columns, isLoading, numberOfRows, onPageChange, onSortChange, }: TableComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const QuillTableComponent: ({ rows, columns, isLoading, numberOfRows, onPageChange, onSortChange, }: TableComponentProps) => import("react/jsx-runtime").JSX.Element;
 export declare const QuillEmptyDashboardComponent: () => import("react/jsx-runtime").JSX.Element;
 export declare const QuillChartBuilderInputRowContainer: ({ children, }: {
     children: ReactNode;