@quillsql/react 2.10.27 → 2.10.29

package/dist/cjs/utils/valueFormatter.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.quillFormat = exports.valueFormatter = exports.DATE_FORMAT_TYPES = void 0;
+exports.compareValues = exports.quillFormat = exports.valueFormatter = exports.DATE_FORMAT_TYPES = void 0;
 const date_fns_1 = require("date-fns");
 const date_fns_tz_1 = require("date-fns-tz");
 exports.DATE_FORMAT_TYPES = [
@@ -54,6 +54,8 @@ const valueFormatter = ({ value, field, fields }) => {
 };
 exports.valueFormatter = valueFormatter;
 const quillFormat = ({ value, format, }) => {
+    if (value === undefined || value === null)
+        return '';
     const HANDLERS = {
         percent: formatPercent,
         dollar_amount: formatDollarAmount,
@@ -72,7 +74,7 @@ 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 (exports.DATE_FORMAT_TYPES.includes(formatType) &&
             typeof value === 'object' &&
@@ -101,38 +103,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.
@@ -151,12 +153,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.
@@ -171,13 +173,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".
@@ -221,3 +223,30 @@ const format_wo_yyyy = (value) => {
         return 'Invalid date';
     return `${(0, date_fns_1.getWeek)(utcDate)},${utcDate.getFullYear()}`;
 };
+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);
+};
+exports.compareValues = compareValues;

package/dist/esm/Chart.js

@@ -5,7 +5,7 @@ import { differenceInHours } from 'date-fns';
 import BarList from './BarList';
 import PieChart from './PieChart';
 import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, } from './Context';
-import { SpecialTable } from './Table';
+import QuillTable from './components/QuillTable';
 import { getData } from './utils/dataFetcher';
 import { generatePivotTable, generatePivotTableYAxis, } from './internals/ReportBuilder/PivotModal';
 import { valueFormatter } from './utils/valueFormatter';
@@ -228,9 +228,10 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
                 col.format = matchingCol.format;
             }
         });
