How do I add table columns dynamically on Appsmith?


  • There will be a table with a fixed number of columns. example: id, name

  • There will be an “Add column” button on clicking which opens a modal to enter the name of the column. On pressing add, the new column will be added to the table or as well as on the database.

Example Forkable App:


We could dynamically add columns to a table on both UI and Database using some simple JavaScript.

Say, you’re adding columns dynamically from an input widget (name of the column), and a button to submit it, here’s how the button’s onClick function should look like:

	.then(() =>
	.catch(() => showAlert('Failed to Add Column','error'))
	.finally(() => {

In the above code snippet, we first alter the table to create a new column, update the data on the table by re-running the table data, next we show if there are very errors and finally reset the widget and close the modal.

Below is the code for the queries:

add_column query:

ADD COLUMN {{column_name.text}} text;

fetch_users_data query:

SELECT * FROM users WHERE name ilike '%{{Table1.searchText}}%' ORDER BY id LIMIT {{Table1.pageSize}} OFFSET {{(Table1.pageNo - 1) * Table1.pageSize}};