SQLEditor

App.tsx

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

function App() {
  return (
    <QuillProvider tenants={[{ tenantField: "customer_id", tenantIds: [2] }]} publicKey={process.env.QUILL_PUBLIC_KEY}>
      <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

Ant Design
Material Design

Edit [Ant Design] Quill React Components

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}
    />
  );
}

Edit [Material Design] Quill React Components

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

import { MaterialTable } from "./ui/material/Table";
import { MaterialSelect } from "./ui/material/Select";
import { MaterialButton, MaterialSecondaryButton } from "./ui/material/Button";
import { MaterialTextInput } from "./ui/material/Input";

export function MaterialSQLEditor() {
  return (
    <SQLEditor
      ButtonComponent={MaterialButton}
      SecondaryButtonComponent={MaterialSecondaryButton}
      TextInputComponent={MaterialTextInput}
      SelectComponent={MaterialSelect}
      TableComponent={MaterialTable}
    />
  );
}

Props

(props: ButtonComponentProps) => JSX.Element

A primary button component.

Show props

Example

export function ButtonComponent({ onClick, label, disabled, icon }) {
	return (
		<button onClick={onClick} disabled={disabled}>
			{icon}
			{label}
		</button>
	);
}

object

Hide properties

() => void

required

A callback fired when the button is clicked.

string

required

The text content of the button.

boolean

Whether the button is disabled.

ReactNode

An icon to put in front of the label.

(props: ButtonComponentProps) => JSX.Element

A secondary button component.

Show props

Example

export function SecondaryButtonComponent({ onClick, label, disabled, icon }) {
	return (
		<button onClick={onClick} disabled={disabled}>
			{icon}
			{label}
		</button>
	);
}

object

Hide properties

() => void

required

A callback fired when the button is clicked.

string

required

The text content of the button.

boolean

Whether the button is disabled.

ReactNode

An icon to put in front of the label.

(props: DeleteButtonComponentProps) => JSX.Element

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

Show props

Example

import { deleteSVG } from "./ui/icons";
export function DeleteButtonComponent({ onClick }) {
	return <button onClick={onClick}>{deleteSVG}</button>;
}

object

Hide properties

() => void

required

A callback fired when the button is clicked.

(props: TextInputComponentProps) => JSX.Element

A input element for getting text from the user.

Show props

Example

export function TextInputComponent({ id, width, value, label, placeholder, onChange }) {
	return (
		<label>
			{label}
			<input
				id={id}
				style={{ width }}
				value={value}
				placeholder={placeholder}
				onChange={onChange}
			/>
		</label>
	);
}

object

Hide properties

string

required

The id of the input element.

number

required

The width of the input element in pixels.

string

required

The width of the input element in pixels.

string

A label for the text input.

string

The placeholder for the input element.

(event: ChangeEvent<HTMLInputElement>) => void

required

An event callback that is fired when the input value changes.

(props: SelectComponentProps) => JSX.Element

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

Show props

Example

export function SelectComponent({ value, label, width, onChange, options }) {
	return (
		<label>
			{label}
			<select value={value} onChange={onChange} style={{ width }}>
				{options.map(({ value, label }) => <option value={value}>{label}</option>)}
			</select>
		</label>
	);
}

object

Hide properties

string

required

The value of the select.

string

A label for the select.

{ value: string; label: string; }[]

required

The select options.

(event: ChangeEvent<HTMLInputElement>) => void

required

An event callback that is fired when the selected element changes.

number

required

The width of the select element in pixels.

(props: TableComponentProps) => JSX.Element

A table component.

Show props

Example

import { Table } from "./ui/table";
import { LoadingSkeleton } from "./ui/loading";

export function TableComponent({ rows, columns, isLoading }) {
	if (isLoading) return <LoadingSkeleton />
	return <Table rows={rows} columns={columns} />;
}

object

Hide properties

{ [key: string]: any }[]

required

The rows of the table are an array of objects.

{ label: string; field: string; }[]

required

The columns of the table are an array of label, field pairs.

boolean

Whether the table is loading.

() => JSX.Element

A component to show while the query results are loading.