-        return (_jsx(SpecialTable, { rows: pivotTable?.rows ?? data.rows ?? [], columns: pivotTable?.columns ?? data.columns ?? data.yAxisFields, height: '400px', containerStyle: {
-                ...containerStyle,
-            }, theme: theme, csvFilename: data.name }));
+        return (_jsx(QuillTable, { rows: pivotTable?.rows ?? data.rows ?? [], columns: pivotTable?.columns ?? data.columns ?? data.yAxisFields, containerStyle: {
+                height: '400px',
+                width: containerStyle?.width || '100%',
+            }, downloadFileName: data.name, showDownloadCSVButton: true }));
     }
     if (chartTypes.includes('bar')) {
         return (_jsx(BarList, { data: pivotTable

package/dist/esm/Dashboard.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SkeletonComponentProps } from './components/Chart/ChartSkeleton';
 interface QuillOption {
     value: string;
     label: string;
@@ -157,6 +158,7 @@ export interface DashboardProps {
     hideXAxis?: boolean;
     hideYAxis?: boolean;
     hideCartesianGrid?: boolean;
+    SkeletonComponent?: (_: SkeletonComponentProps) => JSX.Element;
 }
 type SelectComponentType = ({ label, onChange, value, options, }: SelectComponentProps) => JSX.Element;
 type DateRangePickerComponentType = ({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, }: DateRangePickerComponentProps) => JSX.Element;
@@ -171,6 +173,6 @@ export declare function DashboardFilter({ filter, onChangeFilter, SelectComponen
 /**
  * Quill Dashboard.
  */
-export default function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled, SelectComponent, EmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, MetricComponent, ChartComponent, TableComponent, DashboardSectionContainerComponent, DashboardSectionComponent, hideXAxis, hideYAxis, hideCartesianGrid, }: DashboardProps): import("react/jsx-runtime").JSX.Element | null;
+export default function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled, SelectComponent, EmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, MetricComponent, ChartComponent, TableComponent, SkeletonComponent, DashboardSectionContainerComponent, DashboardSectionComponent, hideXAxis, hideYAxis, hideCartesianGrid, }: DashboardProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=Dashboard.d.ts.map

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

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

package/dist/esm/Dashboard.js

@@ -16,6 +16,7 @@ import { cleanDashboardItem } from './utils/dashboard';
 import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
 import DataLoader from './components/Dashboard/DataLoader';
 import { QuillSelectComponent } from './components/QuillSelect';
+import ChartSkeleton from './components/Chart/ChartSkeleton';
 export function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePickerComponent, theme, }) {
     const { comparisonRange, setComparisonRange } = useComparisonRange();
     const { setDateFilter } = useDateFilter();
@@ -154,7 +155,7 @@ const defaultChartContainerStyles = {
 /**
  * Quill Dashboard.
  */
-export default function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartContainerStyles, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled = false, SelectComponent, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, MetricComponent = QuillMetricComponent, ChartComponent = QuillChartComponent, TableComponent = QuillTableComponent, DashboardSectionContainerComponent = DashboardSectionContainer, DashboardSectionComponent = DashboardSection, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
+export default function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartContainerStyles, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled = false, SelectComponent, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, MetricComponent = QuillMetricComponent, ChartComponent = QuillChartComponent, TableComponent = QuillTableComponent, SkeletonComponent = ChartSkeleton, DashboardSectionContainerComponent = DashboardSectionContainer, DashboardSectionComponent = DashboardSection, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
     const { dateFilter } = useDateFilter();
     const { dispatch } = useContext(DashboardContext);
     const { isLoading: isDataLoading, data, reload, } = useDashboard(name);
@@ -484,14 +485,6 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
                                 gap: 20,
                                 display: 'flex',
                                 flexDirection: 'column',
-                            }, children: tables(section).map((item, index) => (_jsx(DataLoader, { id: item._id, children: dashboard[item._id] && (_jsx(TableComponent, { theme: theme, dashboardItem: dashboard[item._id], onClickDashboardItem: onClickDashboardItem
-                                        ? () => handleOnClickDashboardItem(item)
-                                        : void null, children: _jsx(Chart, { containerStyle: {
-                                            display: 'flex',
-                                            width: '100%',
-                                            height: '400px',
-                                        }, chartId: item._id, colors: theme.chartColors?.length
-                                            ? theme.chartColors
-                                            : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }) })) }, `${item.name}${index}`))) }))] }, section + '' + sectionIndex));
+                            }, children: tables(section).map((item, index) => (_jsx(DataLoader, { id: item._id, name: item.name, TableComponent: TableComponent, SkeletonComponent: SkeletonComponent, handleOnClickDashboardItem: handleOnClickDashboardItem, onClickDashboardItem: onClickDashboardItem, theme: theme }, `${item.name}${index}`))) }))] }, section + '' + sectionIndex));
             })] }));
 }

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

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

package/dist/esm/ReportBuilder.js

@@ -8,7 +8,6 @@ import { format } from 'date-fns';
 import { PivotModal, generatePivotTable, } from './internals/ReportBuilder/PivotModal';
 import { getData, getDataFromCloud } from './utils/dataFetcher';
 import { getRangeFromPreset, reportBuilderOptions, } from './DateRangePicker/dateRangePickerUtils';
