App.tsx
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.

Make sure 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

​
reportId
string

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.

A reportId must be passed if rows and columns are not present.
​
rows
{ [key: string]: any }[]

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.

Both rows and columns must be passed if reportId is not present.
​
columns
{ label: string; field: string; }[]

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.

Both rows and columns must be passed if reportId is not present.
​
csvFilename
string

The placeholder filename to use when downloading this table as a csv file.

​
hideDownloadCSVButton
boolean

Whether to hide the download csv button.

​
isLoading
boolean

Whether this table component is loading.

​
downloadCSV
() => void

A callback that is fired when the user clicks download csv.

​
LoadingComponent
() => JSX.Element

A loading component to show when the table is loading.

​
className
string

Styles the top-level container of the Table.

This can be useful for TailwindCSS-style classname strings.

​
containerStyle
React.CSSProperties

The CSS styles that wrap the table.

ChartSQLEditor