Table
The Tabular view of a Quill Report
import { QuillProvider, Table } from "@quillsql/react";
const MyTable = () => (
<QuillProvider organizationId="2" publicKey="6579031b3e41c378aa8180ec">
<Table reportId="6644088e6e2470000cbdb109" />
</QuillProvider>
);
A simple component that displays the given data as a table.
QuillProvider
is a parent of the Table
component.Examples
import { Table, useQuill } from "@quillsql/react";
import { AntTable } from "./ui/ant/Table";
export function AntDesignTable() {
const report = useQuill("6644088e6e2470000cbdb109");
if (!report || !report.data) return null;
return <AntTable rows={report.data.rows} columns={report.data.columns} />;
}
Automatically fetch data by id
If you know the id of the table you would like to display, you can pass in the reportId to the Table component and it will load and display the data for that table.
import { QuillProvider, Table } from "@quillsql/react";
function App() {
return (
<QuillProvider organizationId="2" publicKey="6579031b3e41c378aa8180ec">
<Table reportId="664283fb4db8ad000bfe54d7" />
</QuillProvider>
);
}
Pass data directly into the table
Alternatively, if you have the actual data you would like to display (eg. you fetched the data using our useQuill
hook) you can also pass in that data directly to the Table component and it will display that data without doing any async fetching.
Props
The table’s id. The most usage is through a detail page built to navigate from the dashboard - using the onClick callback to get the report id, and navigating to a route (say, reports/:id) where the url param is passed in as the reportId. For a standalone table, you can find the reportId in the Quill Portal and pass it in directly.
When a reportId
is passed, the table will first fetch the data necessary
to render this table, and then it will render the rows and columns that it
receives from the server.
reportId
must be passed if rows
and columns
are not present.The rows of the table to show, if any.
When rows
and columns
are passed, the table will not refetch the given
report and will instead simply render the rows and columns it was given.
rows
and columns
must be passed if reportId
is not present.The columns of the table to show, if any.
When rows
and columns
are passed, the table will not refetch the given
report and will instead simply render the rows and columns it was given.
rows
and columns
must be passed if reportId
is not present.The placeholder filename to use when downloading this table as a csv file.
Whether to hide the download csv button.
Whether this table component is loading.
A callback that is fired when the user clicks download csv.
A loading component to show when the table is loading.
Styles the top-level container of the Table.
This can be useful for TailwindCSS-style classname strings.
The CSS styles that wrap the table.