@quillsql/react 2.12.4 → 2.12.5

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

@@ -15,71 +15,101 @@ function DataLoader({ id, children, }) {
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
     const [customFields] = (0, react_1.useContext)(Context_1.CustomFieldContext);
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [isPaginationLoading, setIsPaginationLoading] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)(undefined);
-    (0, react_1.useEffect)(() => {
-        async function getChartOptions() {
-            setIsLoading(true);
-            if (!(0, Chart_1.didFiltersChange)(dashboard[id], dashboardFilters)) {
-                setIsLoading(false);
-                return;
+    const [previousPage, setPreviousPage] = (0, react_1.useState)(0);
+    const [additionalProcessing, setAdditionProcessing] = (0, react_1.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 (!(0, Chart_1.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 (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
-                (0, errorProcessing_1.processFilterErrorList)(resp);
-                if (resp && resp.name !== 'error' && !resp.errorMessage) {
-                    if (resp.compareRows) {
-                        (0, merge_1.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 (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
+            (0, errorProcessing_1.processFilterErrorList)(resp);
+            if (resp && resp.name !== 'error' && !resp.errorMessage) {
+                if (resp.compareRows) {
+                    (0, merge_1.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);
         }
+    };
+    (0, react_1.useEffect)(() => {
         getChartOptions();
     }, [dashboardFilters, client, id]);
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({ isLoading, error }) });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({ isLoading, error, onPageChange, onSortChange }) });
 }
 exports.default = DataLoader;
 // The same data-loader pattern as above, but with special logic for charts
@@ -94,69 +124,69 @@ const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, }) => {
     const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
     const [customFields] = (0, react_1.useContext)(Context_1.CustomFieldContext);
     const theme = (0, hooks_1.useTheme)();
-    (0, react_1.useEffect)(() => {
-        async function getChartOptions() {
-            setLoading(true);
-            if (!(0, Chart_1.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 (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
-                (0, errorProcessing_1.processFilterErrorList)(resp);
-                if (resp && resp.name !== 'error' && !resp.errorMessage) {
-                    setIsComparison(!!resp.compareRows?.length);
-                    if (resp.compareRows) {
-                        (0, merge_1.mergeComparisonRange)(resp);
+    const getChartOptions = async () => {
+        setLoading(true);
+        if (!(0, Chart_1.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 (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
+            (0, errorProcessing_1.processFilterErrorList)(resp);
+            if (resp && resp.name !== 'error' && !resp.errorMessage) {
+                setIsComparison(!!resp.compareRows?.length);
+                if (resp.compareRows) {
+                    (0, merge_1.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);
         }
+    };
+    (0, react_1.useEffect)(() => {
         setInitialLoad(false);
         getChartOptions();
     }, [dashboardFilters, client, id]);

package/dist/cjs/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/cjs/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/cjs/components/Dashboard/TableComponent.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const csv_1 = require("../../utils/csv");
 const QuillTable_1 = __importDefault(require("../QuillTable"));
 const PivotModal_1 = require("../../internals/ReportBuilder/PivotModal");
 const Context_1 = require("../../Context");
@@ -13,9 +12,17 @@ const valueFormatter_1 = require("../../utils/valueFormatter");
 const ChartSkeleton_1 = __importDefault(require("../Chart/ChartSkeleton"));
 const ChartError_1 = __importDefault(require("../Chart/ChartError"));
 const hooks_1 = require("../../hooks");
-function QuillTableComponent({ report, onClick, isLoading, error, }) {
+const useExport_1 = require("../../hooks/useExport");
+function QuillTableComponent({ report, onClick, isLoading, error, onPageChange, onSortChange, }) {
     const theme = (0, hooks_1.useTheme)();
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
+    const { downloadCSV } = (0, useExport_1.useExport)(report?.id);
+    (0, react_1.useEffect)(() => {
+        if (!isLoading) {
+            setInitialLoad(false);
+        }
+    }, [isLoading]);
     const config = report;
     const data = report;
     const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
@@ -66,6 +73,17 @@ 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 ((0, jsx_runtime_1.jsxs)("div", { style: { cursor: 'pointer' }, onClick: () => onClick && onClick(report), children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
@@ -95,21 +113,21 @@ function QuillTableComponent({ report, onClick, isLoading, error, }) {
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'flex-end',
-                        }, children: 'view report →' })) : null] }), isLoading ? ((0, jsx_runtime_1.jsx)(ChartSkeleton_1.default, { containerStyle: {
+                        }, children: 'view report →' })) : null] }), initialLoad ? ((0, jsx_runtime_1.jsx)(ChartSkeleton_1.default, { containerStyle: {
                     width: '100%',
                     height: '400px',
                 } })) : error ? ((0, jsx_runtime_1.jsx)(ChartError_1.default, { containerStyle: {
                     width: '100%',
                     height: '400px',
-                } })) : ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { rows: formattedRows ?? [], columns: columns ?? data.yAxisFields, rowsPerPage: 10, containerStyle: {
+                } })) : ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { isLoading: isLoading, rows: formattedRows ?? [], numberOfRows: numberOfRows, columns: columns ?? data.yAxisFields, rowsPerPage: 10, containerStyle: {
                     width: '100%',
                     height: '400px',
-                }, hideCSVDownloadButton: true, downloadCSV: () => {
-                    (0, csv_1.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));
 }
 exports.default = QuillTableComponent;

package/dist/cjs/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/cjs/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/cjs/components/QuillTable.js

@@ -1,63 +1,90 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const valueFormatter_1 = require("../utils/valueFormatter");
 const Context_1 = require("../Context");
-const ChartSkeleton_1 = __importDefault(require("./Chart/ChartSkeleton"));
-function QuillTable({ rows, columns, isLoading, hideCSVDownloadButton = true, downloadFileName, containerStyle, className, LoadingComponent = () => (0, jsx_runtime_1.jsx)(ChartSkeleton_1.default, {}), rowsPerPage = 10, emptyStateLabel = 'No results', downloadCSV, }) {
+const UiComponents_1 = require("./UiComponents");
+function QuillTable({ rows, numberOfRows, columns, isLoading, currentPage, sort, hideCSVDownloadButton = true, containerStyle, className, LoadingComponent = UiComponents_1.QuillLoadingComponent, rowsPerPage = 10, emptyStateLabel = 'No results', downloadCSV, onPageChange, onSortChange, }) {
     const [activeRows, setActiveRows] = (0, react_1.useState)([]);
-    const [page, setPage] = (0, react_1.useState)(1);
+    const [pageIndex, setPageIndex] = (0, react_1.useState)(currentPage || 0);
     const [maxPage, setMaxPage] = (0, react_1.useState)(1);
-    const [sortColumn, setSortColumn] = (0, react_1.useState)('');
-    const [sortDirection, setSortDirection] = (0, react_1.useState)('desc');
+    const [sortColumn, setSortColumn] = (0, react_1.useState)(sort?.field || '');
+    const [sortDirection, setSortDirection] = (0, react_1.useState)(sort?.direction || 'desc');
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [isPaginating, setIsPaginating] = (0, react_1.useState)(true);
+    const [initialLoad, setInitialLoad] = (0, react_1.useState)(isLoading);
+    const [currentLoad, setCurrentLoad] = (0, react_1.useState)(isLoading);
+    (0, react_1.useEffect)(() => {
+        setSortColumn(sort?.field || '');
+        setSortDirection(sort?.direction || 'desc');
+    }, [sort]);
     (0, react_1.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 = (0, valueFormatter_1.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 = (0, valueFormatter_1.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 ((0, jsx_runtime_1.jsx)("div", { style: {
                 height: '100%',
                 ...containerStyle,
@@ -92,7 +119,9 @@ function QuillTable({ rows, columns, isLoading, hideCSVDownloadButton = true, do
                                         minWidth: '100px',
                                         boxSizing: 'border-box',
                                     }, children: columns &&
-                                        columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => toggleSort(column), style: {
+                                        columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => {
+                                                toggleSort(column);
+                                            }, style: {
                                                 boxSizing: 'border-box',
                                                 flex: '150 0 auto',
                                                 minWidth: '50px',
@@ -134,10 +163,10 @@ function QuillTable({ rows, columns, isLoading, hideCSVDownloadButton = true, do
                                                         transform: sortDirection === 'desc'
                                                             ? 'rotate(180deg)'
                                                             : undefined,
-                                                    }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z", clipRule: "evenodd" }) }))] }, 'sqlcol' + index))) }) }), (activeRows && activeRows.length === 0) ||
+                                                    }, 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))) }) }), (isPaginating || isLoading) && ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(LoadingComponent, {}) })), (activeRows && activeRows.length === 0) ||
                                 (columns && columns.length === 0) ? ((0, jsx_runtime_1.jsx)("div", { style: {
                                     padding: '30px 0',
-                                    display: 'flex',
+                                    display: isPaginating || isLoading ? 'none' : 'flex',
                                     flex: '1 0 auto',
                                     margin: 'auto',
                                     justifyContent: 'center',
@@ -146,7 +175,7 @@ function QuillTable({ rows, columns, isLoading, hideCSVDownloadButton = true, do
                                     color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
                                 }, children: emptyStateLabel })) : ((0, jsx_runtime_1.jsx)("div", { role: "rowgroup", className: "tbody", children: activeRows &&
                                     activeRows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
-                                            display: 'flex',
+                                            display: isPaginating || isLoading ? 'none' : 'flex',
                                             flex: '1 0 auto',
                                             minWidth: '100px',
                                             boxSizing: 'border-box',
@@ -224,7 +253,7 @@ function QuillTable({ rows, columns, isLoading, hideCSVDownloadButton = true, do
                                                 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: {
+                                            }, children: [pageIndex + 1, ' 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',

package/dist/cjs/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;

package/dist/cjs/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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"}