@quillsql/react 2.11.19 → 2.11.21

package/dist/cjs/Chart.d.ts

@@ -94,6 +94,12 @@ export interface ChartProps {
      * ```
      */
     mapColorsToFields?: (dashboardItem: DashboardItem, theme: QuillTheme) => ColorMapType;
+    /**
+     * Styles the top-level container of the Chart.
+     *
+     * This can be useful for TailwindCSS-style classname strings.
+     */
+    className?: string;
     /**
      * Styles the top-level container of the Chart.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AA+FjD,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,WAQhE;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,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;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,GAAG,CAAC;IAE7B;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,iBAAiB,CAAC,EAAE,CAClB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,UAAU,KACd,YAAY,CAAC;IAElB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAqC/B,CAAC;AA+hBF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAgGjD,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,WAQhE;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,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;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,GAAG,CAAC;IAE7B;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,iBAAiB,CAAC,EAAE,CAClB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,UAAU,KACd,YAAY,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAsC/B,CAAC;AAyiBF,eAAe,KAAK,CAAC"}

package/dist/cjs/Chart.js

@@ -119,9 +119,9 @@ const Chart = (props) => {
                 ? theme.chartColors
                 : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
     }, [data.colors]);
-    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { chartId: data.chartId, containerStyle: data.containerStyle, colors: chartColors, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, hideDateRangeFilter: data.hideDateRangeFilter, comparisonLineStyle: data.comparisonLineStyle, mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields }));
+    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { chartId: data.chartId, className: data.className, containerStyle: data.containerStyle, colors: chartColors, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, hideDateRangeFilter: data.hideDateRangeFilter, comparisonLineStyle: data.comparisonLineStyle, mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields }));
 };
-const ChartUpdater = ({ colors, chartId, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, hideDateRangeFilter, mapColorsToFields, }) => {
+const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, hideDateRangeFilter, mapColorsToFields, }) => {
     const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
     const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
@@ -198,9 +198,9 @@ const ChartUpdater = ({ colors, chartId, containerStyle, isAnimationActive, hide
         setInitialLoad(false);
         getChartOptions();
     }, [dashboardFilters, client, chartId]);
-    return ((0, jsx_runtime_1.jsx)(ChartDisplay, { config: dashboard[chartId], colors: colors, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, error: error, colorMap: colorMap }));
+    return ((0, jsx_runtime_1.jsx)(ChartDisplay, { config: dashboard[chartId], colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, error: error, colorMap: colorMap }));
 };
-const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, isAnimationActive, loading = false, error = undefined, isComparison = false, colorMap, }) => {
+const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, isAnimationActive, loading = false, error = undefined, isComparison = false, colorMap, }) => {
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
     const theme = (0, useTheme_1.default)();
     const chartColors = (0, react_1.useMemo)(() => {
@@ -239,10 +239,10 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
             : null;
     }, [pivotTable, config?.yAxisFields]);
     if (error) {
-        return (0, jsx_runtime_1.jsx)(ChartError_1.default, { containerStyle: containerStyle });
+        return (0, jsx_runtime_1.jsx)(ChartError_1.default, { className: className, containerStyle: containerStyle });
     }
     else if (!config || loading) {
-        return (0, jsx_runtime_1.jsx)(ChartSkeleton_1.default, { containerStyle: containerStyle });
+        return (0, jsx_runtime_1.jsx)(ChartSkeleton_1.default, { className: className, containerStyle: containerStyle });
     }
     // TODO: Figure out if we can use ?? to coalesce these into the variable.
     const chartTypes = [config?.chartType];
@@ -250,7 +250,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
         const rows = pivotTable ? pivotTable.rows : config.rows;
         const yAxisFields = pivotTableYAxis ? pivotTableYAxis : config.yAxisFields;
         const xAxisField = config.xAxisField;
-        return ((0, jsx_runtime_1.jsx)(PieChart_1.default, { containerStyle: containerStyle, data: rows.map((row) => {
+        return ((0, jsx_runtime_1.jsx)(PieChart_1.default, { className: className, containerStyle: containerStyle, data: rows.map((row) => {
                 return {
                     ...row,
                     count: parseInt(row[yAxisFields[0].field]) /
@@ -292,7 +292,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
         return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { rows: formattedRows ?? [], columns: columns ?? data.yAxisFields, rowsPerPage: config?.rowsPerPage || 10, containerStyle: {
                 width: containerStyle?.width || '100%',
                 height: containerStyle?.height || '400px',
-            }, showDownloadCSVButton: true, downloadCSV: () => {
+            }, className: className, showDownloadCSVButton: true, downloadCSV: () => {
                 (0, csv_1.downloadCSV)({
                     rows: pivotTable?.rows ?? data.rows ?? [],
                     fields: columns ?? data.yAxisFields,
@@ -301,7 +301,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
             } }));
     }
     if (chartTypes.includes('bar')) {
-        return ((0, jsx_runtime_1.jsx)(BarList_1.default, { data: pivotTable ? pivotTable.rows : config.rows, theme: theme, yAxisFields: pivotTableYAxis ? pivotTableYAxis : config.yAxisFields, colors: chartColors, xAxisField: config.xAxisField, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, colorMap: colorMap }));
+        return ((0, jsx_runtime_1.jsx)(BarList_1.default, { data: pivotTable ? pivotTable.rows : config.rows, theme: theme, yAxisFields: pivotTableYAxis ? pivotTableYAxis : config.yAxisFields, colors: chartColors, xAxisField: config.xAxisField, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, className: className, colorMap: colorMap }));
     }
     const yAxisFields = pivotTableYAxis
         ? pivotTableYAxis
@@ -327,7 +327,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
             const yAxis = yAxisFields[0]?.field;
             barChartData = [{ [xAxis]: '', [yAxis]: '0' }];
         }
-        return ((0, jsx_runtime_1.jsx)(BarChart_1.default, { colors: chartColors, theme: theme, isStacked: isPivot && yAxisFields.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: yAxisFields, data: barChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, colorMap: colorMap }));
+        return ((0, jsx_runtime_1.jsx)(BarChart_1.default, { colors: chartColors, theme: theme, isStacked: isPivot && yAxisFields.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: yAxisFields, data: barChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, className: className, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, colorMap: colorMap }));
     }
     if (chartTypes.includes('metric')) {
         const data = config;
@@ -350,7 +350,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
                     maxWidth: '100%',
                     width: '100%',
                     ...containerStyle,
-                }, children: "No results" }));
+                }, className: className, children: "No results" }));
         }
         return ((0, jsx_runtime_1.jsxs)("div", { style: {
                 fontFamily: theme?.fontFamily,
@@ -368,7 +368,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
                 display: 'flex',
                 width: '100%',
                 flexDirection: 'row',
-            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+            }, className: className, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         gap: 4,
                         alignItems: 'baseline',
@@ -440,6 +440,6 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
             { [xAxis]: endDate, [yAxis]: '0' },
         ];
     }
-    return ((0, jsx_runtime_1.jsx)(LineChart_1.default, { colors: chartColors, colorMap: colorMap, yAxisFields: yAxisFields, data: lineChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle ?? 'solid' }));
+    return ((0, jsx_runtime_1.jsx)(LineChart_1.default, { colors: chartColors, colorMap: colorMap, yAxisFields: yAxisFields, data: lineChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, className: className, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle ?? 'solid' }));
 };
 exports.default = Chart;

package/dist/cjs/ChartBuilder.d.ts

@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react';
-import { QuillTheme } from './QuillProvider';
 import { DashboardItem } from './Dashboard';
 export declare const numberFormatOptions: string[];
 export declare const dateFormatOptions: string[];
@@ -15,6 +14,7 @@ export interface ChartBuilderProps {
     SelectComponent?: (props: {
         value: string;
         label?: string;
+        width: number;
         options: {
             value: string;
             label: string;
@@ -82,6 +82,17 @@ export interface ChartBuilderProps {
         popoverTitle?: string;
         popoverChildren: ReactNode;
     }) => JSX.Element;
+    /** A table component. */
+    TableComponent?: (props: {
+        rows: {
+            [key: string]: any;
+        }[];
+        columns: {
+            field: string;
+            label: string;
+        }[];
+        isLoading?: boolean;
+    }) => JSX.Element;
     /** The rows of the query response for this query. */
     rows: {
         [key: string]: any;
@@ -233,12 +244,22 @@ export declare function ChartBuilderWithModal(props: ChartBuilderProps): import(
  * ### Chart Builder API
  * @see https://docs.quillsql.com/components/chart-builder
  */
-export default function ChartBuilder({ TextInputComponent, SelectComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, LabelComponent, DeleteButtonComponent, TextComponent, PopoverComponent, CardComponent, isOpen, isHorizontalView, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, showDashboardDropdown, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem, recommendedPivots: rp, createdPivots: cp, destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton, hideSubmitButton, }: ChartBuilderProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function DashboardFilterModal({ isOpen, setIsOpen, override, theme, issues, }: {
+export default function ChartBuilder({ TextInputComponent, SelectComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, LabelComponent, DeleteButtonComponent, TextComponent, PopoverComponent, CardComponent, TableComponent, ModalComponent, isOpen, isHorizontalView, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, showDashboardDropdown, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem, recommendedPivots: rp, createdPivots: cp, destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton, hideSubmitButton, }: ChartBuilderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function DashboardFilterModal({ isOpen, setIsOpen, issues, ModalComponent, ButtonComponent, }: {
     isOpen: boolean;
     setIsOpen: (e: boolean) => void;
-    override: () => void;
-    theme: QuillTheme;
     issues: string[];
-}): import("react/jsx-runtime").JSX.Element;
+    ButtonComponent?: (props: {
+        onClick: () => void;
+        label: string;
+    }) => JSX.Element;
+    ModalComponent?: (props: {
+        isOpen: boolean;
+        setIsOpen: (isOpen: boolean) => void;
+        title?: string;
+        children: ReactNode;
+        width?: number;
+        height?: number;
+    }) => JSX.Element;
+}): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=ChartBuilder.d.ts.map

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

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

package/dist/cjs/ChartBuilder.js

@@ -18,6 +18,7 @@ const merge_1 = require("./utils/merge");
 const textProcessing_1 = require("./utils/textProcessing");
 const QuillSelect_1 = require("./components/QuillSelect");
 const QuillCard_1 = require("./components/QuillCard");
+const valueFormatter_1 = require("./utils/valueFormatter");
 const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
 const POSTGRES_DATE_TYPES = [
     'timestamp',
@@ -215,13 +216,14 @@ exports.ChartBuilderWithModal = ChartBuilderWithModal;
  * ### Chart Builder API
  * @see https://docs.quillsql.com/components/chart-builder
  */
-function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, HeaderComponent = UiComponents_1.MemoizedHeader, LabelComponent = UiComponents_1.MemoizedLabel, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextComponent = UiComponents_1.MemoizedText, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, }) {
+function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, HeaderComponent = UiComponents_1.MemoizedHeader, LabelComponent = UiComponents_1.MemoizedLabel, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextComponent = UiComponents_1.MemoizedText, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, TableComponent = UiComponents_1.QuillTableComponent, ModalComponent, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, }) {
     const dateRange = dr || [null, null, null];
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
+    const [windowWidth, setWindowWidth] = (0, react_1.useState)(1200);
     const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
-    const [divWidth, setDivWidth] = (0, react_1.useState)(0);
+    const [divWidth, setDivWidth] = (0, react_1.useState)('auto');
     const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
     const fields = fieldsProp?.map((field) => ({
         field: field.name,
@@ -231,33 +233,30 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
     })) || [];
     const parentRef = (0, react_1.useRef)(null);
     const deleteRef = (0, react_1.useRef)(null);
+    const pivotCardContainer = (0, react_1.useRef)(null);
     const modalPadding = 20;
     const deleteButtonMargin = -13;
     (0, react_1.useEffect)(() => {
-        const calculateWidth = () => {
-            return (
-            // @ts-ignore
-            parentRef.current.offsetWidth -
-                (deleteRef?.current
-                    ? deleteRef?.current.offsetWidth - deleteButtonMargin
-                    : 0));
+        const handleResize = () => setWindowWidth(window.innerWidth);
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
         };
-        // Measure the width of the div and update state
-        if (parentRef.current) {
-            setDivWidth(calculateWidth());
-        }
-        // Optional: Handle window resize
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const calculateWidth = () => pivotCardContainer.current?.getBoundingClientRect().width ?? 'auto';
         const handleResize = () => {
-            if (parentRef.current) {
+            if (pivotCardContainer.current) {
                 setDivWidth(calculateWidth());
             }
         };
+        handleResize();
         window.addEventListener('resize', handleResize);
-        // Cleanup listener
         return () => {
             window.removeEventListener('resize', handleResize);
         };
-    }, []);
+    }, [pivotCardContainer]);
     // get schema
     (0, react_1.useEffect)(() => {
         let isSubscribed = true;
@@ -472,6 +471,41 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
             return undefined;
         }
     }, [formData.pivot, rows]);
+    const formattedRows = (0, react_1.useMemo)(() => {
+        if (selectedPivotTable && formData.chartType === 'table') {
+            const columns = selectedPivotTable.columns;
+            columns.forEach((col, index) => {
+                // ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
+                if (formData.pivot?.valueFieldType && index !== 0) {
+                    col.format = formData.pivot.valueFieldType;
+                }
+            });
+            return selectedPivotTable.rows.map((row) => {
+                return columns.reduce((formattedRow, column) => {
+                    // Apply the format function to each field in the row
+                    const formattedValue = (0, valueFormatter_1.quillFormat)({
+                        value: row[column.field],
+                        format: column.format,
+                    });
+                    formattedRow[column.field] = formattedValue;
+                    return formattedRow;
+                }, {});
+            });
+        }
+        else {
+            return rows.map((row) => {
+                return formData.columns.reduce((formattedRow, column) => {
+                    // Apply the format function to each field in the row
+                    const formattedValue = (0, valueFormatter_1.quillFormat)({
+                        value: row[column.field],
+                        format: column.format,
+                    });
+                    formattedRow[column.field] = formattedValue;
+                    return formattedRow;
+                }, {});
+            });
+        }
+    }, [selectedPivotTable, formData.columns, formData.chartType]);
     const handleChange = (value, fieldName, index) => {
         try {
             // WE NEED TO REPROCESS THE PIVOT TABLE IF THE PIVOT COLUMN CHANGES
@@ -680,6 +714,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
             query: queryNoDateColumn || query,
             queryString: queryNoDateColumn || query,
             pivot: formData.pivot,
+            referencedTables: allTables,
         };
         // @ts-ignore
         if (cloudBody['rows']) {
@@ -727,10 +762,18 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
             onAddToDashboardComplete();
         }
     };
+    // Prevent horizontal view on small screens.
+    isHorizontalView = windowWidth < 1200 ? false : isHorizontalView;
     if (!schema) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { width: '100%', height: '100%', flexGrow: 1 }, children: [(0, jsx_runtime_1.jsxs)("div", { id: "quill-chart-modal", style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            flexGrow: 1,
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { id: "quill-chart-modal", style: {
                     width: '100%',
                     height: '100%',
                     maxWidth: '100%',
@@ -752,31 +795,18 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                     height: formData.chartType === 'metric'
                                         ? 100
                                         : isHorizontalView
-                                            ? '100%'
+                                            ? 'calc(50% - 10px)'
                                             : 400,
                                     ...(isHorizontalView && { flexGrow: 1 }),
                                 } })), 
                             // Make sure to display non-pivoted table when using pivot chart
-                            isHorizontalView && formData.chartType !== 'table' ? ((0, jsx_runtime_1.jsx)(Chart_1.default, { config: {
-                                    ...formData,
-                                    pivot: undefined,
-                                    chartType: 'table',
-                                    rows,
-                                    rowsPerPage: 10,
-                                }, containerStyle: {
-                                    height: '100%',
+                            isHorizontalView && ((0, jsx_runtime_1.jsx)("div", { style: {
                                     width: '100%',
+                                    height: 'calc(50% - 10px)',
                                     flexGrow: 1,
-                                } })) : (isHorizontalView && ((0, jsx_runtime_1.jsx)(Chart_1.default, { config: {
-                                    ...formData,
-                                    chartType: 'table',
-                                    rows,
-                                    rowsPerPage: 10,
-                                }, containerStyle: {
-                                    height: '100%',
-                                    width: '100%',
-                                    flexGrow: 1,
-                                } })))] }), (isOpen || !isHorizontalView) && ((0, jsx_runtime_1.jsxs)("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
+                                }, children: formData.chartType !== 'table' ? ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: formData.columns })) : ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: selectedPivotTable
+                                        ? selectedPivotTable.columns
+                                        : formData.columns })) }))] }), isOpen && ((0, jsx_runtime_1.jsxs)("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
                             display: 'flex',
                             flexDirection: 'column',
                             height: '100%',
@@ -792,10 +822,10 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                         }, options: dashboardOptions.map((elem) => ({
                                                             label: elem.label,
                                                             value: elem.label,
-                                                        })) })] })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Chart type" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.chartType, onChange: (e) => handleChange(e.target.value, 'chartType'), 
+                                                        })), width: 200 })] })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Chart type" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.chartType, onChange: (e) => handleChange(e.target.value, 'chartType'), 
                                                         // filter out metric for all pivots
                                                         // filter out bar and pie for row and column pivot
-                                                        options: getChartTypeOptions(formData) })] })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                        options: getChartTypeOptions(formData), width: 200 })] })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 12,
@@ -805,11 +835,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                             // marginTop: 6,
                                                             display: 'flex',
                                                             flexDirection: 'column',
-                                                        }, children: (0, jsx_runtime_1.jsx)(PivotModal_1.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, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot }) }), formData.pivot && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                                            // width: 592,
-                                                            paddingRight: 42,
-                                                            maxWidth: 750,
-                                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: { width: !isHorizontalView ? divWidth : 'auto' }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
+                                                        }, children: (0, jsx_runtime_1.jsx)(PivotModal_1.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, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot }) }), formData.pivot && ((0, jsx_runtime_1.jsx)("div", { ref: pivotCardContainer, children: (0, jsx_runtime_1.jsx)("div", { style: { width: !isHorizontalView ? divWidth : 'auto' }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
                                                                     pivot: formData.pivot,
                                                                     rows: selectedPivotTable?.rows,
                                                                     columns: selectedPivotTable?.columns,
@@ -835,7 +861,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                                     : fieldOptions.map((elem) => ({
                                                                         label: elem.field,
                                                                         value: elem.field,
-                                                                    })) }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-x-axis-label", width: 200, value: formData.pivot
+                                                                    })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-x-axis-label", width: 200, value: formData.pivot
                                                                     ? formData.pivot.rowField
                                                                     : formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'xAxisLabel') }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot &&
                                                                     (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType)
@@ -843,7 +869,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                                     : formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
                                                                     (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType)
                                                                     ? [{ value: 'pivot_date', label: 'date' }]
-                                                                    : formatOptions })] }, 'xAxisField'), (0, jsx_runtime_1.jsx)("br", {})] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                                    : formatOptions, width: 200 })] }, 'xAxisField'), (0, jsx_runtime_1.jsx)("br", {})] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), (0, jsx_runtime_1.jsx)("div", { style: {
                                                             display: 'flex',
                                                             flexDirection: 'column',
                                                             gap: 10,
@@ -867,7 +893,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                                             .map((elem) => ({
                                                                             label: elem.field,
                                                                             value: elem.field,
-                                                                        })) }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-y-axis-label", width: 200, value: formData.pivot?.valueField || yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'yAxisFields.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot
+                                                                        })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-y-axis-label", width: 200, value: formData.pivot?.valueField || yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'yAxisFields.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot
                                                                         ? NUMBER_OPTIONS.find((option) => {
                                                                             return (option.value === yAxisField.format);
                                                                         })
@@ -876,7 +902,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                                             : 'whole_number'
                                                                         : yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
                                                                         ? NUMBER_OPTIONS
-                                                                        : formatOptions }), formData.pivot === null && ((0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))) }), formData.pivot === null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" })] }))] })), (0, jsx_runtime_1.jsx)("br", {})] })), (showTableFormatOptions || formData.chartType === 'table') && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                                                        : formatOptions, width: 200 }), formData.pivot === null && ((0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))) }), formData.pivot === null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" })] }))] })), (0, jsx_runtime_1.jsx)("br", {})] })), isHorizontalView && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     gap: 6,
@@ -897,7 +923,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                             }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: column.label, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: selectedPivotTable.columns.map((elem) => ({
                                                                         label: elem.label,
                                                                         value: elem.label,
-                                                                    })) }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: 
+                                                                    })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: 
                                                                     // The first index use rowField for the rest of them use value fields
                                                                     formData.pivot &&
                                                                         column.field === formData.pivot.rowField
@@ -910,7 +936,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                                         ? (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType)
                                                                             ? [{ label: 'date', value: 'pivot_date' }]
                                                                             : [{ label: 'string', value: 'string' }]
-                                                                        : [...NUMBER_OPTIONS] })] }, 'column' + index)))
+                                                                        : [...NUMBER_OPTIONS], width: 200 })] }, 'column' + index)))
                                                     : formData.columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
                                                             display: 'flex',
                                                             flexDirection: 'row',
@@ -918,7 +944,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                         }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: column.field, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: fields.map((elem) => ({
                                                                     label: elem.field,
                                                                     value: elem.field,
-                                                                })) }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: formatOptions }), (0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] })), showDateFieldOptions && formData.dateField && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                                })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: formatOptions, width: 200 }), (0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] })), showDateFieldOptions && formData.dateField && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
@@ -930,12 +956,12 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Table" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.dateField?.table, onChange: (e) => handleChange(e.target.value, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
                                                                     label: elem.name,
                                                                     value: elem.name,
-                                                                })) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: (0, textProcessing_1.removeDoubleQuotes)(formData.dateField?.field), onChange: (e) => handleChange(e.target.value, 'dateField.field'), options: dateFieldOptions
+                                                                })), width: 200 })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: (0, textProcessing_1.removeDoubleQuotes)(formData.dateField?.field), onChange: (e) => handleChange(e.target.value, 'dateField.field'), options: dateFieldOptions
                                                                     ?.find((elem) => elem.name === formData.dateField?.table)
                                                                     ?.columns?.map((elem) => ({
                                                                     label: elem.name,
                                                                     value: elem.name,
-                                                                })) || [] })] })] }), (0, jsx_runtime_1.jsx)("br", {})] })), showAccessControlOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                                })) || [], width: 200 })] })] }), (0, jsx_runtime_1.jsx)("br", {})] })), showAccessControlOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 12,
@@ -950,7 +976,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                             ? buttonLabel
                                             : dashboardItem
                                                 ? 'Save changes'
-                                                : 'Add to dashboard' }))] })] }))] }), (0, jsx_runtime_1.jsx)(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal, override: () => editChart(true), theme: theme, issues: filterIssues })] }));
+                                                : 'Add to dashboard' }))] })] }))] }), (0, jsx_runtime_1.jsx)(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal, issues: filterIssues, ButtonComponent: ButtonComponent })] }));
 }
 exports.default = ChartBuilder;
 function SegmentedControl({ onChange, value, theme, organizationName, }) {
@@ -1015,18 +1041,21 @@ function SegmentedControl({ onChange, value, theme, organizationName, }) {
     }
 ` }), organizationName] }))] }));
 }
