> ## Documentation Index
> Fetch the complete documentation index at: https://quill.co/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# SQLEditor
> A UI component for creating and editing Quill Reports with SQL
```tsx App.tsx theme={null}
import { QuillProvider, SQLEditor } from "@quillsql/react";
function App() {
return (
);
}
```
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
[![Edit \[Ant Design\] Quill React Components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/ant-design-quill-react-components-9qcs8k?embed=1)
```tsx theme={null}
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 (
);
}
```
[![Edit \[Material Design\] Quill React Components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/material-design-quill-react-components-d862dk?embed=1)
```tsx theme={null}
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 (
);
}
```
## Props
A primary button component.
```jsx Example theme={null}
export function ButtonComponent({ onClick, label, disabled, icon }) {
return (
);
}
```
A callback fired when the button is clicked.
The text content of the button.
Whether the button is disabled.
An icon to put in front of the label.
A secondary button component.
```jsx Example theme={null}
export function SecondaryButtonComponent({ onClick, label, disabled, icon }) {
return (
);
}
```
A callback fired when the button is clicked.
The text content of the button.
Whether the button is disabled.
An icon to put in front of the label.
A small delete button used to click out of things. Usually an "X" icon.
```jsx Example theme={null}
import { deleteSVG } from "./ui/icons";
export function DeleteButtonComponent({ onClick }) {
return ;
}
```
A callback fired when the button is clicked.
A input element for getting text from the user.
```jsx Example theme={null}
export function TextInputComponent({ id, width, value, label, placeholder, onChange }) {
return (
);
}
```
The id of the input element.
The width of the input element in pixels.
The width of the input element in pixels.
A label for the text input.
The placeholder for the input element.
An event callback that is fired when the input value changes.
A select element for letting the user select from a set of options.
```jsx Example theme={null}
export function SelectComponent({ value, label, width, onChange, options }) {
return (
);
}
```
The value of the select.
A label for the select.
The select options.
An event callback that is fired when the selected element changes.
The width of the select element in pixels.
A table component.
```jsx Example theme={null}
import { Table } from "./ui/table";
import { LoadingSkeleton } from "./ui/loading";
export function TableComponent({ rows, columns, isLoading }) {
if (isLoading) return
return
;
}
```
The rows of the table are an array of objects.
The columns of the table are an array of label, field pairs.
Whether the table is loading.
A component to show while the query results are loading.
A card component used as a dismissable container of pivot information.
```jsx Example theme={null}
import { Card } from "./ui/card";
export function CardComponent({ onClick, onDelete, children }) {
const style = { position: 'absolute', top: 0, right: 0 };
return (
{onDelete && }
{children}
);
}
```
The children of the container.
A callback that is fired when the card is clicked.
A callback that is fired the card is deleted.
A modal component to use to open the add to dashboard dialog.
```jsx Example theme={null}
import { Modal } from "./ui/modal";
export function ModalComponent({ isOpen, setIsOpen, title, children, width, height }) {
return (
{children}
);
}
```
Whether the modal is open.
A callback to set whether the modal is open.
The title of the modal, if any.
The body of the modal.
The width of the modal, in pixels.
The height of the modal, in pixels.
A popover component.
```jsx Example theme={null}
import { Popover } from "./ui/popover";
export function PopoverComponent({ isOpen, setIsOpen, popoverTitle, popoverChildren }) {
return (
{popoverChildren}
);
}
```
Whether the modal is open.
A callback to set whether the modal is open.
The label for the trigger of this popover.
The title of the popover.
The children of this popover.
A label component.
```jsx Example theme={null}
export function LabelComponent({ label }) {
return
{label}
;
}
```
The label of the label component.
A header component.
```jsx Example theme={null}
export function HeaderComponent({ label }) {
return
{label}
;
}
```
The label of the header component.
A sub-header component describes a group of inputs.
```jsx Example theme={null}
export function SubHeaderComponent({ label }) {
return
{label}
;
}
```
The label of the sub-header component.
A simple text component.
```jsx Example theme={null}
export function TextComponent({ label }) {
return
{label}
;
}
```
The label of the text component.
A container for each row of inputs for the ChartBuilder form.
The children of the container.
A container for vertically-stacked rows of inputs for the ChartBuilder form.
The children of the container.
A container for each row of inputs for the pivot form.
The children of the container.
A container for vertically-stacked rows of inputs for the pivot form.
The children of the container.
A container for vertically-stacked sections of the chart builder form.
The children of the container.
A component that displays error messages.
```jsx Example theme={null}
export function ErrorMessageComponent({ errorMessage }) {
return
{errorMessage}
}
```
The error message.
A callback that is fired when the query changes.
A callback that is fired when the data changes.
A callback that is fired when the data fields change.
A callback that is fired when the data columns change.
A callback that is fired when a new report has been added to a dashboard.
Whether the ReportBuilder is in admin mode (default: `true`).
A callback that is fired when the data columns change.
Whether the "new query" button is enabled.
Whether to show table format options.
Whether to show date field options.
Whether to show access control options.
An existing report to edit.
The default query to use as a placeholder.
The default dashboard to add reports to.
The title of the ChartBuilder dialog.
The label of the button to add the current query to a dashboard.
The label of the button to open the ChartBuilder dialog.
The name of the current organization.
Styles the top-level container of the SQLEditor.
This can be useful for TailwindCSS-style classname strings.
Custom styling properties for the ReportBuilder's top-level container.
```jsx Example theme={null}
export function ButtonComponent({ onClick, label, disabled, icon }) {
return (
);
}
```
```jsx Example theme={null}
export function SecondaryButtonComponent({ onClick, label, disabled, icon }) {
return (
);
}
```
```jsx Example theme={null}
import { deleteSVG } from "./ui/icons";
export function DeleteButtonComponent({ onClick }) {
return ;
}
```
```jsx Example theme={null}
export function TextInputComponent({ id, width, value, label, placeholder, onChange }) {
return (
);
}
```
```jsx Example theme={null}
export function SelectComponent({ value, label, width, onChange, options }) {
return (
);
}
```
```jsx Example theme={null}
import { Table } from "./ui/table";
import { LoadingSkeleton } from "./ui/loading";
export function TableComponent({ rows, columns, isLoading }) {
if (isLoading) return 
```jsx Example theme={null}
import { Card } from "./ui/card";
export function CardComponent({ onClick, onDelete, children }) {
const style = { position: 'absolute', top: 0, right: 0 };
return (
```jsx Example theme={null}
import { Modal } from "./ui/modal";
export function ModalComponent({ isOpen, setIsOpen, title, children, width, height }) {
return (
```jsx Example theme={null}
import { Popover } from "./ui/popover";
export function PopoverComponent({ isOpen, setIsOpen, popoverTitle, popoverChildren }) {
return (
```jsx Example theme={null}
export function LabelComponent({ label }) {
return 
```jsx Example theme={null}
export function HeaderComponent({ label }) {
return 
```jsx Example theme={null}
export function SubHeaderComponent({ label }) {
return 
```jsx Example theme={null}
export function TextComponent({ label }) {
return 
```jsx Example theme={null}
export function ErrorMessageComponent({ errorMessage }) {
return