SQLEditor
A UI component for creating and editing Quill Reports with SQL
import { QuillProvider, SQLEditor } from "@quillsql/react";
function App() {
return (
<QuillProvider organizationId="2" publicKey="6579031b3e41c378aa8180ec">
<SQLEditor />
</QuillProvider>
);
}
Allows your users to build and write custom SQL queries and then add those queries into their dashboard as a metric, chart, or table.
QuillProvider
is a parent of the SQLEditor
component.Examples
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 (
<SQLEditor
ButtonComponent={AntButton}
SecondaryButtonComponent={AntSecondaryButton}
TextInputComponent={AntTextInput}
SelectComponent={AntSelectComponent}
TableComponent={AntTable}
/>
);
}
Props
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 select element for letting the user select from a set of options.
A table component.
A component to show while the query results are loading.
A card component used as a dismissable container of pivot information.
A modal component to use to open the add to dashboard dialog.
A popover component.
A label component.
A header component.
A sub-header component describes a group of inputs.
A simple text component.
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 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.