ReportBuilder
A UI component for creating and editing Quill Reports
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
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.
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.
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.
import { QuillProvider, ReportBuilder } from "@quillsql/react";
function App() {
return (
<QuillProvider organizationId="2" publicKey="6579031b3e41c378aa8180ec">
<ReportBuilder />
</QuillProvider>
);
}
Props
The default table name to show when first loading the ReportBuilder.
The dashboard to add reports to once they have been created.
The organization that will own the report created through this flow.
A primary button component.
A secondary button component.
A small delete button used to click out of things. Usually an “X” icon.
A input element for getting text from the user.
A modal component.
A modal component.
A select component.
A table component.
A popover component.
A popover component for filters created in the report builder.
A popover component for sort items created in the report builder.
A popover component for limits created in the report builder.
A small navigation menu used to switch between two or more states.
A checkbox component.
A container for the left sidebar.
A container for the main content (everything right of the sidebar).
A component to show while the query results are loading.
A component to show selected columns.
A draggable component used to reorder columns.
A heading element for the sidebar.
A card component used as a dismissable container of pivot information.
A label component.
A header component.
A simple text component.
A sub-header component describes a group of inputs.
A container for each row of inputs for the ChartBuilder form.
A container for vertically-stacked rows of inputs for the ChartBuilder form.
A container for each row of inputs for the pivot form.
A container for vertically-stacked rows of inputs for the pivot form.
A container for vertically-stacked sections of the chart builder form.
A component that displays error messages.
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.
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.