An "Editable Table" in a no-code platform is a user interface element that allows users to modify the content directly within the table itself. It typically presents data in rows and columns, similar to a traditional table, but with added functionality that enables users to edit, add, or delete rows and update the information displayed.
This feature is particularly useful for applications where users need to manage and manipulate data efficiently without navigating to separate forms or interfaces for editing.
Fuzen allows you to easily add editable table blocks to your SaaS apps.
To add an editable table to your page, click on “Add New Block” or any place where you wish to add the table.
Then select UI Element as the block type.
Select “Editable Table” from the block dropdown.
Then select from where the data will be sources for the editable table. Filter new data from collection: Select this if the data for the editable table will be sourced from a data collection.
Use a predefined data variable: Select this if the data for the editable table will be sourced from a data variable. Then select the data collection/data variable.
Then using the visual query builder, filter the data to be displayed in editable table.
Select the fields from the data collection that you want to add to your editable table.
Now link the editable table to some page. This page will open when you click on any particular item in the table and will display details of that particular item. If you do not want the table to be linked to any particular page, simply select do nothing from the dropdown.
Finally, adjust the margin and padding of the table.
Padding: Padding is the space that’s inside the element between the element and the border.
Margin: Margin is the space between the border and the next element of your design.
Click on Add and save the HTML. Your Editable Table is now added.
Advance Settings
Whenever you add an editable table to your SaaS app, you may want to change the field label, add some hidden field, change the type of the field (eg. change the field with text type to a dropdown type), add a predefined value or add options from some data variable.
This can be done from the advanced setting of the editable table. For this click on the settings icon in the editable table block.
A pop-up will open where you can make all the edits.
This section can be used to make the following changes:
Change the label of the field.
Change the type of the field. (Eg: change the type from text to select)
Add a predefined value to the field. Or enter a predefined variable using the data variable. This can be done by clicking on the toggle button and then selecting the data variable.
Edit the options used in dropdown, checkbox, radio button, etc.
To dynamically load options from the database. For this click on the toggle button, then select the data variable and then select the attributes which will be displayed in the dropdown and dropdown value to be saved.
To add team members as dropdown options.
To change the sequence of the fields in the editable table. This can be down using the simple drag-and-drop option.
Make all the changes and click on “Save Advance Settings” button.
Finally, save or update the editable table.
Edit Table
As your app evolves, you may want to edit the table later. For this go to the Build with no-code page and click on the block which you wish to edit.
Make the changes and then click on Update.
Adding New Columns To Table
After adding an editable table to your page, you may want to add new columns to the table. For this, you don’t have to delete the current table and add a new one.
You can simply use the refresh field option to add new columns to the editable table.
For this, first, add the required fields in the data collection.
Then go to the edit section of the table.
Click on the refresh field button. The newly added fields in data collection get added to the checklist.
Select the fields and click on the update.