App.tsx
import { QuillProvider, SQLEditor } from "@quillsql/react";

function App() {
  return (
    <QuillProvider organizationId="2" publicKey="6579031b3e41c378aa8180ec">
      <SQLEditor />
    </QuillProvider>
  );
}

Allows your users to build and write custom SQL queries and then add those queries into their dashboard as a metric, chart, or table.

Make sure QuillProvider is a parent of the SQLEditor component.

Examples

import { SQLEditor } from "@quillsql/react";

import { AntTable } from "./ui/ant/Table";
import { AntSelectComponent } from "./ui/ant/SelectComponent";
import { AntButton, AntSecondaryButton } from "./ui/ant/Button";
import { AntTextInput } from "./ui/ant/Input";

export function AntSQLEditor() {
  return (
    <SQLEditor
      ButtonComponent={AntButton}
      SecondaryButtonComponent={AntSecondaryButton}
      TextInputComponent={AntTextInput}
      SelectComponent={AntSelectComponent}
      TableComponent={AntTable}
    />
  );
}

Props

ButtonComponent
(props: ButtonComponentProps) => JSX.Element

A primary button component.

SecondaryButtonComponent
(props: ButtonComponentProps) => JSX.Element

A secondary button component.

DeleteButtonComponent
(props: DeleteButtonComponentProps) => JSX.Element

A small delete button used to click out of things. Usually an “X” icon.

TextInputComponent
(props: TextInputComponentProps) => JSX.Element

A input element for getting text from the user.

SelectComponent
(props: SelectComponentProps) => JSX.Element

A select element for letting the user select from a set of options.

TableComponent
(props: TableComponentProps) => JSX.Element

A table component.

LoadingComponent
() => JSX.Element

A component to show while the query results are loading.

CardComponent
(props: CardComponentProps) => JSX.Element

A card component used as a dismissable container of pivot information.

ModalComponent
(props: ModalComponentProps) => JSX.Element

A modal component to use to open the add to dashboard dialog.

PopoverComponent
(props: PopoverComponentProps) => JSX.Element

A popover component.

LabelComponent
(props: { label: string }) => JSX.Element

A label component.

HeaderComponent
(props: { label: string }) => JSX.Element

A header component.

SubHeaderComponent
(props: { label: string }) => JSX.Element

A sub-header component describes a group of inputs.

TextComponent
(props: { label: string }) => JSX.Element

A simple text component.

ChartBuilderInputRowContainer
(props: { children: ReactNode }) => JSX.Element

A container for each row of inputs for the ChartBuilder form.

ChartBuilderInputColumnContainer
(props: { children: ReactNode }) => JSX.Element

A container for vertically-stacked rows of inputs for the ChartBuilder form.

PivotRowContainer
(props: { children: ReactNode }) => JSX.Element

A container for each row of inputs for the pivot form.

PivotColumnContainer
(props: { children: ReactNode }) => JSX.Element

A container for vertically-stacked rows of inputs for the pivot form.

ChartBuilderFormContainer
(props: { children: ReactNode }) => JSX.Element

A container for vertically-stacked sections of the chart builder form.

ErrorMessageComponent
(props: { children: ReactNode }) => JSX.Element

A component that displays error messages.

onChangeQuery
(query: string) => void

A callback that is fired when the query changes.

onChangeData
(query: string) => void

A callback that is fired when the data changes.

onChangeFields
(query: string) => void

A callback that is fired when the data fields change.

onChangeColumns
(query: string) => void

A callback that is fired when the data columns change.

onAddToDashboardComplete
(report: QuillReport) => void

A callback that is fired when a new report has been added to a dashboard.

isChartBuilderHorizontalView
boolean
default: true

Whether the ReportBuilder is in admin mode (default: true).

isChartBuilderEnabled
boolean
default: true

A callback that is fired when the data columns change.

isNewQueryEnabled
boolean
default: true

Whether the “new query” button is enabled.

showTableFormatOptions
boolean
default: true

Whether to show table format options.

showDateFieldOptions
boolean
default: true

Whether to show date field options.

showAccessControlOptions
boolean
default: true

Whether to show access control options.

report
QuillReport

An existing report to edit.

defaultQuery
string

The default query to use as a placeholder.

destinationDashboard
string

The default dashboard to add reports to.

chartBuilderTitle
string

The title of the ChartBuilder dialog.

chartBuilderButtonLabel
string

The label of the button to add the current query to a dashboard.

addToDashboardButtonLabel
string
default: "Add to dashboard"

The label of the button to open the ChartBuilder dialog.

organizationName
string

The name of the current organization.

className
string

Styles the top-level container of the SQLEditor.

This can be useful for TailwindCSS-style classname strings.

containerStyle
CSSProperties

Custom styling properties for the ReportBuilder’s top-level container.