> ## Documentation Index
> Fetch the complete documentation index at: https://quill.co/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Table
> The Tabular view of a Quill Report
```tsx App.tsx theme={null}
import { QuillProvider, Table } from "@quillsql/react";
const MyTable = () => (
);
```
A simple component that displays the given data as a table.
Make sure `QuillProvider` is a parent of the `Table` component.
## Examples
[![Edit \[Ant Design\] Quill React Components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/ant-design-quill-react-components-9qcs8k?embed=1)
```tsx theme={null}
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 ;
}
```
[![Edit \[Material Design\] Quill React Components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/material-design-quill-react-components-d862dk?embed=1)
```tsx theme={null}
import { Table, useQuill } from "@quillsql/react";
import { MaterialTable } from "./ui/ant/Table";
export function MaterialDesignTable() {
const report = useQuill("6644088e6e2470000cbdb109");
if (!report || !report.data) return null;
return (
);
}
```
### 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.
```jsx theme={null}
import { QuillProvider, Table } from "@quillsql/react";
function App() {
return (
);
}
```
### 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.
```jsx Using raw data theme={null}
import { QuillProvider, Table } from "@quillsql/react";
function App() {
return (
);
}
```
```jsx Using useQuill theme={null}
import { QuillProvider, Table } from "@quillsql/react";
import { MY_TABLE_ID } from "./constants";
function App() {
const report = useQuill(MY_TABLE_ID);
return (
);
}
```
## 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
BI Platform 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.
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.
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.
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.