The csv component
Lets the user download data as a CSV file. Each column from the items in the component will map to a column in the resulting CSV.
When csv is used as a header component (without a shell), it will trigger a download of the CSV file directly on page load.
If the csv file to download is large, we recommend using this approach.
When used inside a page (after calling the shell component), this will add a button to the page that lets the user download the CSV file. The button will need to load the entire contents of the CSV file in memory, inside the browser, even if the user does not click on it. If the csv file to download is large, we recommend using this component without a shell component in order to efficiently stream the data to the browser.
Top-level parameters
| name | required | type | description |
|---|---|---|---|
| title | REQUIRED | TEXT |
The text displayed on the download button. |
| bom | BOOLEAN |
Whether to include a Byte Order Mark (a special character indicating the character encoding) at the beginning of the file. This is useful for Excel compatibility. | |
| class | TEXT |
class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0. | |
| color | Color of the button. Ignored when used as a header component. | ||
| filename | TEXT |
The name of the file that should be downloaded (without the extension). | |
| icon | Name of the icon (from tabler-icons.io) to display in the button. Ignored when used as a header component. | ||
| id | TEXT |
id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url). | |
| separator | TEXT |
How individual values should be separated in the CSV. "," by default, set it to "\t" for tab-separated values. | |
| size | TEXT |
The size of the button (e.g., sm, lg). Ignored when used as a header component. |
| No data |
Example 1
Header component: creating a CSV download URL
You can create a page that will trigger a download of the CSV file when the user visits it. The contents will be streamed efficiently from the database to the browser, without being fully loaded in memory. This makes it possible to download even very large files without overloading the database server, the web server, or the client's browser.
csv_download.sql
select 'csv' as component, 'example.csv' as filename;
SELECT * FROM my_large_table;
index.sql
select
'button' as component;
select
'Download my data' as title,
'/examples/csv_download.sql' as link;Result
Example 2
CSV download button
This will generate a button to download the CSV file. The button element itself will embed the entire contents of the CSV file, so it should not be used for large files. The file will be entirely loaded in memory on the user's browser, even if the user does not click on the button. For smaller files, this is easier and faster to use than creating a separate SQL file to generate the CSV.
select
'csv' as component,
'Download my data' as title,
'people' as filename,
'file-download' as icon,
'green' as color,
';' as separator,
TRUE as bom;
select
'Ophir' as Forename,
'Lojkine' as Surname,
'lovasoa' as Pseudonym;
select
'Linus' as Forename,
'Torvalds' as Surname,
'torvalds' as Pseudonym;