Looks like this is going to be very useful in the future. But I was wondering, is there a way to stop it from highlighting the text when you click and drag? It’d be great to select as you click and drag, but without that its kind of odd when it just selects the actual text instead.
I agree. The browsers highlight selection (user-select) clashes with the way the table implements selection. We’ll take care of it. Thanks!
-Yousuf
2 Likes
Okay, but by offset do you mean the row index and column index as it relates to the start of the available visible data in the table?
At the moment, the parameters passed back to the view from a view cell will have the shape:
{
column: string | number;
columnIndex: number;
row: number; // This is the true row index, as it derived from the data source
value: any;
}
I’m trying to customize a column like ‘translation list’ or ‘background list’ in vision module, but I can’t.
For example if I want to map the values of a column with some icons, how do it do?
Hi,
Have you tried manipulating the data using a binding transform? It’s certainly not as convenient as configuring a translation list directly on a column, but it can be used to achieve the same effect, and much more.
-Yousuf
Yes but I do not understand how to manipulate a single value or cell forall rows
Although not the prettiest solution, something like this might work. This operates on a bound dataset tag.
def transform(self, value, quality, timestamp):
city_translations = {'Folsom': 'Folsom City'}
transformed_value = []
for row in range(value.getRowCount()):
value_to_dict = {}
for col in range(value.getColumnCount()):
to_translate = value.getValueAt(row, col)
if (value.getColumnName(col) == 'city' and to_translate in city_translations):
value_to_dict[value.getColumnName(col)] = city_translations[to_translate]
else:
value_to_dict[value.getColumnName(col)] = to_translate
transformed_value.append(value_to_dict)
return transformed_value
Hope this helps.
-Yousuf
4 Likes
Here are notable features and fixes to the table component as of 12/13/18. These changes will apply in the next available build. Please let us know if you have any questions, or need clarification on any of these items.
-
Subview rendered by rows no longer appear highlighted on mouse over.
-
Views configured on a column now receive the following parameters:
{ column: string; row: number; value: any; columnIndex: number; rowIndex: number; } -
Views configured on a row now receive the following parameters:
{ row: number; rowIndex: number; value: PlainObject; } -
Toggle switches and checkboxes can now be horizontally aligned as configured.
-
Disable browser default text selection behavior across browsers.
-
Multiple interval selection no longer duplicates data.
-
Clear selection when both enableRowSelection and enableColumnSelection are disabled.
-
Selection data now includes data of columns added by additional column configs.
-
Table filter now shows a results count.
-
Pager page jump input field no longer requires double click to edit.
-
Boolean values and zero are now properly represented.
-
Added right click context menu to table body, currently dedicated to only copying selection data to clipboard.
-
Table no longer breaks with empty data source.
-
Display empty data source UI if data source is empty.
-
Render toggle switch/checkbox in edit cell if configured, instead of rendering the cell’s actual raw value.
-
Render either a text or number input field in edit cell depending on the cell’s raw value.
-
Add activePage prop to the pager prop to manage the current active page of the table if pagers are enabled.
-
Add advanced hide property to pager that results in the visual hiding of pagers.
-
Made default font size of the table body smaller.
-
Misc. UI updates.
1 Like
Selection data now includes data of columns added by additional column configs.
Do you have an example on how to use the data attribute under the selection?
Hello,
Here are some of the latest features, updates and fixes to the table component.
-
Rows of the table component are now virtualized, meaning based upon the scroll position and height of the table, only the rows needed are rendered. This equates to being able to render thousands of rows in fractions of a second. Overall, a massive performance boost from the previous iteration. NOTE: There is a minor downside that comes from this virtualization. Columns that are set to render as view cells require that min row height be specified if the height of the configured view is greater than the default height of the rows. This is due to the fact that views have not completed their initialization lifecycle when pre-measuring row dimensions. This downside is a small price to pay for the performance gained from virtualization. Within the next few months, there will be an option to switch between virtualization and standard mode, so that you may choose which mode best suits your needs.
-
Cell editing is now full functional. There is a custom component event on the table called ‘onEditCellCommit’ which fires after changes are committed (‘Enter’ or ‘Return’ key press) to an editing cell. The event object has the shape:
{ column: string | number, row: number, value: any }. Please let us know what else you’d like to see included in the event object. -
More intelligent column auto render modes. If the data happens to be a dataset, the render mode is derived from the dataset’s types.
-
New string render mode for column configs. Effectively just wraps the data in a string.
-
Various bug fixes including, applying specified formatting to valid dates, pager updating when the length of the data property changes, boolean auto render detection, and more.
1 Like
Is there going to be a way to access the filter value? I have two tables where I want to click one table to temporary filter the values in the second table. Outside of manipulating the dataset in the background I was looking to take some of the selected value data from table 1 to populate the filter in table 2. I’ve looked through available properties but don’t see a way to do that. Is this something that will be exposed in the property set for the table?
We can definitely look into exposing the filter property, but filtering the dataset using a binding + transform should also be an easy way to get it done.
1 Like
Is it possible for someone to provide an example of how to pass parameters to a subview?
You don’t expressly pass parameters to the subview - they’re sent implicitly by the Table. If you have a Table with columns “city”, “country”, and “population”, then your subview should have the following parameters configured:
The Table will pass along a rowIndex parameter, which is the row of the table this subView belongs to, and a value parameter which contains a case-sensitive matching key for each column of the Table.
5 Likes
So awesome. Thank you!
1 Like
Will it/could it be possible to define custom parameters as well as the row data?
Maybe adding a params object like you would for an embedded view component?
Sort of.
Long-term, we’d have to implement something like that as a feature.
Short-term, you could always include the parameter as part of the Table data, and just configure the column which holds this custom parameter to not display.
4 Likes
Is there a way to dynamically highlight specific rows based on a column value in that row?
I see that if the data is an array of objects, I can assign styles:
But in my case I am populating the table with a dataset by binding it to a query.
Is this something that I can do? Or will the feature possibly be introduced in the future?
You could create a transform for the binding which creates the array of objects from your Dataset, and apply the logic there.
I don’t suppose that once I apply the logic I can somehow convert back to a dataset to store in the table? In other words is there a way for a dataset to store complex data types that would contain style information?
The issue I have with storing the data as an array of objects is that I am accessing these tables in multiple scripts that would all need to be changed in order to use arrays of objects instead of datasets.