Is it possible to add columns to table props with code dynamically. I was not able to find a solution but only this which states it can be done manually. I am trying to change the number of columns based on what table is selected from a dropdown. I want to do this so I can manipulate the columns for certain items.
So, you're binding to data gets results from multiple tables with different columns?
The generic solution would be to bind the columns property to the data property with a transform that yields the appropriate column configuration for the columns present in the table data. Or for the most flexibility, consider using a custom property for the raw binding to data, in dataset format, then bind that to both columns and data, with the appropriate transforms for each. (Make that dataset property private, too, to minimize unnecessary browser traffic.)
I want the columns property to expand and contract based on the number of columns. Yes the column headers are different in most cases.
Generate the entire columns property in a transform script.
My biggest issue is the datetime columns don't export or display correctly. My project allows you to select a table and export to the local computer in excel.
Chris-
Probably not the best, but what I typically do in scripting when trying to programmatically add a column at run time (assuming the table is already setup with at least one column):
- make a copy of column[0]
- update the settings of the column (field name, labels, types, etc.)
- append the new column to the 'columns' property of the table
It's important that the field name referenced exists in the table data, or you will get a component error.
You can of course try to create the column object completely from scratch, I've just found that for more basic table layouts, coping an existing column and updating the field and label props to be easiest/fastest.
Header/footer groups, styles, etc. get a bit more "hairy" to update in scripting, but it can be done as well.
HTH.
-Shane
Unfortunately I do not know how to do this. If I see code I can decode it for myself but to create it I struggle sometimes with situations like this I have never had to do. Would you happen to have a guide on how to approach these types of items with code examples?
Something like this, probably located in an on change script of the table data property:
ds = self.props.data
num_cols = ds.getColumnCount()
# add columns to table out to num_cols
while (len(self.props.columns) < num_cols):
self.props.columns.append(dict(self.props.columns[0]))
# if 3 were your new column
self.props.columns[3].field = ds.getColumnName(3)
self.props.columns[3].header.title = 'Field Name'
Obviously a lot more cases to handle... like if table already has more columns than the ds, etc.
And you might need to set the render type (or just use 'auto' everywhere.)
But hopefully this let's you get started.
HTH.
-Shane
2 Likes