Data Search and CSV Download
You can easily implement the functionality to search data that is coming from an external data source such as Supabase, Firebase, Airtable, Google Sheet etc, so that you can see and filter the results in the real-time.
You can also download the searched result as CSV file as an end user.
How to Implement Search Functionality on Fetched Data?
We have covered each and every step below:
Make an API Call
1. Create a REST API for GET Call
Go to External API page and create a REST API. Name the API, add the External API URL and select GET as call action.
2. Send Request & Receive Data
Scroll down and click the Send Request button. As you click the button, data will get recieved.
3. Response Data Mapping
Scroll down and fill required field to map the data. Then, click the Save Setting button.
Add & Configure Data Table
4. Bind the External API
After dropping a data table in a page, open its settings and select the option, "Get Data from External API Response". Then, select the external API that you have created previously.
5. Drop Data Search Form Component
Open the components panel and go to the CMS category. Drag and drop the data search form inside the data table.
6. Change the Name of the 1st Input Cell
Now open the settings of the 2nd input cell and change its name as per the requirement. In the example below, the name is changed to title as shown in the example below.
7. Change the Name of the 2nd Input Cell
Now open the settings of the 2nd input cell and change its name as per the requirement. In the example below, the name is changed to userId as shown in the example below.
Preview or Publish
8. All Data is Displayed
Save the changes and open the page in the preview or publish mode. You will see all data is displayed with the search bar.
9. Search a Number
Enter any number in the search input field and click the Search button. As you can see below, only data with the searched number is displayed i.e. 10.
10. Search a Title
Now enter a title and a number, then click the Search button. As you can see below, only data with the searched title and number is displayed.
CSV Download
1. Edit the External API - Export Response File
Open the external API using which, you want to fetch data and download it in CSV format. And tick the checkbox, Export Response File as shown below.
2. Select Export Response to a File
Scroll down and go to the Export Response to a File section. Select the radio button for the option, Export Data into CSV.
3. Add the File Name
Now add a file name of your choice as shown below and click the Save Setting button.
4. Preview or Publish
Open the page containing data table in the preview or publish mode and click the Download CSV button. As you click the button, a file will get downloaded in your system.
The image below shows the data in the downloaded CSV file.
