@quillsql/react 2.11.15 → 2.11.17

package/dist/esm/SQLEditor.d.ts

@@ -1,50 +1,180 @@
-import React from 'react';
-import { ModalComponentProps, TableComponentProps } from './components/UiComponents';
+import React, { ReactNode } from 'react';
+import { DashboardItem } from './Dashboard';
 export declare function convertPostgresColumn(column: any): {
     label: any;
     field: any;
     format: string;
     fieldType: string;
 };
-interface ButtonComponentProps {
-    onClick: () => void;
-    label: string;
-}
-interface SQLEditorProps {
-    containerStyle: React.CSSProperties;
-    ButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
-    SecondaryButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
-    TextInputComponent?: (props: TextInputComponentProps) => JSX.Element;
-    TableComponent?: (props: TableComponentProps) => JSX.Element;
+/**
+ * Props for the Quill SQLEditor component.
+ */
+export interface SQLEditorProps {
+    /**
+     * A primary button component.
+     */
+    ButtonComponent?: (props: {
+        onClick: () => void;
+        label: string;
+    }) => JSX.Element;
+    /**
+     * A secondary button component.
+     */
+    SecondaryButtonComponent?: (props: {
+        onClick: () => void;
+        label: string;
+    }) => JSX.Element;
+    /**
+     * A input element for getting text from the user.
+     */
+    TextInputComponent?: (props: {
+        id: string;
+        width: number;
+        value: string;
+        placeholder?: string;
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    }) => JSX.Element;
+    /**
+     * A table component to show the results of the SQL query.
+     */
+    TableComponent?: (props: {
+        rows: {
+            [key: string]: any;
+        }[];
+        columns: {
+            field: string;
+            label: string;
+        }[];
+        isLoading?: boolean;
+    }) => JSX.Element;
+    /**
+     * A component to show while the query results are loading.
+     */
     LoadingComponent?: () => JSX.Element;
-    ModalComponent?: (_props: ModalComponentProps) => JSX.Element;
+    /**
+     * A modal component to use to open the add to dashboard dialog.
+     */
+    ModalComponent?: (props: {
+        isOpen: boolean;
+        setIsOpen: (isOpen: boolean) => void;
+        title?: string;
+        children: ReactNode;
+        width?: number;
+        height?: number;
+    }) => JSX.Element;
+    /**
+     * A callback that is fired when the query changes.
+     */
     onChangeQuery?: (query: string) => void;
+    /**
+     * A callback that is fired when the data changes.
+     */
     onChangeData?: (data: object[]) => void;
-    onChangeColumns?: (columns: object[]) => void;
+    /**
+     * A callback that is fired when the data fields change.
+     */
     onChangeFields?: (fields: object[]) => void;
-    defaultQuery?: string;
-    chartBuilderEnabled?: boolean;
+    /**
+     * A callback that is fired when the data columns change.
+     */
+    onChangeColumns?: (columns: object[]) => void;
+    /**
+     * A callback that is fired when a dashboard item has been added to a dashboard.
+     */
+    onAddToDashboardComplete?: () => void;
+    /**
+     * Whether the chart builder is in horizontal view mode.
+     *
+     * Horizontal view mode is where the chart and table are displayed on the left
+     * and the editing form is displayed on the right, rather than being stacked
+     * vertically.
+     */
+    isChartBuilderHorizontalView?: boolean;
+    /**
+     * A callback that is fired when the data columns change.
+     */
+    isChartBuilderEnabled?: boolean;
+    /**
+     * Whether the "new query" button is enabled.
+     */
+    isNewQueryEnabled?: boolean;
+    /**
+     * Whether the SQLEditor is in edit mode.
+     */
+    isEditMode?: boolean;
+    /**
+     * Whether to show table format options.
+     */
     showTableFormatOptions?: boolean;
+    /**
+     * Whether to show date field options.
+     */
     showDateFieldOptions?: boolean;
+    /**
+     * Whether to show access control options.
+     */
     showAccessControlOptions?: boolean;
+    /**
+     * A dashboard item.
+     */
+    dashboardItem?: DashboardItem | any;
+    /**
+     * The default query to use as a placeholder.
+     */
+    defaultQuery?: string;
+    /**
+     * The default dashboard to dashboard items to.
+     */
     destinationDashboard?: string;
-    newQueryEnabled?: boolean;
-    isEditMode?: boolean;
-    dashboardItem?: any;
+    /**
+     * The title of the ChartBuilder dialog.
+     */
     chartBuilderTitle?: string;
+    /**
+     * The label of the button to open the ChartBuilder dialog.
+     */
     chartBuilderButtonLabel?: string;
+    /**
+     * The label of the button to add the current query to a dashboard.
+     *
+     * @default "Add to dashboard"
+     */
     addToDashboardButtonLabel?: string;
-    onAddToDashboardComplete?: () => void;
+    /**
+     * The name of the current organization.
+     */
     organizationName?: string;
-    chartBuilderHorizontalView?: boolean;
-}
-interface TextInputComponentProps {
-    onChange: (e: any) => void;
-    value: string;
-    id: string;
-    placeholder?: string;
+    /**
+     * Styles the top-level container of the SQLEditor.
+     */
+    containerStyle?: React.CSSProperties;
 }
-export default function QueryEditor({ containerStyle, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, newQueryEnabled, LoadingComponent, ModalComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode, chartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, chartBuilderHorizontalView, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ### Quill SQLEditor
+ *
+ * Allows your users to build and write custom SQL queries and then add those
+ * queries into their dashboard as a metric, chart, or table.
+ *
+ * @example
+ * ```js
+ * // Usage without custom components
+ * <SQLEditor />
+ * ```
+ *
+ * @example
+ * ```js
+ * // You can also pass your own components and default values.
+ * <SQLEditor
+ *   defaultQuery="SELECT SUM(amount) FROM TRANSACTIONS"
+ *   ButtonComponen={MyButton}
+ *   SecondaryButtonComponen={MySecondaryButton}
+ * />
+ * ```
+ *
+ * ### SQLEditor API
+ * @see https://docs.quillsql.com/components/sql-editor
+ */
+export default function SQLEditor({ ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, isNewQueryEnabled, LoadingComponent, ModalComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode, isChartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, isChartBuilderHorizontalView, containerStyle, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
 export declare const SchemaListComponent: ({ schema, theme, loading, LoadingComponent, width, onClick, }: {
     schema: any;
     theme: any;
@@ -53,5 +183,4 @@ export declare const SchemaListComponent: ({ schema, theme, loading, LoadingComp
     width: any;
     onClick?: (() => void) | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=SQLEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAMN,MAAM,OAAO,CAAC;AAQf,OAAO,EAGL,mBAAmB,EACnB,mBAAmB,EAEpB,MAAM,2BAA2B,CAAC;AAInC,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,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,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;IAC1B,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;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;AAuCD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAgC,EAChC,wBAAkD,EAClD,kBAAmC,EACnC,cAA2B,EAC3B,eAAuB,EACvB,gBAAgB,EAChB,cAAc,EACd,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,EAC5B,0BAAkC,GACnC,EAAE,cAAc,2CA+WhB;AA6JD,eAAO,MAAM,mBAAmB;;;;;;;6CAuG/B,CAAC"}
+{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"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"}

package/dist/esm/SQLEditor.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-unused-vars */
 // @ts-nocheck
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-import { useState, useContext, useEffect, } from 'react';
+import { useState, useContext, useEffect, useRef, } from 'react';
 import MonacoEditor from '@monaco-editor/react';
-// import './nightOwlLight.css';
 import { ClientContext, SchemaContext, ThemeContext } from './Context';
-import QuillTable from './components/QuillTable';
 import { getData, getDataFromCloud } from './utils/dataFetcher';
 import { ChartBuilderWithModal } from './ChartBuilder';
-import { MemoizedButton, MemoizedSecondaryButton, } from './components/UiComponents';
-import { QuillTextInput } from './components/ReportBuilder/ui';
+import { MemoizedButton, MemoizedModal, MemoizedSecondaryButton, QuillTableComponent, } from './components/UiComponents';
+import { QuillTextInput } from './components/UiComponents';
+import { updateFirstChildWidth } from './utils/width';
 export function convertPostgresColumn(column) {
     let format;
     let fieldType;
@@ -105,26 +105,32 @@ function setEditorTheme(editor, monaco) {
         console.log('ERROR: ', e);
     }
 }
-const QuillButton = ({ onClick, label, theme, secondary, }) => (_jsx("button", { style: {
-        borderRadius: '6px',
-        backgroundColor: secondary
-            ? theme?.secondaryButtonColor || '#F5F5F5'
-            : theme?.primaryButtonColor,
-        opacity: 1,
-        paddingLeft: '16px',
-        paddingRight: '16px',
-        // paddingTop: '10px',
-        // paddingBottom: '10px',
-        fontSize: '14px',
-        fontWeight: 600,
-        color: secondary ? theme?.primaryTextColor : '#FFFFFF',
-        cursor: 'pointer',
-        outline: 'none',
-        border: 'none',
-        fontFamily: theme?.fontFamily,
-        height: 38,
-    }, onClick: onClick, children: label }));
-export default function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, TextInputComponent = QuillTextInput, TableComponent = QuillTable, newQueryEnabled = false, LoadingComponent, ModalComponent, 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, chartBuilderHorizontalView = false, }) {
+/**
+ * ### Quill SQLEditor
+ *
+ * Allows your users to build and write custom SQL queries and then add those
+ * queries into their dashboard as a metric, chart, or table.
+ *
+ * @example
+ * ```js
+ * // Usage without custom components
+ * <SQLEditor />
+ * ```
+ *
+ * @example
+ * ```js
+ * // You can also pass your own components and default values.
+ * <SQLEditor
+ *   defaultQuery="SELECT SUM(amount) FROM TRANSACTIONS"
+ *   ButtonComponen={MyButton}
+ *   SecondaryButtonComponen={MySecondaryButton}
+ * />
+ * ```
+ *
+ * ### SQLEditor API
+ * @see https://docs.quillsql.com/components/sql-editor
+ */
+export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, TextInputComponent = QuillTextInput, TableComponent = QuillTableComponent, isNewQueryEnabled = false, LoadingComponent, ModalComponent = MemoizedModal, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode = false, isChartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, }) {
     const [sqlPrompt, setSqlPrompt] = useState('');
     const [client] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
@@ -139,6 +145,20 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
     const [schemaLoading, setSchemaLoading] = useState(false);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
     const [displayTable, setDisplayTable] = useState(false);
+    const formRef = useRef(null);
+    const [searchBarWidth, setSearchBarWidth] = useState(200);
+    useEffect(() => {
+        // Since the TextInput component takes a required numeric width parameter,
+        // we dynamically calculate the width of this component here.
+        function handleResize() {
+            updateFirstChildWidth(formRef, setSearchBarWidth, { gap: 12 });
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
     const getSchema = async (isSubscribed) => {
         setSchemaLoading(true);
         const { queryEndpoint, queryHeaders, publicKey } = client;
@@ -269,8 +289,8 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
             onChangeQuery(query);
         }
     }, [query]);
-    return (_jsxs("div", { style: containerStyle, children: [(!chartBuilderHorizontalView ||
-                (chartBuilderHorizontalView && !isChartBuilderOpen)) && (_jsx("div", { style: {
+    return (_jsxs("div", { style: containerStyle, children: [(!isChartBuilderHorizontalView ||
+                (isChartBuilderHorizontalView && !isChartBuilderOpen)) && (_jsx("div", { style: {
                     height: '100%',
                     display: 'flex',
                     flexDirection: 'column',
@@ -288,7 +308,7 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
                                     width: 'calc(100% - 290px)',
                                     height: '100%',
                                     overflowX: 'hidden',
-                                }, children: [_jsxs("form", { onSubmit: (e) => {
+                                }, children: [_jsxs("form", { ref: formRef, onSubmit: (e) => {
                                             e.preventDefault();
                                             handleRunSqlPrompt();
                                         }, style: {
@@ -297,7 +317,7 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
                                             gap: 12,
                                             paddingTop: 16,
                                             paddingBottom: 16,
-                                        }, children: [_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, style: { width: '100%', fontSize: 14 }, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }), (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || (_jsx(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] }), _jsx("div", { style: { height: 'calc(50% - 40px)' }, children: _jsx(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, handleFixWithAI: handleFixWithAI, newQueryEnabled: newQueryEnabled, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), _jsxs("div", { style: {
+                                        }, children: [_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, width: searchBarWidth, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }), _jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" })] }), _jsx("div", { style: { height: 'calc(50% - 40px)' }, children: _jsx(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, handleFixWithAI: handleFixWithAI, isNewQueryEnabled: isNewQueryEnabled, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), _jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             height: 'calc(50% - 108px)',
@@ -322,16 +342,16 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
                                                         borderRadius: 6,
                                                         padding: 20,
                                                         width: '100%',
-                                                    }, children: [errorMessage, (SecondaryButtonComponent && (_jsx(SecondaryButtonComponent, { onClick: handleFixWithAI, label: "Fix with AI" }))) || (_jsx(QuillButton, { secondary: true, onClick: handleFixWithAI, label: "Fix with AI", theme: theme }))] }) })), errorMessage || !displayTable ? null : (_jsx(TableComponent, { rows: rows, columns: columns, containerStyle: { height: 'calc(100%)' }, LoadingComponent: LoadingComponent, loading: sqlQueryLoading }))] }), chartBuilderEnabled && rows.length > 0 && (_jsx("div", { style: {
+                                                    }, children: [errorMessage, _jsx(SecondaryButtonComponent, { onClick: handleFixWithAI, label: "Fix with AI" })] }) })), errorMessage || !displayTable ? null : (_jsx(TableComponent, { isLoading: sqlQueryLoading, rows: rows, columns: columns }))] }), isChartBuilderEnabled && rows.length > 0 && (_jsx("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',
                                             justifyContent: 'flex-end',
                                             width: '100%',
                                             height: '70px',
-                                        }, children: (ButtonComponent && (_jsx(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }))) || (_jsx(QuillButton, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel, theme: theme })) }))] })] }) }) })), _jsx(ChartBuilderWithModal, { rows: rows, columns: columns, fields: fields, query: query, horizontalView: chartBuilderHorizontalView, isEditMode: isEditMode, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel, buttonLabel: addToDashboardButtonLabel, dashboardItem: dashboardItem, organizationName: organizationName, Modal: ModalComponent, Button: ButtonComponent })] }));
+                                        }, children: _jsx(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }) }))] })] }) }) })), _jsx(ChartBuilderWithModal, { rows: rows, columns: columns, fields: fields, query: query, horizontalView: isChartBuilderHorizontalView, isEditMode: isEditMode, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel, buttonLabel: addToDashboardButtonLabel, dashboardItem: dashboardItem, organizationName: organizationName, Modal: ModalComponent, Button: ButtonComponent })] }));
 }