-import Table from './Table';
 import ChartBuilder from './ChartBuilder';
 import { MemoizedModal, MemoizedTextInput, MemoizedSelect, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, } from './components/UiComponents';
 export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeLoading, onChangePivot, onDateFilterChange, onChangeFields, onError, TextInput = MemoizedTextInput, containerStyle, Select = MemoizedSelect, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, Header = MemoizedHeader, Label = MemoizedLabel, DeleteButton = MemoizedDeleteButton, Text = MemoizedText, Modal = MemoizedModal, Popover = MemoizedPopover, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, tagStyle, tableName, dateColumn, selectedTagBorderColor, chartBuilderEnabled = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, editSQLEnabled, navigateToSQLEditor, }) {
@@ -795,10 +794,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
                                 if (navigateToSQLEditor) {
                                     navigateToSQLEditor(sqlQuery);
                                 }
-                            }, label: "Edit Query" })), _jsx(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, setDateRange: setFilterDateRange, dateRange: filterDateRange, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, parentRef: parentRef, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextInputComponent: TextInputComponent, LabelComponent: LabelComponent, tagStyle: tagStyle, theme: theme, setIsOpen: setIsAddFilterModalOpen, isOpen: isAddFilterModalOpen, selectedTagBorderColor: selectedTagBorderColor }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, TextComponent: TextComponent, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, theme: theme, data: data, parentRef: parentRef, columns: columns, setIsOpen: setIsPivotModalOpen, isOpen: isPivotModalOpen, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: removePivot, selectPivot: selectPivot, dateRange: dateRange, rightAlign: true })] }) }), _jsx(Table, { rows: selectedPivotTable?.rows || data, columns: selectedPivotTable?.columns || columns, containerStyle: {
-                    height: 400,
-                    marginTop: 10,
-                } }), chartBuilderEnabled && columns.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
+                            }, label: "Edit Query" })), _jsx(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, setDateRange: setFilterDateRange, dateRange: filterDateRange, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, parentRef: parentRef, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextInputComponent: TextInputComponent, LabelComponent: LabelComponent, tagStyle: tagStyle, theme: theme, setIsOpen: setIsAddFilterModalOpen, isOpen: isAddFilterModalOpen, selectedTagBorderColor: selectedTagBorderColor }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, TextComponent: TextComponent, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, theme: theme, data: data, parentRef: parentRef, columns: columns, setIsOpen: setIsPivotModalOpen, isOpen: isPivotModalOpen, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: removePivot, selectPivot: selectPivot, dateRange: dateRange, rightAlign: true })] }) }), chartBuilderEnabled && columns.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',

