CSV import & export

Importing a CSV file to a Table

Input type file has a special property – parsedValue. It allows you to access the CSV file content as an array of objects without uploading it to the server or parsing it separately.

Use {{ui.input.parsedValue}}.

Here're the steps to show a CSV file inside the Table:

1. Add an Input component, set its type to file.

2. Select a CSV file you need to upload.

3. Add a Table. In the Data property, reference {{ui.input.parsedValue}} as a source. Click Generate Structure.

You can also modify the Table structure, hide columns, change column types.

Now, you can use this data in your app accessing the Component properties {{ui.input.parsedValue}} or {{ui.table.value}} or export them back to CSV.

Exporting a generated file based on the Table data

To create a Table export, you need two Components in UI Bakery:

1. {{ ui.myTable.value}} or {{ ui.myTable.filteredValue }} variable if you need to export a filtered Table list.

2. The Generate File action step.

Start with adding a Table. Fill it with data: you may load it from an API or a database. Then, create an Action and assign it to a Button.

Configure the first step in the Action using Generate file:

Using the Generate file action step

The most essential step here is to reference a variable inside the Generate form field.

You may also want to change the name of the generated file. By default, this step will bring a Save file dialog, or save the file to the Downloads folder depending on the user's operating system.

The generated file content will be returned by this step into the next step and will be available as a {{data}} variable. If you need to use it in some other way, send it to an API or save it in a Database using an HTTP or Update / Create Row steps.

Generating a file based on HTTP / Load Table requests

Similarly to generating a file based on Table data, you can do the same based on an API call result.

1. Create a Load Table or HTTP Request action. Configure it.

2. Add the second Generate File step and reference the result of the previous call as a {{data}} variable inside the Generate from field: