> ## 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.
# ReportBuilder
> A UI component for creating and editing Quill Reports
```tsx App.tsx theme={null}
import { QuillProvider, ReportBuilder } from "@quillsql/react";
function App() {
return (
);
}
```
Allows non-technical users to build SQL queries using either UI or AI and
then edit them on the fly. Once users have constructed a query they like,
they can click a button and add that report to their dashboard or export it
as a CSV.
Make sure `QuillProvider` is a parent of the `ReportBuilder` 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 Ant Design theme={null}
import { ReportBuilder } from "@quillsql/react";
import {
AntButton,
AntDeleteButton,
AntSecondaryButton,
} from "./ui/ant/Button";
import { AntCard } from "./ui/ant/Card";
import { AntCheckbox } from "./ui/ant/Checkbox";
import {
AntSelectColumn,
AntDraggableColumn,
AntColumnSearchEmptyState,
} from "./ui/ant/Column";
import { AntTextInput } from "./ui/ant/Input";
import {
AntChartBuilderFormContainer,
AntChartBuilderInputColumnContainer,
AntChartBuilderInputRowContainer,
AntContainer,
AntErrorMessageComponent,
AntLoadingComponent,
AntPivotColumnContainer,
AntPivotRowContainer,
AntSidebar,
} from "./ui/ant/Layout";
import { AntModal } from "./ui/ant/Modal";
import {
AntPopover,
AntFilterPopover,
AntSortPopover,
AntLimitPopover,
} from "./ui/ant/Popover";
import { AntSelect } from "./ui/ant/Select";
import { AntTable } from "./ui/ant/Table";
import { AntTabs } from "./ui/ant/Tabs";
import {
AntSidebarHeading,
AntLabel,
AntHeader,
AntText,
AntSubHeader,
} from "./ui/ant/Typography";
export function AntReportBuilder() {
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 Material Design theme={null}
import { ReportBuilder } from "@quillsql/react";
import {
MaterialButton,
MaterialDeleteButton,
MaterialSecondaryButton,
} from "./ui/material/Button";
import { MaterialCard } from "./ui/material/Card";
import { MaterialCheckbox } from "./ui/material/Checkbox";
import {
MaterialSelectColumn,
MaterialDraggableColumn,
MaterialColumnSearchEmptyState,
} from "./ui/material/Column";
import { MaterialTextInput } from "./ui/material/Input";
import {
MaterialChartBuilderFormContainer,
MaterialChartBuilderInputColumnContainer,
MaterialChartBuilderInputRowContainer,
MaterialContainer,
MaterialErrorMessageComponent,
MaterialPivotColumnContainer,
MaterialPivotRowContainer,
MaterialSidebar,
} from "./ui/material/Layout";
import { MaterialModal } from "./ui/material/Modal";
import {
MaterialPopover,
MaterialFilterPopover,
MaterialSortPopover,
MaterialLimitPopover,
} from "./ui/material/Popover";
import { MaterialSelect } from "./ui/material/Select";
import { MaterialTable } from "./ui/material/Table";
import { MaterialTabs } from "./ui/material/Tabs";
import {
MaterialSidebarHeading,
MaterialLabel,
MaterialHeader,
MaterialText,
MaterialSubHeader,
} from "./ui/material/Typography";
export function MaterialReportBuilder() {
return (
);
}
```
### Prefetch data from a particular table
You can pass an `initialTableName` to have the report builder automatically load
data from a particular table in your schema.
```tsx App.tsx theme={null}
import { QuillProvider, ReportBuilder } from "@quillsql/react";
function App() {
return (
);
}
```
### Edit an existing report
You can pass a `reportId` to have the report builder load the metadata for a
pre-existing report. This might be useful if you want to allow your end
users to edit the reports they created.
```tsx App.tsx theme={null}
import { QuillProvider, ReportBuilder } from "@quillsql/react";
function App() {
return (
);
}
```
### Query all views in your Quill schema
By default, the Quill Report Builder will query all tables in your schema and
new reports will be created upon completion.
```tsx App.tsx theme={null}
import { QuillProvider, ReportBuilder } from "@quillsql/react";
function App() {
return (
);
}
```
## Props
The default table name to show when first loading the ReportBuilder.
See the [prefetch data example](/docs/components/report-builder#prefetch-data-from-a-particular-table) to see an example of how this is used.
Sets the dashboard of a report created in the report builder.
Checkout our [UI examples](/docs/components/examples) to see how this is used.
Sets the dashboard section of a report created in the report builder.
Checkout our [UI examples](/docs/components/examples) to see how this is used.
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.
The label of the text input component.
The placeholder for the input element.
An event callback that is fired when the input value changes.
A modal component.
```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 modal component.
```jsx Example theme={null}
import { Modal } from "./ui/modal";
export function ChartBuilderModalComponent({ 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 select component.
```jsx Example theme={null}
export function SelectComponent({ value, label, width, onChange, options }) {
return (
);
}
```
The value of the select element.
The label above the select element.
The width of the select element, in pixels.
An event callback that is fired when the select value changes.
An array of value, label pairs which represent the select options.
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 popover component.
```jsx Example theme={null}
import { Popover } from "./ui/popover";
export function PopoverComponent({ isOpen, setIsOpen, popoverTitle, popoverChildren }) {
return (
{popoverChildren}
);
}
```
Whether the popover is open.
A callback to set whether the popover is open.
The label of the popover trigger, if any.
The title of the popover, if any.
The body of the popover.
A popover component for filters created in the report builder.
```jsx Example theme={null}
import { Popover } from "./ui/popover";
export function FilterPopoverComponent({ isOpen, setIsOpen, popoverTitle, popoverChildren }) {
return (
{popoverChildren}
);
}
```
Whether the popover is open.
A callback to set whether the popover is open.
The title of the popover, if any.
The body of the popover.
The text contents of the filter item.
An event callback fired when the user clicks the delete button on the
filter.
A popover component for sort items created in the report builder.
```jsx Example theme={null}
import { Popover } from "./ui/popover";
export function SortPopoverComponent({ isOpen, setIsOpen, popoverTitle, popoverChildren }) {
return (
{popoverChildren}
);
}
```
Whether the popover is open.
A callback to set whether the popover is open.
The title of the popover, if any.
The body of the popover.
The text contents of the sort item.
An event callback fired when the user clicks the delete button on the
sort item.
A popover component for limits created in the report builder.
```jsx Example theme={null}
import { Popover } from "./ui/popover";
export function LimitPopoverComponent({ isOpen, setIsOpen, popoverTitle, popoverChildren }) {
return (
{popoverChildren}
);
}
```
Whether the popover is open.
A callback to set whether the popover is open.
The title of the popover, if any.
The body of the popover.
The text contents of the limit.
An event callback fired when the user clicks the delete button on the
limit.
A small navigation menu used to switch between two or more states.
```jsx Example theme={null}
import { Tabs, Tab } from "./ui/tabs";
export function TabsComponent({ value, onChange, options }) {
return (
{options.map(({ value, label }) => {label})}
);
}
```
The value of the currently selected tab.
An event callback fired when the selected tab changes.
An array of value, label pairs which represent the tabs to display.
A checkbox component.
```jsx Example theme={null}
export function CheckboxComponent({ isChecked, label, onChange }) {
return (
);
}
```
Whether the checkbox is checked.
A label for the checkbox component.
An event callback fired when the checkbox's value changes.
A container for the left sidebar.
```jsx Example theme={null}
export function SidebarComponent({ children }) {
const style = {
display: "flex",
flexDirection: "column",
gap: 24,
}
return
}
```
The children of the sidebar container.
A container for the main content (everything right of the sidebar).
```jsx Example theme={null}
export function ContainerComponent({ children }) {
const style = {
display: "flex",
flexDirection: "column",
gap: 24,
}
return {children}
}
```
The children of the main container.
A component to show while the query results are loading.
A component to show selected columns.
```jsx Example theme={null}
export function SelectColumnComponent({ label, isSelected, setSelected, DragHandle }) {
return (
{label}
);
}
```
The label of the selected column.
Whether this column has been selected.
A callback that is fired when the user checks this columns' checkbox.
The handle the user drags this column by.
A draggable component used to reorder columns.
```jsx Example theme={null}
import { DeleteSVG } from "./ui/icons";
export function DraggableColumnComponent({ label, onDelete, DragHandle }) {
return (
{label}
);
}
```
The label of the draggable column.
A callback that is fired when this column is removed from the query.
The handle the user drags this column by.
A heading element for the sidebar.
```jsx Example theme={null}
export function SidebarHeadingComponent({ label }) {
return
{label}
;
}
```
The text content of the sidebar heading.
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 label component.
```jsx Example theme={null}
export function LabelComponent({ label }) {
return
{label}
;
}
```
The text content of the element.
A header component.
```jsx Example theme={null}
export function HeaderComponent({ label }) {
return
{label}
;
}
```
The text content of the element.
A simple text component.
```jsx Example theme={null}
export function TextComponent({ label }) {
return
{label}
;
}
```
The text content of the element.
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 container for each row of inputs for the ChartBuilder form.
```jsx Example theme={null}
export function ChartBuilderInputRowContainer({ children }) {
const style = {
display: "flex",
flexDirection: "row",
gap: 12,
}
return
{children}
}
```
The children of the container.
A container for vertically-stacked rows of inputs for the ChartBuilder form.
```jsx Example theme={null}
export function ChartBuilderInputColumnContainer({ children }) {
const style = {
display: "flex",
flexDirection: "column",
gap: 12,
}
return
{children}
}
```
The children of the container.
A container for each row of inputs for the pivot form.
```jsx Example theme={null}
export function PivotRowContainer({ children }) {
const style = {
display: "flex",
flexDirection: "row",
gap: 12,
}
return
{children}
}
```
The children of the container.
A container for vertically-stacked rows of inputs for the pivot form.
```jsx Example theme={null}
export function PivotColumnContainer({ children }) {
const style = {
display: "flex",
flexDirection: "column",
gap: 12,
}
return
{children}
}
```
The children of the container.
A container for vertically-stacked sections of the chart builder form.
```jsx Example theme={null}
export function ChartBuilderFormContainer({ children }) {
const style = {
display: "flex",
flexDirection: "column",
gap: 18,
}
return
{children}
}
```
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 component to show when no columns match the user's query.
Whether the ReportBuilder is in admin mode (default: `false`).
Whether the ReportBuilder's AI features are enabled (default: `true`).
Whether the PivotModal's AI features are enabled.
Whether to show the table format options on the ChartBuilder form.
Applies the following classes to the ReportBuilder.
This can be useful for TailwindCSS-style classname strings.
Custom styling properties for the ReportBuilder's top-level container.
A report id that the Report Builder will query from and modify.
See the [report id example](#edit-an-existing-report) to see an example of how this is used.
A callback function that will trigger when a new report is created.
A callback function that will trigger when a existing report is edited.
Whether to hide the copy SQL button.
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.
```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}
import { Modal } from "./ui/modal";
export function ModalComponent({ isOpen, setIsOpen, title, children, width, height }) {
return (
```jsx Example theme={null}
import { Modal } from "./ui/modal";
export function ChartBuilderModalComponent({ isOpen, setIsOpen, title, children, width, height }) {
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 { Popover } from "./ui/popover";
export function PopoverComponent({ isOpen, setIsOpen, popoverTitle, popoverChildren }) {
return (
```jsx Example theme={null}
import { Popover } from "./ui/popover";
export function FilterPopoverComponent({ isOpen, setIsOpen, popoverTitle, popoverChildren }) {
return (
```jsx Example theme={null}
import { Popover } from "./ui/popover";
export function SortPopoverComponent({ isOpen, setIsOpen, popoverTitle, popoverChildren }) {
return (
```jsx Example theme={null}
import { Popover } from "./ui/popover";
export function LimitPopoverComponent({ isOpen, setIsOpen, popoverTitle, popoverChildren }) {
return (
```jsx Example theme={null}
import { Tabs, Tab } from "./ui/tabs";
export function TabsComponent({ value, onChange, options }) {
return (
```jsx Example theme={null}
export function CheckboxComponent({ isChecked, label, onChange }) {
return (
);
}
```
```jsx Example theme={null}
export function SidebarComponent({ children }) {
const style = {
display: "flex",
flexDirection: "column",
gap: 24,
}
return
}
```
```jsx Example theme={null}
export function ContainerComponent({ children }) {
const style = {
display: "flex",
flexDirection: "column",
gap: 24,
}
return 
```jsx Example theme={null}
export function SelectColumnComponent({ label, isSelected, setSelected, DragHandle }) {
return (
```jsx Example theme={null}
import { DeleteSVG } from "./ui/icons";
export function DraggableColumnComponent({ label, onDelete, DragHandle }) {
return (
```jsx Example theme={null}
export function SidebarHeadingComponent({ label }) {
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}
export function LabelComponent({ label }) {
return 
```jsx Example theme={null}
export function HeaderComponent({ label }) {
return 
```jsx Example theme={null}
export function TextComponent({ label }) {
return 
```jsx Example theme={null}
export function SubHeaderComponent({ label }) {
return 
```jsx Example theme={null}
export function ChartBuilderInputRowContainer({ children }) {
const style = {
display: "flex",
flexDirection: "row",
gap: 12,
}
return 
```jsx Example theme={null}
export function ChartBuilderInputColumnContainer({ children }) {
const style = {
display: "flex",
flexDirection: "column",
gap: 12,
}
return 
```jsx Example theme={null}
export function PivotRowContainer({ children }) {
const style = {
display: "flex",
flexDirection: "row",
gap: 12,
}
return 
```jsx Example theme={null}
export function PivotColumnContainer({ children }) {
const style = {
display: "flex",
flexDirection: "column",
gap: 12,
}
return 
```jsx Example theme={null}
export function ChartBuilderFormContainer({ children }) {
const style = {
display: "flex",
flexDirection: "column",
gap: 18,
}
return 
```jsx Example theme={null}
export function ErrorMessageComponent({ errorMessage }) {
return