package/dist/esm/SQLEditor.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TableComponentProps } from './components/UiComponents';
 export declare function convertPostgresColumn(column: any): {
     label: any;
     field: any;
@@ -35,11 +36,6 @@ interface SQLEditorProps {
     onAddToDashboardComplete?: () => void;
     organizationName?: string;
 }
-interface TableComponentProps {
-    rows: any[];
-    columns: any[];
-    height: string;
-}
 interface TextInputComponentProps {
     onChange: (e: any) => void;
     value: string;

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

@@ -1 +1 @@
-{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAQD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+ED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EAClB,cAAc,EACd,eAAuB,EACvB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,GAC7B,EAAE,cAAc,2CAgVhB;AA8LD,eAAO,MAAM,mBAAmB;;;;;;6CAqG/B,CAAC"}
+{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAQxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAGhE,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAQD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+ED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EAClB,cAA2B,EAC3B,eAAuB,EACvB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,GAC7B,EAAE,cAAc,2CAqUhB;AA8LD,eAAO,MAAM,mBAAmB;;;;;;6CAqG/B,CAAC"}

package/dist/esm/SQLEditor.js

@@ -5,7 +5,7 @@ import { useState, useContext, useEffect } from 'react';
 import MonacoEditor from '@monaco-editor/react';
 // import './nightOwlLight.css';
 import { ClientContext, SchemaContext, ThemeContext } from './Context';
-import { SpecialTable } from './Table';
+import QuillTable from './components/QuillTable';
 import { getData, getDataFromCloud } from './utils/dataFetcher';
 import ChartBuilder from './ChartBuilder';
 export function convertPostgresColumn(column) {
@@ -141,7 +141,7 @@ const QuillTextInput = ({ onChange, value, id, placeholder, theme, }) => {
             borderRadius: '6px',
         }, id: id, onChange: onChange, value: value, placeholder: placeholder }));
 };
-export default function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, newQueryEnabled = false, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode = false, chartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, }) {
+export default function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent = QuillTable, newQueryEnabled = false, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode = false, chartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, }) {
     const [sqlPrompt, setSqlPrompt] = useState('');
     const [isOpen, setIsOpen] = useState(false);
     const [client] = useContext(ClientContext);
@@ -156,6 +156,7 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
     const [sqlQueryLoading, setSqlQueryLoading] = useState(false);
     const [schemaLoading, setSchemaLoading] = useState(false);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
+    const [displayTable, setDisplayTable] = useState(false);
     const getSchema = async (isSubscribed) => {
         setSchemaLoading(true);
         const { queryEndpoint, queryHeaders, publicKey } = client;
@@ -201,6 +202,7 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
     };
     const handleRunQuery = async () => {
         try {
+            setDisplayTable(true);
             setSqlQueryLoading(true);
             setErrorMessage('');
             const hostedBody = {
@@ -245,9 +247,6 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
             return;
         }
     };
-    const handleAddToDashboard = () => {
-        setIsOpen(true);
-    };
     /* all your useState and useContext calls and your useEffect hooks */
     useEffect(() => {
         if (onChangeQuery) {
@@ -302,11 +301,7 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
                                                         borderRadius: 6,
                                                         color: theme?.primaryTextColor,
                                                         fontFamily: theme?.fontFamily,
-                                                    }, children: errorMessage }) })), errorMessage
-                                                ? null
-                                                : (TableComponent && (_jsx(TableComponent, { rows: rows, columns: columns, height: "calc(100%)" }))) || (_jsx(SpecialTable, { rows: rows ?? [], columns: columns, height: "calc(100%)", LoadingComponent: LoadingComponent, loading: sqlQueryLoading, 
-                                                    // loading={true}
-                                                    theme: theme }))] }), chartBuilderEnabled && rows.length > 0 && (_jsx("div", { style: {
+                                                    }, children: errorMessage }) })), errorMessage || !displayTable ? null : (_jsx(TableComponent, { rows: rows, columns: columns, containerStyle: { height: 'calc(100%)' }, LoadingComponent: LoadingComponent, loading: sqlQueryLoading, showDownloadCSVButton: true }))] }), chartBuilderEnabled && rows.length > 0 && (_jsx("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',

package/dist/esm/components/Chart/ChartSkeleton.d.ts

@@ -1,3 +1,6 @@
-/// <reference types="react" />
+import { CSSProperties } from 'react';
+export interface SkeletonComponentProps {
+    conatinerStyle?: CSSProperties;
+}
 export default function ChartSkeleton({ containerStyle }: any): JSX.Element;
 //# sourceMappingURL=ChartSkeleton.d.ts.map

package/dist/esm/components/Chart/ChartSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartSkeleton.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,cAAc,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAyE1E"}
+{"version":3,"file":"ChartSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,aAAa,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,WAAW,sBAAsB;IACrC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,cAAc,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAyE1E"}

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export default function DataLoader({ id, children }: any): JSX.Element;
+export default function DataLoader({ id, SkeletonComponent, handleOnClickDashboardItem, onClickDashboardItem, TableComponent, name, theme, }: any): JSX.Element;
 //# sourceMappingURL=DataLoader.d.ts.map

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":";AAWA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAuErE"}
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAWA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,iBAAiB,EACjB,0BAA0B,EAC1B,oBAAoB,EACpB,cAAc,EACd,IAAI,EACJ,KAAK,GACN,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAsFnB"}

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

@@ -1,13 +1,14 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from 'react';
 import { didFiltersChange } from '../../Chart';
 import { ClientContext, DashboardContext, DashboardFiltersContext, } from '../../Context';
 import { getData } from '../../utils/dataFetcher';
 import { mergeComparisonRange } from '../../utils/merge';
-export default function DataLoader({ id, children }) {
+export default function DataLoader({ id, SkeletonComponent, handleOnClickDashboardItem, onClickDashboardItem, TableComponent, name, theme, }) {
     const [client, _] = useContext(ClientContext);
     const { dispatch, dashboard } = useContext(DashboardContext);
     const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const [loading, setLoading] = useState(true);
     useEffect(() => {
         async function getChartOptions() {
             if (!didFiltersChange(dashboard[id], dashboardFilters)) {
@@ -40,6 +41,7 @@ export default function DataLoader({ id, children }) {
                     id: id,
                     filters: minimalFilters,
                 };
+                setLoading(true);
                 const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
                 if (resp && resp.name !== 'error') {
                     if (resp.compareRows) {
@@ -54,6 +56,7 @@ export default function DataLoader({ id, children }) {
                             id: resp._id,
                         },
                     });
+                    setLoading(false);
                 }
             }
             catch (e) {
@@ -62,5 +65,7 @@ export default function DataLoader({ id, children }) {
         }
         getChartOptions();
     }, [dashboardFilters, client, id]);
-    return _jsx(_Fragment, { children: children });
+    return (_jsx(TableComponent, { theme: theme, loading: loading, dashboardItem: dashboard[id], name: name, SkeletonComponent: SkeletonComponent, onClickDashboardItem: onClickDashboardItem
+            ? () => handleOnClickDashboardItem(dashboard[id])
+            : void null }));
 }

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export default function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, children, }: any): JSX.Element;
+export default function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, loading, name, SkeletonComponent, }: any): 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":";AAAA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAqGnB"}
+{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,iBAAiB,GAClB,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAgDnB"}

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

@@ -1,61 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, children, }) {
-    return (_jsx("div", { onClick: onClickDashboardItem
+import QuillTable from '../QuillTable';
+export default function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, loading, name, SkeletonComponent, }) {
+    return (_jsxs("div", { onClick: onClickDashboardItem
             ? () => onClickDashboardItem(dashboardItem)
-            : () => { }, style: {
-            // height: '100%',
-            cursor: 'pointer',
-            boxSizing: 'content-box',
-            paddingRight: 25,
-            minHeight: 400,
-            borderRadius: 8,
-            paddingTop: 20,
-            ...style,
-        }, children: _jsx("div", { style: {
-                width: '100%',
-                height: '100%',
-                boxSizing: 'content-box',
-            }, children: _jsx("div", { style: {
-                    width: '100%',
-                    height: '100%',
+            : () => { }, children: [_jsx("div", { style: {
+                    fontFamily: theme.fontFamily,
+                    color: theme.primaryTextColor,
                     boxSizing: 'content-box',
-                }, children: _jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        justifyContent: 'space-between',
-                        height: '100%',
-                        boxSizing: 'content-box',
-                    }, children: [_jsxs("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                justifyContent: 'space-between',
-                                boxSizing: 'content-box',
-                                paddingBottom: 20,
-                            }, children: [_jsx("div", { style: {
-                                        fontFamily: theme.fontFamily,
-                                        color: theme.primaryTextColor,
-                                        boxSizing: 'content-box',
-                                        fontSize: 18,
-                                        fontWeight: '500',
-                                        textOverflow: 'ellipsis',
-                                        padding: 0,
-                                        whiteSpace: 'nowrap',
-                                        display: 'block',
-                                        maxWidth: '100%',
-                                        overflow: 'hidden',
-                                    }, children: dashboardItem?.name }), onClickDashboardItem ? (_jsx("div", { style: {
-                                        fontFamily: theme.fontFamily,
-                                        color: theme.primaryTextColor,
-                                        boxSizing: 'content-box',
-                                        fontWeight: '500',
-                                        fontSize: 14,
-                                        minWidth: 14 * 7,
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'flex-end',
-                                    }, children: 'view report →' })) : null] }), _jsx("div", { style: {
-                                padding: 0,
-                                height: '100%',
-                                boxSizing: 'content-box',
-                            }, children: children })] }) }) }) }, dashboardItem?.name));
+                    fontSize: 18,
+                    fontWeight: '500',
+                    textOverflow: 'ellipsis',
+                    padding: 0,
+                    whiteSpace: 'nowrap',
+                    display: 'block',
+                    maxWidth: '100%',
+                    overflow: 'hidden',
+                    paddingBottom: 20,
+                }, children: name }), loading ? (_jsx(SkeletonComponent, { containerStyle: { height: 390 } })) : dashboardItem ? (_jsx(QuillTable, { containerStyle: {
+                    // height: '100%',
+                    cursor: 'pointer',
+                    boxSizing: 'content-box',
+                    paddingRight: 25,
+                    minHeight: 400,
+                    height: 400,
+                    borderRadius: 8,
+                    ...style,
+                }, rows: dashboardItem?.rows, columns: dashboardItem?.columns })) : null] }, dashboardItem?.name));
 }

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

@@ -0,0 +1,3 @@
+import { TableComponentProps } from './UiComponents';
+export default function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFileName, containerStyle, LoadingComponent, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QuillTable.d.ts.map

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

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