SQLEditor

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

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

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

ButtonComponent

(props: ButtonComponentProps) => JSX.Element

A primary button component.

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

ButtonComponentProps

object

onClick

() => void

required

A callback fired when the button is clicked.

label

string

required

The text content of the button.

disabled

boolean

Whether the button is disabled.

icon

ReactNode

An icon to put in front of the label.

SecondaryButtonComponent

(props: ButtonComponentProps) => JSX.Element

A secondary button component.

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

ButtonComponentProps

object

onClick

() => void

required

A callback fired when the button is clicked.

label

string

required

The text content of the button.

disabled

boolean

Whether the button is disabled.

icon

ReactNode

An icon to put in front of the label.

DeleteButtonComponent

(props: DeleteButtonComponentProps) => JSX.Element

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

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

DeleteButtonComponentProps

object

onClick

() => void

required

A callback fired when the button is clicked.

TextInputComponent

(props: TextInputComponentProps) => JSX.Element

A input element for getting text from the user.

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

TextInputComponentProps

object

string

required

The id of the input element.

width

number

required

The width of the input element in pixels.

value

string

required

The width of the input element in pixels.

label

string

A label for the text input.

placeholder

string

The placeholder for the input element.

onChange

(event: ChangeEvent<HTMLInputElement>) => void

required

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

SelectComponent

(props: SelectComponentProps) => JSX.Element

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

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

SelectComponentProps

object

value

string

required

The value of the select.

label

string

A label for the select.

options

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

required

The select options.

onChange

(event: ChangeEvent<HTMLInputElement>) => void

required

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

width

number

required

The width of the select element in pixels.

TableComponent

(props: TableComponentProps) => JSX.Element

A table component.

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

TableComponentProps

object

rows

{ [key: string]: any }[]

required

The rows of the table are an array of objects.

columns

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

required

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

isLoading

boolean

Whether the table is loading.

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.

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

CardComponentProps

object

children

ReactNode

required

The children of the container.

onClick

() => void

A callback that is fired when the card is clicked.

onDelete

() => void

A callback that is fired the card is deleted.

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

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

isOpen

boolean

required

Whether the modal is open.

setIsOpen

(isOpen: boolean) => void

required

A callback to set whether the modal is open.

title

string

The title of the modal, if any.

children

ReactNode

required

The body of the modal.

width

number

The width of the modal, in pixels.

height

number

The height of the modal, in pixels.

A popover component.

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

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

isOpen

boolean

required

Whether the modal is open.

setIsOpen

(isOpen: boolean) => void

required

A callback to set whether the modal is open.

triggerLabel

string

The label for the trigger of this popover.

The title of the popover.

The children of this popover.

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