import { QuillProvider , ReportBuilder } from "@quillsql/react" ;
function App () {
return (
< QuillProvider tenants = { [ 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 Material 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 }
/>
);
}
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 }
/>
);
}
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 (
< ReportBuilder
destinationDashboard = "Transactions"
TableComponent = { MaterialTable }
SidebarComponent = { MaterialSidebar }
ContainerComponent = { MaterialContainer }
PopoverComponent = { MaterialPopover }
CardComponent = { MaterialCard }
ButtonComponent = { MaterialButton }
ModalComponent = { MaterialModal }
SecondaryButtonComponent = { MaterialSecondaryButton }
TextInputComponent = { MaterialTextInput }
SelectComponent = { MaterialSelect }
TabsComponent = { MaterialTabs }
CheckboxComponent = { MaterialCheckbox }
SelectColumnComponent = { MaterialSelectColumn }
DraggableColumnComponent = { MaterialDraggableColumn }
SidebarHeadingComponent = { MaterialSidebarHeading }
FilterPopoverComponent = { MaterialFilterPopover }
SortPopoverComponent = { MaterialSortPopover }
LimitPopoverComponent = { MaterialLimitPopover }
LabelComponent = { MaterialLabel }
HeaderComponent = { MaterialHeader }
SubHeaderComponent = { MaterialSubHeader }
TextComponent = { MaterialText }
DeleteButtonComponent = { MaterialDeleteButton }
ErrorMessageComponent = { MaterialErrorMessageComponent }
ChartBuilderInputRowContainer = { MaterialChartBuilderInputRowContainer }
ChartBuilderInputColumnContainer = {
MaterialChartBuilderInputColumnContainer
}
PivotRowContainer = { MaterialPivotRowContainer }
PivotColumnContainer = { MaterialPivotColumnContainer }
ColumnSearchEmptyState = { MaterialColumnSearchEmptyState }
ChartBuilderFormContainer = { MaterialChartBuilderFormContainer }
/>
);
}
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 tenants = { [ 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 tenants = { [ 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 tenants = { [ 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.
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.
export function ButtonComponent ({ onClick , label , disabled , icon }) {
return (
< button onClick = { onClick } disabled = { disabled } >
{ icon }
{ label }
</ button >
);
}
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.
SecondaryButtonComponent
(props: ButtonComponentProps) => JSX.Element
A secondary button component.
export function SecondaryButtonComponent ({ onClick , label , disabled , icon }) {
return (
< button onClick = { onClick } disabled = { disabled } >
{ icon }
{ label }
</ button >
);
}
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.
DeleteButtonComponent
(props: DeleteButtonComponentProps) => JSX.Element
A small delete button used to click out of things. Usually an “X” icon.
import { deleteSVG } from "./ui/icons" ;
export function DeleteButtonComponent ({ onClick }) {
return < button onClick = { onClick } > { deleteSVG } </ button > ;
}
DeleteButtonComponentProps
A callback fired when the button is clicked.
TextInputComponent
(props: TextInputComponentProps) => JSX.Element
A input element for getting text from the user.
export function TextInputComponent ({ id , width , value , label , placeholder , onChange }) {
return (
< label >
{ label }
< input
id = { id }
style = { { width } }
value = { value }
placeholder = { placeholder }
onChange = { onChange }
/>
</ label >
);
}
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.
onChange
(event: ChangeEvent<HTMLInputElement>) => void
required
An event callback that is fired when the input value changes.
ModalComponent
(props: ModalComponentProps) => JSX.Element
A modal component.
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 >
);
}
Whether the modal is open.
setIsOpen
(isOpen: boolean) => void
required
A callback to set whether the modal is open.
The title of the modal, if any.
The width of the modal, in pixels.
The height of the modal, in pixels.
ChartBuilderModalComponent
(props: ModalComponentProps) => JSX.Element
A modal component.
import { Modal } from "./ui/modal" ;
export function ChartBuilderModalComponent ({ isOpen , setIsOpen , title , children , width , height }) {
return (
< Modal
isOpen = { isOpen }
setIsOpen = { setIsOpen }
title = { title }
style = { { width , height } }
>
{ children }
</ Modal >
);
}
Whether the modal is open.
setIsOpen
(isOpen: boolean) => void
required
A callback to set whether the modal is open.
The title of the modal, if any.
The width of the modal, in pixels.
The height of the modal, in pixels.
SelectComponent
(props: SelectComponentProps) => JSX.Element
A select component.
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 >
);
}
The value of the select element.
The label above the select element.
The width of the select element, in pixels.
onChange
(event: ChangeEvent<HTMLSelectElement>) => void
required
An event callback that is fired when the select value changes.
options
{ value: string; label: string; }[]
required
An array of value, label pairs which represent the select options.
TableComponent
(props: TableComponentProps) => JSX.Element
A table component.
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 } /> ;
}
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.
Whether the table is loading.
PopoverComponent
(props: PopoverComponentProps) => JSX.Element
A popover component.
import { Popover } from "./ui/popover" ;
export function PopoverComponent ({ isOpen , setIsOpen , popoverTitle , popoverChildren }) {
return (
< Popover isOpen = { isOpen } setIsOpen = { setIsOpen } title = { popoverTitle } >
{ popoverChildren }
</ Popover >
);
}
Whether the popover is open.
setIsOpen
(isOpen: boolean) => void
required
A callback to set whether the popover is open.
The label of the popover trigger, if any.
The title of the popover, if any.
FilterPopoverComponent
(props: FilterPopoverComponentProps) =>
JSX.Element
A popover component for filters created in the report builder.
import { Popover } from "./ui/popover" ;
export function FilterPopoverComponent ({ isOpen , setIsOpen , popoverTitle , popoverChildren }) {
return (
< Popover isOpen = { isOpen } setIsOpen = { setIsOpen } title = { popoverTitle } >
{ popoverChildren }
</ Popover >
);
}
FilterPopoverComponentProps
Whether the popover is open.
setIsOpen
(isOpen: boolean) => void
required
A callback to set whether the popover is open.
The title of the popover, if any.
The text contents of the filter item.
onClickDelete
(event: MouseEvent<HTMLElement>) => void
required
An event callback fired when the user clicks the delete button on the
filter.
SortPopoverComponent
(props: SortPopoverComponentProps) => JSX.Element
A popover component for sort items created in the report builder.
import { Popover } from "./ui/popover" ;
export function SortPopoverComponent ({ isOpen , setIsOpen , popoverTitle , popoverChildren }) {
return (
< Popover isOpen = { isOpen } setIsOpen = { setIsOpen } title = { popoverTitle } >
{ popoverChildren }
</ Popover >
);
}
SortPopoverComponentProps
Whether the popover is open.
setIsOpen
(isOpen: boolean) => void
required
A callback to set whether the popover is open.
The title of the popover, if any.
The text contents of the sort item.
onClickDelete
(event: MouseEvent<HTMLElement>) => void
required
An event callback fired when the user clicks the delete button on the
sort item.
LimitPopoverComponent
(props: LimitPopoverComponentProps) => JSX.Element
A popover component for limits created in the report builder.
import { Popover } from "./ui/popover" ;
export function LimitPopoverComponent ({ isOpen , setIsOpen , popoverTitle , popoverChildren }) {
return (
< Popover isOpen = { isOpen } setIsOpen = { setIsOpen } title = { popoverTitle } >
{ popoverChildren }
</ Popover >
);
}
LimitPopoverComponentProps
Whether the popover is open.
setIsOpen
(isOpen: boolean) => void
required
A callback to set whether the popover is open.
The title of the popover, if any.
The text contents of the limit.
onClickDelete
(event: MouseEvent<HTMLElement>) => void
required
An event callback fired when the user clicks the delete button on the
limit.
TabsComponent
(props: TabsComponentProps) => JSX.Element
A small navigation menu used to switch between two or more states.
import { Tabs , Tab } from "./ui/tabs" ;
export function TabsComponent ({ value , onChange , options }) {
return (
< Tabs value = { value } onChange = { onChange } >
{ options . map (({ value , label }) => < Tab value = { value } > { label } </ Tab > ) }
</ Tabs >
);
}
The value of the currently selected tab.
onChange
(event: ChangeEvent<HTMLSelectElement>) => void
required
An event callback fired when the selected tab changes.
options
{ label: string; value: string; }[]
required
An array of value, label pairs which represent the tabs to display.
CheckboxComponent
(props: CheckboxComponentProps) => JSX.Element
A checkbox component.
export function CheckboxComponent ({ isChecked , label , onChange }) {
return (
< label >
< input type = "checkbox" checked = { isChecked } onChange = { onChange } />
{ label }
</ label >
);
}
Whether the checkbox is checked.
A label for the checkbox component.
onChange
(event: React.ChangeEvent<HTMLInputElement>) => void
required
An event callback fired when the checkbox’s value changes.
A container for the left sidebar.
export function SidebarComponent ({ children }) {
const style = {
display: "flex" ,
flexDirection: "column" ,
gap: 24 ,
}
return < aside style = { style } > { children } </ aside >
}
The children of the sidebar container.
ContainerComponent
(props: ContainerComponentProps) => JSX.Element
A container for the main content (everything right of the sidebar).
export function ContainerComponent ({ children }) {
const style = {
display: "flex" ,
flexDirection: "column" ,
gap: 24 ,
}
return < main style = { style } > { children } </ main >
}
The children of the main container.
A component to show while the query results are loading.
SelectColumnComponent
(props: SelectColumnComponentProps) =>
JSX.Element
A component to show selected columns.
export function SelectColumnComponent ({ label , isSelected , setSelected , DragHandle }) {
return (
< div >
< DragHandle />
< input type = "checkbox" isChecked = { isSelected } onClick = { setSelected } />
{ label }
</ div >
);
}
SelectColumnComponentProps
The label of the selected column.
Whether this column has been selected.
A callback that is fired when the user checks this columns’ checkbox.
DragHandle
({ dragIcon }: { dragIcon: () => JSX.Element }) => JSX.Element
The handle the user drags this column by.
DraggableColumnComponent
(props: DraggableColumnComponentProps) => JSX.Element
A draggable component used to reorder columns.
import { DeleteSVG } from "./ui/icons" ;
export function DraggableColumnComponent ({ label , onDelete , DragHandle }) {
return (
< div >
< DragHandle />
{ label }
< button onClick = { onDelete } >
< DeleteSVG />
</ button >
</ div >
);
}
DraggableColumnComponentProps
The label of the draggable column.
A callback that is fired when this column is removed from the query.
DragHandle
({ dragIcon }: { dragIcon: () => JSX.Element }) => JSX.Element
The handle the user drags this column by.
A heading element for the sidebar.
export function SidebarHeadingComponent ({ label }) {
return < h2 > { label } </ h2 > ;
}
The text content of the sidebar heading.
CardComponent
(props: CardComponentProps) => JSX.Element
A card component used as a dismissable container of pivot information.
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 >
);
}
The children of the container.
A callback that is fired when the card is clicked.
A callback that is fired the card is deleted.
LabelComponent
(props: LabelComponentProps) => JSX.Element
A label component.
export function LabelComponent ({ label }) {
return < h4 > { label } </ h4 > ;
}
The text content of the element.
A header component.
export function HeaderComponent ({ label }) {
return < h2 > { label } </ h2 > ;
}
The text content of the element.
TextComponent
(props: TextComponentProps) => JSX.Element
A simple text component.
export function TextComponent ({ label }) {
return < p > { label } </ p > ;
}
The text content of the element.
A sub-header component describes a group of inputs.
export function SubHeaderComponent ({ label }) {
return < h3 > { label } </ h3 > ;
}
The label of the sub-header component.
ChartBuilderInputRowContainer
(props: { children: ReactNode }) => JSX.Element
A container for each row of inputs for the ChartBuilder form.
export function ChartBuilderInputRowContainer ({ children }) {
const style = {
display: "flex" ,
flexDirection: "row" ,
gap: 12 ,
}
return < div style = { style } > { children } </ div >
}
ChartBuilderInputRowContainerProps
The children of the container.
ChartBuilderInputColumnContainer
(props: { children: ReactNode }) => JSX.Element
A container for vertically-stacked rows of inputs for the ChartBuilder form.
export function ChartBuilderInputColumnContainer ({ children }) {
const style = {
display: "flex" ,
flexDirection: "column" ,
gap: 12 ,
}
return < div style = { style } > { children } </ div >
}
ChartBuilderInputColumnContainerProps
The children of the container.
PivotRowContainer
(props: { children: ReactNode }) => JSX.Element
A container for each row of inputs for the pivot form.
export function PivotRowContainer ({ children }) {
const style = {
display: "flex" ,
flexDirection: "row" ,
gap: 12 ,
}
return < div style = { style } > { children } </ div >
}
The children of the container.
PivotColumnContainer
(props: { children: ReactNode }) => JSX.Element
A container for vertically-stacked rows of inputs for the pivot form.
export function PivotColumnContainer ({ children }) {
const style = {
display: "flex" ,
flexDirection: "column" ,
gap: 12 ,
}
return < div style = { style } > { children } </ div >
}
PivotColumnContainerProps
The children of the container.
ChartBuilderFormContainer
(props: { children: ReactNode }) => JSX.Element
A container for vertically-stacked sections of the chart builder form.
export function ChartBuilderFormContainer ({ children }) {
const style = {
display: "flex" ,
flexDirection: "column" ,
gap: 18 ,
}
return < div style = { style } > { children } </ div >
}
ChartBuilderFormContainerProps
The children of the container.
ErrorMessageComponent
(props: { children: ReactNode }) => JSX.Element
A component that displays error messages.
export function ErrorMessageComponent ({ errorMessage }) {
return < div > { errorMessage } </ div >
}
ErrorMessageComponentProps
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
).
pivotRecommendationsEnabled
Whether the PivotModal’s AI features are enabled.
showChartBuilderTableFormatOptions
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.
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.
Whether to hide the copy SQL button.
isChartBuilderHorizontalView
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.