-function DashboardFilterModal({ isOpen, setIsOpen, override, theme, issues, }) {
-    return ((0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedModal, { isOpen: isOpen, setIsOpen: setIsOpen, title: 'Chart not compatible with selected dashboard', children: (0, jsx_runtime_1.jsxs)("div", { style: {
+function DashboardFilterModal({ isOpen, setIsOpen, issues, ModalComponent = UiComponents_1.MemoizedModal, ButtonComponent = UiComponents_1.MemoizedButton, }) {
+    if (!isOpen)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, setIsOpen: setIsOpen, title: 'Chart not compatible with selected dashboard', width: 600, height: 400, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
                 width: '600px',
                 padding: '20px',
                 boxSizing: 'border-box',
+                overflow: 'scroll',
             }, children: [issues.map((issue, index) => ((0, jsx_runtime_1.jsx)("span", { style: { paddingTop: '10px' }, children: issue }, issue))), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         gap: '12px',
                         justifyContent: 'flex-end',
-                    }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedButton, { label: "Got It", onClick: () => setIsOpen(false) }) })] }) }));
+                    }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { label: "Got It", onClick: () => setIsOpen(false) }) })] }) }));
 }
 exports.DashboardFilterModal = DashboardFilterModal;

package/dist/cjs/ChartEditor.d.ts

