I have a table which displays the data from database, how can I edit the cell in the table, I don’t want to save the changes back to database, I am just trying to edit the cell value. In table property I have already enabled allowEditOn: single-click but still not allowing the edit the cell data.
Thank You
Right click the table and choose table customizer.
Then select the Editable tick box for each column you wish to enable that for.
There is no option called table customizer on right clicking the table in perspective
Apologies, I was in Vision mode!
You need to make each item editable in the table. Example JSON below:
{
"city": {
"value": "Folsom",
"editable": true,
"style": {
"backgroundColor": "#F7901D",
"classes": "some-class"
},
"align": "center",
"justify": "left"
},
"country": "United States",
"population": 77271
}
Once you have that, you will need to use the onCellEditCommit script to update that value into the dataset, but not into your original datasource.
I cannot access each item since i am using database query to populate table data
If you are using a binding to populate the table, it will smash any edits you make locally every time it updates. You may have to bind to a custom property and decide (in a propertyChange event) when it is appropriate to overwrite the table data. When the script changes the cell locally, you will have to set a flag or set up some state that can be used to decide how to route the DB updates. There’s no magic wand that will resolve the conflicting sources of data for you.
Adding a script transform to the data binding can add the editable item for you.
The below should make all cells editable, provided your return format is json:
final = []
for i in value:
internal = {}
for r in i:
internal.update( {r:{"value":i.get(r,0),"editable":True}})
final.append(internal)
return final
Heed the advice above. When the binding updates, this won’t save your edits
I think I am not explained it clearly, so what i am trying to do is I have a table called expense in database which have a boolean column called “selected”, so when i am retrieving that table in perspective table it shows a check box for that boolean column which is “selected”. I want to check that check box in run time so that i can select some rows in the table and perform some action on that rows, i don’t want to save that back to database i just want see which check boxs are selected in run time. But perspective table is not allowing to check the check box on run time.
Add a event onEditCellCommit -> script which looks something like this:
col = event.column
row = event.row
self.props.data[row][col] = event.value
added, still not allowing to check the check box
If the issue is the fact that the checkbox is gray/disabled 
vs 
then you need to set your props.columns. See example below:
I don’t have columns since data is fetched from database, I have allowEditOn which enabled still its not allowing to edit. and check box is not grayed out or disabled. I can’t edit any cells including cells containing text
You need to transform your data in the binding to have the editable column property true, similar to what Jonathan showed.
No, I just want to select few rows of the table using check boxes and perform operation on that selected rows when a button is clicked.
Not “No”. You can’t get your desired editable checkboxes without transforming the incoming dataset.
Ok. Separate columns prop.
Its working when set individual column prop, now i can check the check box but when i try to check multiple check boxes its not working. Only one row check box can be selected at a time.
Not sure I’m following you, got a printscreen of your issue? Are you trying to multi select and multi change state with one (1) click?
Ya, the above figure is screen shot of my table, i am trying to select multiple row using check boxes and when i press the above button “approve all”, status column in the database should be updated for this selected rows
This is a bit more complex. You’ll need an unique ID (per row) on your table data that get transferred to the props.selection.data buffer (don’t forget to go with enableRowSelection: true), and change my previous event code for a loop cycling through that buffer and change the data to the source (props.data).
