Display key-value pair data using a Table component

This guide explains how to use a Table component to display key-value-pair data in the frontend of your applications.

1. Add a Table component to the canvas and update the Table Header to "Table view"

2. Create a backend API with a JavaScript step using the following code:

   let data = Table1.selectedRow;
   
   let transformedData = Object.entries(data)
     .map(([key, value]) => ({ key, value }))
     .filter(
       ({ value }) => value !== null && value !== undefined && value !== ""
     );
   return transformedData;

3. Add a second Table component to the canvas and update the Table Header to "List view"

4. Update the second Table's Table Data to {{API1.response}}

5. Add an event handler to the first Table with the action Run API to run API1 onRowClicked

Now, when you click any row in the first table, you'll see that row's data displayed in the second table in a list form.