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
![Edit [Ant Design] Quill React Components](https://codesandbox.io/static/img/play-codesandbox.svg)
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.