# Making a table column editable

**URL:** <https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652>\
**Category:** Ignition Early Access\
**Created:** [January 2, 2019, 9:12pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652 "2019-01-02T21:12:37Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![sudipta.tripathy](https://avatars.discourse-cdn.com/v4/letter/s/c57346/32.png) [@sudipta.tripathy](https://forum.inductiveautomation.com/u/sudipta.tripathy)\
**Post date:** [January 2, 2019, 9:12pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/1 "2019-01-02T21:12:37Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![anjoroge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/anjoroge/32/6698_2.png) [@anjoroge](https://forum.inductiveautomation.com/u/anjoroge)\
**Post date:** [January 2, 2019, 11:00pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/2 "2019-01-02T23:00:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sudipta.tripathy](https://avatars.discourse-cdn.com/v4/letter/s/c57346/32.png) [@sudipta.tripathy](https://forum.inductiveautomation.com/u/sudipta.tripathy)\
**Post date:** [January 2, 2019, 11:09pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/3 "2019-01-02T23:09:59Z")

</div>

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

 ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/a2f93c3fc236510d1e39c1079efe53b7b6805893.png)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 2, 2019, 11:34pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/4 "2019-01-02T23:34:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![anjoroge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/anjoroge/32/6698_2.png) [@anjoroge](https://forum.inductiveautomation.com/u/anjoroge)\
**Post date:** [January 2, 2019, 11:45pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/5 "2019-01-02T23:45:42Z")

</div>

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/](http://forum.inductiveautomation.com/t/feedback-new-perspective-table/)

---

<div class="post-metadata">

**Author:** ![sudipta.tripathy](https://avatars.discourse-cdn.com/v4/letter/s/c57346/32.png) [@sudipta.tripathy](https://forum.inductiveautomation.com/u/sudipta.tripathy)\
**Post date:** [January 3, 2019, 3:23pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/6 "2019-01-03T15:23:32Z")

</div>

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.

 ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/1/100112dfbcf5dda63944d02ae20b13b9786e8d2b.png)

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [January 3, 2019, 4:47pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/7 "2019-01-03T16:47:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sudipta.tripathy](https://avatars.discourse-cdn.com/v4/letter/s/c57346/32.png) [@sudipta.tripathy](https://forum.inductiveautomation.com/u/sudipta.tripathy)\
**Post date:** [January 3, 2019, 7:08pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/8 "2019-01-03T19:08:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 3, 2019, 8:01pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/9 "2019-01-03T20:01:39Z")

</div>

> [@paul-griffith](#):
>
> 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.

Table editing isn't yet implemented.

---

<div class="post-metadata">

**Author:** ![sudipta.tripathy](https://avatars.discourse-cdn.com/v4/letter/s/c57346/32.png) [@sudipta.tripathy](https://forum.inductiveautomation.com/u/sudipta.tripathy)\
**Post date:** [January 3, 2019, 9:01pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/10 "2019-01-03T21:01:35Z")

</div>

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

![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/909b0f793a6c6ebb00f4e1ce52eddda560f996a9.png)

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [January 4, 2019, 12:01am UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/11 "2019-01-04T00:01:51Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![WildeKurt](https://avatars.discourse-cdn.com/v4/letter/w/50afbb/32.png) [@WildeKurt](https://forum.inductiveautomation.com/u/WildeKurt)\
**Post date:** [April 1, 2019, 1:43pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/12 "2019-04-01T13:43:52Z")

</div>

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
```

---

<div class="post-metadata">

**Author:** ![alan\_pereira](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alan_pereira/32/79668_2.png) [@alan\_pereira](https://forum.inductiveautomation.com/u/alan_pereira)\
**Post date:** [April 11, 2019, 4:24pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/13 "2019-04-11T16:24:40Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![simeonw](https://avatars.discourse-cdn.com/v4/letter/s/4da419/32.png) [@simeonw](https://forum.inductiveautomation.com/u/simeonw)\
**Post date:** [November 10, 2021, 10:56pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/14 "2021-11-10T22:56:35Z")

</div>

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.

 ![Perspective Table Edit](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/f/1fbf6546e5f0235427d464c6df98e46091e05c5a.png)

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

```auto
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?

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [November 11, 2021, 1:49pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/15 "2021-11-11T13:49:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chris\_Bingham](https://avatars.discourse-cdn.com/v4/letter/c/e5b9ba/32.png) [@Chris\_Bingham](https://forum.inductiveautomation.com/u/Chris_Bingham)\
**Post date:** [March 22, 2024, 7:25pm UTC](https://forum.inductiveautomation.com/t/making-a-table-column-editable/21652/16 "2024-03-22T19:25:55Z")

</div>

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

```auto
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.