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

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

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

Ant Design
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 (
    <ReportBuilder
      destinationDashboard="Transactions"
      TableComponent={AntTable}
      SidebarComponent={AntSidebar}
      ContainerComponent={AntContainer}
      PopoverComponent={AntPopover}
      CardComponent={AntCard}
      ButtonComponent={AntButton}
      ModalComponent={AntModal}
      SecondaryButtonComponent={AntSecondaryButton}
      TextInputComponent={AntTextInput}
      SelectComponent={AntSelect}
      TabsComponent={AntTabs}
      CheckboxComponent={AntCheckbox}
      SelectColumnComponent={AntSelectColumn}
      DraggableColumnComponent={AntDraggableColumn}
      SidebarHeadingComponent={AntSidebarHeading}
      FilterPopoverComponent={AntFilterPopover}
      SortPopoverComponent={AntSortPopover}
      LimitPopoverComponent={AntLimitPopover}
      LabelComponent={AntLabel}
      HeaderComponent={AntHeader}
      SubHeaderComponent={AntSubHeader}
      TextComponent={AntText}
      DeleteButtonComponent={AntDeleteButton}
      ErrorMessageComponent={AntErrorMessageComponent}
      ChartBuilderInputRowContainer={AntChartBuilderInputRowContainer}
      ChartBuilderInputColumnContainer={AntChartBuilderInputColumnContainer}
      PivotRowContainer={AntPivotRowContainer}
      PivotColumnContainer={AntPivotColumnContainer}
      LoadingComponent={AntLoadingComponent}
      ColumnSearchEmptyState={AntColumnSearchEmptyState}
      ChartBuilderFormContainer={AntChartBuilderFormContainer}
    />
  );
}

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.

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

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

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.

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

function App() {
  return (
    <QuillProvider organizationId="2" publicKey="6579031b3e41c378aa8180ec">
      <ReportBuilder reportId="664283fb4db8ad000bfe54d7" />
    </QuillProvider>
  );
}

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.

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

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

Props

initialTableName
string

The default table name to show when first loading the ReportBuilder.

See the prefetch data example to see an example of how this is used.
destinationDashboard
string

The dashboard to add reports to once they have been created.

Checkout our UI examples to see how this is used.
organizationName
string

The organization that will own the report created through this flow.

When using ReportBuilder in your product, you can use this prop to allow your users to create reports for only their organization.
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.

ModalComponent
(props: ModalComponentProps) => JSX.Element

A modal component.

ChartBuilderModalComponent
(props: ModalComponentProps) => JSX.Element

A modal component.

SelectComponent
(props: SelectComponentProps) => JSX.Element

A select component.

TableComponent
(props: TableComponentProps) => JSX.Element

A table component.

PopoverComponent
(props: PopoverComponentProps) => JSX.Element

A popover component.

FilterPopoverComponent
(props: FilterPopoverComponentProps) => JSX.Element

A popover component for filters created in the report builder.

SortPopoverComponent
(props: SortPopoverComponentProps) => JSX.Element

A popover component for sort items created in the report builder.

LimitPopoverComponent
(props: LimitPopoverComponentProps) => JSX.Element

A popover component for limits created in the report builder.

TabsComponent
(props: TabsComponentProps) => JSX.Element

A small navigation menu used to switch between two or more states.

CheckboxComponent
(props: CheckboxComponentProps) => JSX.Element

A checkbox component.

SidebarComponent
(props: SidebarComponentProps) => JSX.Element

A container for the left sidebar.

ContainerComponent
(props: ContainerComponentProps) => JSX.Element

A container for the main content (everything right of the sidebar).

LoadingComponent
() => JSX.Element

A component to show while the query results are loading.

SelectColumnComponent
(props: SelectColumnComponentProps) => JSX.Element

A component to show selected columns.

DraggableColumnComponent
(props: DraggableColumnComponentProps) => JSX.Element

A draggable component used to reorder columns.

SidebarHeadingComponent
(props: SidebarHeadingComponentProps) => JSX.Element

A heading element for the sidebar.

CardComponent
(props: CardComponentProps) => JSX.Element

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

LabelComponent
(props: LabelComponentProps) => JSX.Element

A label component.

HeaderComponent
(props: HeaderComponentProps) => JSX.Element

A header component.

TextComponent
(props: TextComponentProps) => JSX.Element

A simple text component.

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

A sub-header component describes a group of inputs.

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.

ColumnSearchEmptyState
() => JSX.Element

A component to show when no columns match the user’s query.

isAdminEnabled
boolean
default: false

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

isAIEnabled
boolean
default: true

Whether the ReportBuilder’s AI features are enabled (default: true).

pivotRecommendationsEnabled
boolean

Whether the PivotModal’s AI features are enabled.

showChartBuilderTableFormatOptions
boolean

Whether to show the table format options on the ChartBuilder form.

className
CSSProperties

Applies the following classes to the ReportBuilder.

This can be useful for TailwindCSS-style classname strings.

containerStyle
CSSProperties

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

reportId
string

A report id that the Report Builder will query from and modify.

See the report id example to see an example of how this is used.
onSubmitCreateReport
(report: QuillReport) => void

A callback function that will trigger when a new report is created.

onSubmitEditReport
(report: QuillReport) => void

A callback function that will trigger when a existing report is edited.

hideCopySQL
boolean
default: true

Whether to hide the copy SQL button.

isChartBuilderHorizontalView
boolean
default: true

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.