I'm trying to implement something along these lines to highlight a row if a value is true in that row, but I'm not sure how to configure this since the data is being pulled from a named query, so it removes any style properties I've added when it re-polls.
Add a transform on the binding.
2 Likes
Then that's probably a perfect place to use a transform - a script should be able to loop through the data from the named query and add the style keys as needed.
2 Likes
Hi,
Got it. We can add an onRowDoubleClick event with custom event object to help satisfy this use case. Sound good?
-Yousuf
Yeah that sounds like it should do the trick, that’d be great!
Great. If you can think of any others, feel free to let us know. I would also like to add onSelectionChange and possibly onSubviewExpand/Collapse
1 Like
Hello,
Here’s an update on two features that are available in the latest nightly, or 8.0.3.
-
The width property on the column config now represents a weighted amount of available space relative to other columns. Translation, it’s the CSS
flex-growproperty of a column. The accompanyingstrictWidthprop can be used to set the width as static or fixed, meaning it is not effected by changes to the width of the table nor the widths of its sibling columns. -
You no longer have to double-click a sortable column header to toggle sort, it now sorts on a single-click. This is also true when in multi-sort mode.
As always, we appreciate your requests and feedback. There will be a few more helpful features and fixes within the coming days. Anything worth mentioning, of which there are a few, will be posted here.
-Yousuf
For anyone wondering how they might be able to add custom row styles (and configuration) based upon a rows value derived from a dataset. You’ll need to create a transform on the bound dataset using a script like this example:
output_json = []
style_orange = {"backgroundColor": "#F7901D"}
style_green = {"backgroundColor": "#00AA00"}
for row in range(value.getRowCount()):
row_object = {}
row_value = {}
row_style = {}
for col in range(value.getColumnCount()):
row_value[value.getColumnName(col)] = value.getValueAt(row, col)
row_object['value'] = row_value
if value.getColumnName(col) == 'container_type':
if value.getValueAt(row, col) == 'can':
row_style = style_orange
elif value.getValueAt(row, col) == 'bottle':
row_style = style_green
row_object['style'] = row_style
output_json.append(row_object)
return output_json
You can take it even further and create a shape as complicate as this if you’d like, for example:
{
"value": { // The rows value.
"city": { // Custom cell configuration.
"value": "Folsom",
"editable": true,
"style": {
"backgroundColor": "ignition-orange",
"classes": "some-class"
},
"align": "top" // Also accepts center and bottom
"justify": "left" // Also accepts center and right
},
"country": "United States",
"population": 1000000
},
"style": { // Custom row styles.
"backgroundColor": "#F7901D",
"classes": "some-class"
},
"subview": { // Row subview configuration. Can override configuration from rows config.
"enabled": true,
"viewPath": "myView",
"viewParams": {
"param1": 3
}
}
}
6 Likes
Hi all,
Due to popular demand, the next nightly will include some new component events:
onSelectionChange : { selectedColumn: string | number | null, selectedRow: number | null, data: Array<PlainObject> }
onCellEditStart : { column: string | number, row: number, rowIndex: number, value: any }
onCellEditCancel : { column: string | number, row: number, rowIndex: number, value: any }
onRowClick : { row: number, rowIndex: number, value: PlainObject }
onRowDoubleClick : { row: number, rowIndex: number, value: PlainObject }
onSubviewExpand : { row: number, rowIndex: number, value: PlainObject }
onSubviewCollapse : { row: number, rowIndex: number, value: PlainObject }
Some things to note:
- For onCellEditStart and onCellEditCancel, the value is the initial value, before any edits.
- onSelectionChange will fire on startup or mount if props do not equal the table components default selection config
{ selectedColumn: null, selectedRow: null, data: [] }.
-Yousuf
2 Likes
Is there any plan to add this customization directly to datasets without transforming to json? Our application would require a lot of rework to accommodate json. We were hoping for customization similar to the Vision power tables.
The two specific use cases are 1) changing the color of the currently selected row
and 2) changing a rows color if one of its cell’s value matches a certain criteria.
Is there a reason the first row does not act like the rest when it comes to the passed parameters? I have two labels on the subview. One has the text bound to rowIndex and one to value.city. The first row displays all the parameter data. The rest display the value of the parameter correctly. I have tried binding to value.city.value. This results in the first row displaying correctly and all other rows displaying null with a red outline.
I have just downloaded and installed the latest release to make sure this has not been resolved already.
What you’re seeing is an idiosyncrasy of the example data:
In the provided example data for the Table component, the first row’s city data is a full object, which contains styling info and an internal value. You can see this if you expand the props.data entries for rows 0 and 1.
Your configurations are completely correct, and exactly what you SHOULD see, based on the underlying data.
1 Like
I should have caught that, thank-you.
1 Like
I don't know if you've reworked things already, but the simplest option might be to have the dataset in a custom property, like custom.value, and bind props.value with a transform to that that looks at selectedRow or checks for your interesting values. Existing places that look at or modify using dataset functions would only need to be repointed from props.value to custom.value.
Is it possible to limit the height of the table rows? I am embedding a view to a column, its just a single column currently, the embedded view default height is 180px, however once embedded to the table rows, the height of each row changes to almost 500px, I can’t see any options to change this?
Thanks
That’s strange. It shouldn’t be doing that. What kind of embedded view? Yes, you can set the row height via rows.style.maxHeight = 180px.
Do we currently have an ETA for when the Property editor performance will be improved when the table has over 1,000 rows? Currently the team and I are working with a table that has over 6,000 rows in total and it loads extremely slow. We are on the most up to date ignition on the DEV build as well.
Thank you
-Johnathan
You should really say the actual version rather than just 'the latest'. For example, it's now 2 months later and the latest is 8.0.5 with 6 in nightlies (or 7?)
1 Like
Have you considered using a dataset object instead of an array of JSON objects? That should improve the performance of the editor significantly. We have implemented a mechanism where large arrays in the property editor will get a “show the next 100” button so that the property editor is not flooded with nodes. Is this not working for you?
Is there a way to simulate the CTRL button being pressed so that you can select multiple rows on a touch screen device with no keyboard? I would like to leverage the multi-select features of the table, but with only a touchscreen I’ve no way to select multiple that I know of without doing special programming.
1 Like