@@ -92,6 +92,17 @@ export interface ChartEditorProps {
         popoverTitle?: string;
         popoverChildren: ReactNode;
     }) => JSX.Element;
+    /** A table component. */
+    TableComponent?: (props: {
+        rows: {
+            [key: string]: any;
+        }[];
+        columns: {
+            field: string;
+            label: string;
+        }[];
+        isLoading?: boolean;
+    }) => JSX.Element;
     /** The default dashboard to add the item to. */
     destinationDashboard?: string;
     /** The name of the current organization. */
@@ -129,5 +140,5 @@ export interface ChartEditorProps {
  * ### Chart Editor API
  * @see https://docs.quillsql.com/components/chart-editor
  */
-export default function ChartEditor({ isOpen, chartId, isAdmin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, organizationName, isHorizontalView, onDelete, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, LabelComponent, TextComponent, DeleteButtonComponent, ModalComponent, CardComponent, PopoverComponent, hideDeleteButton, hideSubmitButton, }: ChartEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function ChartEditor({ isOpen, chartId, isAdmin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, organizationName, isHorizontalView, onDelete, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, LabelComponent, TextComponent, DeleteButtonComponent, ModalComponent, CardComponent, PopoverComponent, TableComponent, hideDeleteButton, hideSubmitButton, }: ChartEditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChartEditor.d.ts.map

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

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