-const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleFixWithAI, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, newQueryEnabled, theme, loading, LoadingComponent, }) => {
+const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleFixWithAI, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, isNewQueryEnabled, theme, loading, LoadingComponent, }) => {
     return (_jsxs("div", { style: {
             background: theme.backgroundColor,
             // maxHeight: 700,
@@ -366,7 +386,7 @@ const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleFixWithAI,
                     flexDirection: 'row',
                     alignItems: 'center',
                     height: 70,
-                }, children: _jsxs("div", { style: { display: 'flex', gap: 12 }, children: [(ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || (_jsx(QuillButton, { onClick: handleRunQuery, label: "Run query", theme: theme })), newQueryEnabled && (_jsx("div", { children: (SecondaryButtonComponent && (_jsx(SecondaryButtonComponent, { onClick: handleClearQuery, label: "Clear query" }))) || (_jsx(QuillButton, { secondary: true, onClick: handleClearQuery, label: "Clear query", theme: theme })) }))] }) })] }));
+                }, children: _jsxs("div", { style: { display: 'flex', gap: 12 }, children: [_jsx(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }), isNewQueryEnabled && (_jsx(SecondaryButtonComponent, { onClick: handleClearQuery, label: "Clear query" }))] }) })] }));
 };
 export const SchemaListComponent = ({ schema, theme, loading, LoadingComponent, width, onClick = () => { }, }) => {
     if (loading) {

package/dist/esm/Table.d.ts

@@ -3,25 +3,129 @@ export interface TableColumn {
     label: string;
     field: string;
 }
-interface ChartIdTableProps {
-    chartId: string;
-    containerStyle?: React.CSSProperties;
+/**
+ * Props for the Quill Table component.
+ */
+export interface TableProps {
+    /**
+     * The id of the table to render, if any.
+     *
+     * When a `chartId` is passed, the table will first fetch the data necessary
+     * to render this table, and then it will render the rows and columns that it
+     * receives from the server.
+     *
+     * NOTE: A `chartId` must be passed if `rows` and `columns` are not present.
+     */
+    chartId?: string;
+    /**
+     * The rows of the table to show, if any.
+     *
+     * When `rows` and `columns` are passed, the table will not refetch the given
+     * dashboard item and will instead simply render the rows and columns it was
+     * given.
+     *
+     * NOTE: Both `rows` and `columns` must be passed if `chartId` is not present.
+     *
+     * @example
+     * ```js
+     * let rows = {[
+     *   { x: 1, y: 1, z: 0 },
+     *   { x: 2, y: 2, z: 0 },
+     *   { x: 3, y: 3, z: 0 },
+     *   { x: 4, y: 4, z: 0 }
+     * ]};
+     * let columns = {[
+     *   { label: "My X-Axis", field: "x" },
+     *   { label: "My Y-Axis", field: "y" }
+     * ]}'
+     * ```
+     */
+    rows: {
+        [key: string]: any;
+    }[];
+    /**
+     * The columns of the table to show, if any.
+     *
+     * When `rows` and `columns` are passed, the table will not refetch the given
+     * dashboard item and will instead simply render the rows and columns it was
+     * given.
+     *
+     * NOTE: Both `rows` and `columns` must be passed if `chartId` is not present.
+     *
+     * @example
+     * ```js
+     * let rows = {[
+     *   { x: 1, y: 1, z: 0 },
+     *   { x: 2, y: 2, z: 0 },
+     *   { x: 3, y: 3, z: 0 },
+     *   { x: 4, y: 4, z: 0 }
+     * ]};
+     * let columns = {[
+     *   { label: "My X-Axis", field: "x" },
+     *   { label: "My Y-Axis", field: "y" }
+     * ]}'
+     * ```
+     */
+    columns: {
+        label: string;
+        field: string;
+    }[];
+    /**
+     * The placeholder filename to use when downloading this table as a csv file.
+     */
     csvFilename?: string;
+    /**
+     * Whether to show the download csv button.
+     */
     showDownloadCSVButton?: boolean;
+    /**
+     * Whether this table component is loading.
+     */
+    isLoading?: boolean;
+    /**
+     * A callback that is fired when the user clicks download csv.
+     */
+    downloadCSV?: () => void;
+    /**
+     * A loading component to show when the table is loading.
+     */
     LoadingComponent?: () => JSX.Element;
-}
-interface DataTableProps {
-    columns: TableColumn[];
-    rows: object[];
+    /**
+     * Styles the top-level container of the Table.
+     */
     containerStyle?: React.CSSProperties;
-    csvFilename?: string;
-    showDownloadCSVButton?: boolean;
-    LoadingComponent?: () => JSX.Element;
-    loading?: boolean;
-    height?: string;
-    downloadCSV?: () => void;
 }
-type TableWrapperProps = ChartIdTableProps | DataTableProps;
-declare const Table: (data: TableWrapperProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * ### Quill Table
+ *
+ * A simple component that displays the given data as a table.
+ *
+ * @example
+ * ```js
+ * // Usage with chart id (will auto-fetch data)
+ * <Table chartId="12345" />
+ * ```
+ *
+ * @example
+ * ```js
+ * // Usage with rows and columns (will not auto-fetch data)
+ * <Table
+ *   rows={[
+ *     { x: 1, y: 1, z: 0 },
+ *     { x: 2, y: 2, z: 0 },
+ *     { x: 3, y: 3, z: 0 },
+ *     { x: 4, y: 4, z: 0 }
+ *   ]}
+ *   columns={[
+ *     { label: "My X-Axis", field: "x" },
+ *     { label: "My Y-Axis", field: "y" }
+ *   ]}
+ * />
+ * ```
+ *
+ * ### Table API
+ * @see https://docs.quillsql.com/components/table
+ */
+declare const Table: (props: TableProps) => import("react/jsx-runtime").JSX.Element;
 export default Table;
 //# sourceMappingURL=Table.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAc/D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC;AAED,UAAU,cAAc;IACtB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,KAAK,iBAAiB,GAAG,iBAAiB,GAAG,cAAc,CAAC;AAE5D,QAAA,MAAM,KAAK,SAAU,iBAAiB,4CAmCrC,CAAC;AAgGF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAYrD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAuBD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAE/B;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAiC/B,CAAC;AA8FF,eAAe,KAAK,CAAC"}

package/dist/esm/Table.js

@@ -1,22 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect } from 'react';
-import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, } from './Context';
+import { ClientContext, DashboardContext, DashboardFiltersContext, } from './Context';
 import { getData } from './utils/dataFetcher';
 import { mergeComparisonRange } from './utils/merge';
 import QuillTable from './components/QuillTable';
 import { useMemoizedRows } from './hooks/useFormat';
 import { useExport } from './hooks/useExport';
-const Table = (data) => {
+/**
+ * ### Quill Table
+ *
+ * A simple component that displays the given data as a table.
+ *
+ * @example
+ * ```js
+ * // Usage with chart id (will auto-fetch data)
+ * <Table chartId="12345" />
+ * ```
+ *
+ * @example
+ * ```js
+ * // Usage with rows and columns (will not auto-fetch data)
+ * <Table
+ *   rows={[
+ *     { x: 1, y: 1, z: 0 },
+ *     { x: 2, y: 2, z: 0 },
+ *     { x: 3, y: 3, z: 0 },
+ *     { x: 4, y: 4, z: 0 }
+ *   ]}
+ *   columns={[
+ *     { label: "My X-Axis", field: "x" },
+ *     { label: "My Y-Axis", field: "y" }
+ *   ]}
+ * />
+ * ```
+ *
+ * ### Table API
+ * @see https://docs.quillsql.com/components/table
+ */
+const Table = (props) => {
+    let data = props;
     const { dispatch, dashboard } = useContext(DashboardContext);
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [client, _] = useContext(ClientContext);
-    const [theme] = useContext(ThemeContext);
     if ('rows' in data && 'columns' in data) {
-        return (_jsx(QuillTable, { showDownloadCSVButton: data.showDownloadCSVButton, downloadFileName: data.csvFilename, columns: data.columns, rows: data.rows, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, loading: data.loading, downloadCSV: data.downloadCSV }));
+        return (_jsx(QuillTable, { showDownloadCSVButton: data.showDownloadCSVButton, downloadFileName: data.csvFilename, columns: data.columns, rows: data.rows, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, isLoading: data.isLoading, downloadCSV: data.downloadCSV }));
     }
-    return (_jsx(ChartUpdater, { showDownloadCSVButton: data.showDownloadCSVButton, dispatch: dispatch, dashboard: dashboard, chartId: data.chartId, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, theme: theme, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent }));
+    return (_jsx(ChartUpdater, { showDownloadCSVButton: data.showDownloadCSVButton, dispatch: dispatch, dashboard: dashboard, chartId: data.chartId, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent }));
 };
-const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, dashboardFilters, theme, csvFilename, showDownloadCSVButton = true, LoadingComponent, }) => {
+const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, dashboardFilters, csvFilename, showDownloadCSVButton = true, LoadingComponent, }) => {
     const { rows, loading } = useMemoizedRows(chartId);
     const { downloadCSV } = useExport(chartId);
     useEffect(() => {
@@ -69,6 +100,6 @@ const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, da
         // @ts-ignore
         columns: dashboard[chartId]?.columns || [], 
         // @ts-ignore
-        rows: rows || dashboard[chartId]?.rows || [], containerStyle: containerStyle, LoadingComponent: LoadingComponent, loading: loading, downloadCSV: downloadCSV }));
+        rows: rows || dashboard[chartId]?.rows || [], containerStyle: containerStyle, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV }));
 };
 export default Table;

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

@@ -1 +1 @@
-{"version":3,"file":"TableChart.d.ts","sourceRoot":"","sources":["../../src/TableChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAqEjD,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAuED,QAAA,MAAM,UAAU,qFAoQf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"TableChart.d.ts","sourceRoot":"","sources":["../../src/TableChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAoED,QAAA,MAAM,UAAU,qFAsEf,CAAC;AAEF,eAAe,UAAU,CAAC"}