(props: CardComponentProps) => JSX.Element

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

Show props

Example

import { Card } from "./ui/card";
export function CardComponent({ onClick, onDelete, children }) {
	const style = { position: 'absolute', top: 0, right: 0 };
	return (
		<Card onClick={onClick} style={{ position: 'relative' }}>
			{onDelete && <DeleteButton style={style} onClick={onDelete} />}
			{children}
		</Card>
	);
}

object

Hide properties

ReactNode

required

The children of the container.

() => void

A callback that is fired when the card is clicked.

() => void

A callback that is fired the card is deleted.

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

Show props

Example

import { Modal } from "./ui/modal";
export function ModalComponent({ isOpen, setIsOpen, title, children, width, height }) {
	return (
		<Modal
			isOpen={isOpen}
			setIsOpen={setIsOpen}
			title={title}
			style={{ width, height }}
		>
			{children}
		</Modal>
	);
}

Hide properties

boolean

required

Whether the modal is open.

(isOpen: boolean) => void

required

A callback to set whether the modal is open.

string

The title of the modal, if any.

ReactNode

required

The body of the modal.

number

The width of the modal, in pixels.

number

The height of the modal, in pixels.

A popover component.

Show props

Example

import { Popover } from "./ui/popover";

export function PopoverComponent({ isOpen, setIsOpen, popoverTitle, popoverChildren }) {
	return (
		<Popover isOpen={isOpen} setIsOpen={setIsOpen} title={popoverTitle}>
			{popoverChildren}
		</Popover>
	);
}

Hide properties

boolean

required

Whether the modal is open.

(isOpen: boolean) => void

required

A callback to set whether the modal is open.

string

The label for the trigger of this popover.

The title of the popover.

The children of this popover.

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

A label component.

Show props

Example

export function LabelComponent({ label }) {
	return <h4>{label}</h4>;
}

object

Hide properties

() => void

required

The label of the label component.

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

A header component.

Show props

Example

export function HeaderComponent({ label }) {
	return <h2>{label}</h2>;
}

object

Hide properties

() => void

required

The label of the header component.

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

A sub-header component describes a group of inputs.

Show props

Example

export function SubHeaderComponent({ label }) {
	return <h3>{label}</h3>;
}

object

Hide properties

() => void

required

The label of the sub-header component.

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

A simple text component.

Show props

Example

export function TextComponent({ label }) {
	return <p>{label}</p>;
}

object

Hide properties

() => void

required

The label of the text component.

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

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

Show props

object

Show properties

ReactNode

required

The children of the container.

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

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

Show props

object

Show properties

ReactNode

required

The children of the container.

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

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

Show props

object

Show properties

ReactNode

required

The children of the container.

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

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

Show props

object

Show properties

ReactNode

required

The children of the container.

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

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

Show props

object

Show properties

ReactNode

required

The children of the container.

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

A component that displays error messages.

Show props

Example

export function ErrorMessageComponent({ errorMessage }) {
	return <div>{errorMessage}</div>
}

object

Hide properties

ReactNode

required

The error message.

(query: string) => void

A callback that is fired when the query changes.

(query: string) => void

A callback that is fired when the data changes.

(query: string) => void

A callback that is fired when the data fields change.

(query: string) => void

A callback that is fired when the data columns change.

(report: QuillReport) => void

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

boolean

default:true

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

boolean

default:true

A callback that is fired when the data columns change.

boolean

default:true

Whether the “new query” button is enabled.

boolean

default:true

Whether to show table format options.

boolean

default:true

Whether to show date field options.

boolean

default:true

Whether to show access control options.

QuillReport

An existing report to edit.

string

The default query to use as a placeholder.

string

The default dashboard to add reports to.

string

The title of the ChartBuilder dialog.

string

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

string

default:"Add to dashboard"

The label of the button to open the ChartBuilder dialog.

string

The name of the current organization.

string

Styles the top-level container of the SQLEditor.This can be useful for TailwindCSS-style classname strings.

CSSProperties

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

Getting Started

Use cases

Components

Hooks

Functions

Reference

Examples

Props

​Examples

​Props

Examples

Props