How to design editable table with dynamic header

How to design editable table with dynamic header



One of requirement i want to create a editable table, which will allows user to enter input.

in that header row will be dynamic, it will be based on user.

UI will be like this, One record will contain two rows

In my Table From and To for date and rates

When i click add button, UI has to look like below.

Could any one help me how to achieve this?

Hi Sekar,

Do you have a fixed number of columns and some users only see part of them (e.g User A see Rate Desc 1, Rate Desc 2, and Rate Desc3; User B see the 5 Rate Descs...) or are columns completely dynamic? If you know the total of columns you can use css to hide some of the columns based on the user. 

If your table needs to be completely dynamic you may need to dynamically build the html (instead of using table records or editable table). You can for example use a list record to create your columns and use web blocks for columns records. Or just dynamically create your html code and inject it on the page using an expression with un-escaped content (not easy to maintain). 

Ana Reis

Hi Ana,

Thanks for the reply, In my case columns are dynamic. 

do you have any sample to generate HTML table from a list.

So that i can modify to my case and use it.

If you have any sample please share, it will be helpful for me.

Hi Sekar,

Find in attach a quick start example of what you can do with a list record.

Hope it helps.


Hi Ana,

Thanks for the sample.

If you could provide a sample like by passing a structure list to a web block, Build a table using java script.

I need add row button in that table.

Finally i click save in parent i need to get the updated structure, so that it would be easy to update in database.

Structure Sample 

{ StartDate:[],









Hi Ana,

Issue is fixed,

I used to Serialize data and send to parent via OnNotify Event.

Since I have 3 nested structures, Its was bit complex.