Making a table column editable

sudipta.tripathy · January 2, 2019, 9:12pm

I have been trying to make a table column editable but it does not seem to work. The table is attached to a named query. Also how do I hide a column?

anjoroge · January 2, 2019, 11:00pm

If you want to be able to make a table column editable right click on the table and select on Customizers > Table Customizers > Editable and check whatever columns you want to make editable. The same applies to hiding columns. It can all be done in the Table Customizer.

sudipta.tripathy · January 2, 2019, 11:09pm

I don’t see the option when I right click on the table.

PGriffith · January 2, 2019, 11:34pm

To make a cell editable in Perspective’s table component, you need to make the column’s value an object, rather than a literal value; see the example in the seeded table component - the ‘City’ for Helsinki is a static string, but for Folsom it’s an object with (in this case) three keys. The two vital ones are the value (“Folsom”) and the editable flag (set to True). see @anjoroge’s comment below.

However, unfortunately at present table cell editing hasn’t been implemented - the Vision concept of ‘Extension functions’ is going to be carried over in some respect.

anjoroge · January 2, 2019, 11:45pm

I believe the above solution is for vision components but for perspective components you can make all the cells of a column editable by configuring the column config (columns prop). You can also make individual cells editable, which overrides whatever is configured in the column config.for information you can go to the below link.

http://forum.inductiveautomation.com/t/feedback-new-perspective-table/

sudipta.tripathy · January 3, 2019, 3:23pm

it looks like the feature has not been implemented yet… I tried the following settings and I can not edit the columns yet. I tried it on 2 columns.

ynejati · January 3, 2019, 4:47pm

Hi,

Column configs control the ordering, number of columns displayed, what columns are displayed, and an individual columns configuration. There’s no way to know what column config is associated with what data column unless you specify this using the configs ‘field’ prop. The ‘field’ prop should correspond to the key in the key value pair of your data, assuming it is a dataset or an array of objects. For example, [{ city: ‘Folsom’, state: ‘California’ },…] would require that the ‘field’ prop of the column config for your city column be ‘city’ in order to associate the column config with the data.

Hope that helps.

-Yousuf

sudipta.tripathy · January 3, 2019, 7:08pm

But I am still not clear about how to make the column editable.

PGriffith · January 3, 2019, 8:01pm

Table editing isn't yet implemented.

sudipta.tripathy · January 3, 2019, 9:01pm

I got it. Any ETA on when it will be implemented? I am also trying to render a view in a cell using the viewpath property and it does not seem to work either

ynejati · January 4, 2019, 12:01am

Try linking the column config with the desired column using the ‘field’ prop, as I suggested earlier.

Editing a cell is currently possible, however, we currently do not have anything implemented to handle these changes. Edits are currently being logged to the browser console as an example of what will become available. We are currently working on implementing extension functions in order to handle these edits, which you can expect soon.

Please refer to http://forum.inductiveautomation.com/t/feedback-new-perspective-table for the latest unofficial docs, news on the table component, and the answer to many of your questions.

-Yousuf

WildeKurt · April 1, 2019, 1:43pm

I don’t know if there’ll be an easier way to do this but here’s my solution thus far. To enable editing for select columns I’ve converted the incoming data (a dataset that’s the result of a query) to a list of dictionaries. each row is: {‘column name’:{‘value’: 10,‘editable’:True}.

# convert dataset to dict
editableCols = ["firstName","lastName"]
ds = value
colNames = ds.getColumnNames()
d = []
for i in range(ds.rowCount):
	rowDict = {}
	for col in colNames:
		editable = False
		if col in editableCols:
			editable = True
		rowDict[col] = {"value":ds.getValueAt(i,col),"editable":editable}
	d.append(rowDict)
return d

apereira · April 11, 2019, 4:24pm

Running on Version: 8.0.0 (b2019040718)

Quick workaround:
Go to your table, left-click, Configure Event... > Component Events > onEditCellCommit
Adapt the following script according to your needs, in my case I was toggling a boolean column called 'PRINT':

tbl = self.props
state = tbl.selection.data[0].PRINT == 'true'
tbl.data = system.dataset.setValue(tbl.data, tbl.selection.selectedRow, tbl.selection.selectedColumn, not state)

I haven't tested it thoroughly but it seems to be working fine. Remember to leave the option editable turned on (table.props.columns.editable).

simeonw · November 10, 2021, 10:56pm

I am experiencing the same issue as described above, but with version 8.1.11 (b2021101912).

I’ve attempted to drop a new table onto a view and change nothing (e.g. leave all settings as default and sample data intact).

When I try to edit the first cell (Folsom), which already has editing enabled, any changes made to the cell value fail to commit.

I ended up adding an onEditCellCommit script similar to @apereira above (except using dictionary instead of dataset):

tbl = self.props
value = event.value
tbl.data[tbl.selection.selectedRow][tbl.selection.selectedColumn] = value

Has anyone else experienced this issue in 8.1.11?

pturmel · November 11, 2021, 1:49pm

What makes you think the script is optional? (It isn’t.) Maybe the docs need to be more clear.

Chris_Bingham · March 22, 2024, 7:25pm

Optionally, use event.row for row index & event.column for column name:

self.props.data[event.row]['value'][event.column] = event.value

Note that you may need to omit ['value'] if it is not in your dataset.