somangshu commented 3 years ago

Summary

As a user, I should be able to configure a table widget to have editable rows. When the configuration is enabled from the property pane, an action will be available against each row, onClick, a form should open with all visible row fields which can be edited. The query/api call to ingest changes from the form should be available in the table widget property pane. This form will always open up as form modal.

Motivation

This is an easy implementation/workaround of a data grid that can come in handy to community users

Nikhil-Nandagopal commented 3 years ago

@somangshu this will require #1724 because the number of columns are variable. Another simple way of doing this is to create a column with an edit icon and clicking it turns the row of the table into all input boxes. The user can then configure an onUpdate action handler. Basically make the single row inline editable with a save button and just ask the user to configure the save action

somangshu commented 3 years ago

@Nikhil-Nandagopal While I feel tempted by the latter idea which could be quick to implement, But I think for a long term and scalable solution the initial thought is better, If we develop this in tandem with #1724, we will cover more use cases. Ex: how you mentioned input widget for each row key, We could also decide the widget based on the datatype, like a dropdown for array object.

nidhi-nair commented 3 years ago

Another user had a use case for this that required them to manually build a form/button to edit the table. Since the button they configured worked on a single column, the rest of the columns got cleared on update. In our solve for this, we should make sure our implementation makes it easier for users to update differentially if possible.

Nikhil-Nandagopal commented 3 years ago

@somangshu I think there are usecases for both. The JSON form is different while a user has explicitly asked for this inline edit here #5400 Ant design has this component https://ant.design/components/table/#header

areyabhishek commented 3 years ago

Got a request from one more user on Discord. Their table connects to multiple queries and they want inline edit+update.

Does react table support inline edits?

somangshu commented 3 years ago

Ant design specifically does allow the inline editing in the table widget, We will have to triage this an understand the implementation here.

@riodeuno any inputs here?

Nikhil-Nandagopal commented 3 years ago

Got One more feature request for this

riodeuno commented 3 years ago

Feature Note

[ ] Rows can be editable
[ ] A new column appears when a table is set to have editable rows. (property of the table) This should ideally be a fixed column
[ ] This new column will by default have an Edit button, which on click would show "save" and "cancel" buttons. It will also now show all cells in the row as editable text fields with the current values pre-filled.
[ ] After editing the user can click on save or cancel to revert the row back to a non-editable state. At this point the row remains selected before and after the edit
[ ] User can add an action to the onRowUpdate trigger property in the property pane. (property of the table)
[ ] The onRowUpdate passes the current updated row object in the context.
[ ] The changes made are temporarily and immediately updated in the table, however, if the values are not stored in the original data source, the values will revert back on the next refresh.

Additional details

We need to verify that editable rows can be achieved with the react-table library by updating the renderer. Here is an example of an editable cell.
The temporary changes are stored in the table's meta properties, and should be cleared on the next load/refresh.
Let's not call the action if data hasn't changed.
The edit/save/cancel column should always be visible if the feature is enabled in the table widget. We will need to look into the UX design for this.

samg666 commented 3 years ago

@somangshu this will require #1724 because the number of columns are variable. Another simple way of doing this is to create a column with an edit icon and clicking it turns the row of the table into all input boxes. The user can then configure an onUpdate action handler. Basically make the single row inline editable with a save button and just ask the user to configure the save action

*create a column with an edit icon and clicking it turns the row of the table into all input boxes @Nikhil-Nandagopal can you share an example how to click and turns the row of the table to input boxes, then click to save the change?

somangshu commented 3 years ago

@ggs331 check this out, This is from ant.design, But we will be following a somewhat similar UX.

areyabhishek commented 3 years ago

Can a column allow editing from a drop-down or file picker instead of an input field?

somangshu commented 3 years ago

When we have #1724, This will be pretty straight forward. For now, I suggest we implement only input fields.

areyabhishek commented 3 years ago

Will we do inline editing or will we open a modal to edit the table data?

areyabhishek commented 3 years ago

Check out this project: https://github.com/nocodb/nocodb their focus is on providing users with an airtable like table to edit their databases.

somangshu commented 3 years ago

We are providing inline editing experience for now. Check this example out. The enhancement to this will be joining it with the Json Form Widget to edit is a full fledged functional form.

What you are seeing ☝️ is better implemented with a DataGrid. Using a table for something like this might be very hard to maintain and could also cause performance degrade

areyabhishek commented 3 years ago

Got it. Will inline editing work for compact, tall rows versions of the table as well?

Schnurres commented 3 years ago

Would love Inline Editing in the table widget. Would be really helpful and make it possible to build much smoother CRUD Apps. Maybe even add a delete and + symbol in the bar with the search text and pagination too. Then you could delete rows from there and when + button is pressed a new row appears and can be added. Then you could build really compact and clean CRUD components.

riodeuno commented 3 years ago

@Schnurres A feature to add new entries and delete entries is a neat idea. As you mentioned, we can have CRUD operations in one place.

@somangshu I was wondering if we should push these features out in phases, starting with the editing experience, then adding and deleting. Shall we convert this into an epic from a feature?

@areyabhishek The UX in compact modes is a good question. I would suggest the following UX. When the table is being edited, the row heights are maintained. As the rows allow for single line of text, we can allow the editable rows to simply overflow the text as in a single line input elements. @momcilo-appsmith Any suggestions here?

Feature Note update:

We will need a new entry in the property pane for onRowInsert and onRowDelete action triggers, along with the onRowUpdate trigger we will have for the rows which are edited.

momcilo-appsmith commented 3 years ago

@riodeuno I am not sure I understand the experience you are suggesting.

somangshu commented 3 years ago

From an ongoing discussion:

[x] We need disabling of in-line editing for some columns. A user asked about this because they don’t want every thing to be editable. - We can introduce an editable property in the column setting when inline editing is enabled, This will turn true by default and the user can have a choice to disabled it.
[x] Enabling some columns to be drop-downs so that there are limited choices - Having dropdown in the table is a separate deploy preview, please check this out, This is still WIP and requires a lot of change, We are generating the feedback.
[ ] Editing by clicking the cell to be edited instead of a button at the end of the row(similar to Retool) -Right now we are using the functionality offered by react table, this implementation is offered out of the box, we will need a POC around this to understand if any bottleneck exists. @riodeuno
- [x] Can we instead make this column sticky? Whatever best can fit in this case
- [ ] If we have this function on clicking a cell, the row gets selected. This is fine until we have multi-select mode enabled. What happens then?
[x] How to introduce validations for the cell being edited? Any column type that is valid & enabled for inline editing can have Valid field to execute a JS expression? We can also add isRequired @riodeuno? Based on these conditions we can show the default error states of the columns. (another reason to use the same component) - Technical discussion required
[ ] What do error and ‘saving’ states look like? right now the button widget has its default loader state, Are you talking about changing this? @areyabhishek
[x] How to trigger action on clicking save? We have a new action onRowUpdate which lets the dev execute an event.

Schnurres commented 3 years ago

@somangshu this sounds awesome. Can't wait for these improvements to go live. This will improve Appsmith so much. The dropdown feature would be so good and really improve the inline editing function even further, Really like these ideas.

somangshu commented 3 years ago

@Schnurres thanks for the feedback, this helps us validate we are in the right direction. Kindly let us know if there is anything we might be missing.

riodeuno commented 3 years ago

@somangshu

Regarding row selection: When the column is set to be editable, the fact that we enter edit mode, should not select the row. This is true even for multiselect tables
Regarding validations: I concur. However, the technical aspects need to be thought through.

Let's make decisions regarding the details based on designs of the UX.

dilippitchika commented 2 years ago

https://www.notion.so/appsmith/Table-V2-feature-design-13383d0ebe914555902d404b05d634d1

softwarebloat commented 2 years ago

hello! any update on this feature? :D

momcilo-appsmith commented 2 years ago

Hey @softwarebloat this feature has been designed and is currently under development. @sbalaji1192 and @somangshu can tell you more about when it will be launched.

You can check the design here (this file will contain future designs in development too, not just inline editing): https://www.figma.com/file/JEalu7g3jDLzWWnKsfE6mB/Table-Improvements-2022?node-id=2%3A1

manikumarnune123 commented 2 years ago

@Nikhil-Nandagopal We have incorporated the (tabulator ) component inside Appsmith. Below is a sample

Nikhil-Nandagopal commented 2 years ago

@manikumarnune123 that's pretty cool! We'd love to see a PR on how you did that

billyrudi commented 2 years ago

Tabulator is a good component. i have suggested it some months ago..

mdmozibur commented 2 years ago

Any update on this or any timeline for this?

sbalaji1192 commented 2 years ago

Hey @mdmozibur, we're in the final phase of the development. We don't have a hard timeline yet. but we're targeting to release this before EOM.

mbilliodeaux commented 2 years ago

I would love to try this out even as a test user

dilippitchika commented 2 years ago

Hey @mbilliodeaux thanks for helping us out. I would like to get your feedback on this on a call, would you be willing to book a slot which works for you using this link - https://calendly.com/dilip_pitchika/30min

appsmithorg / appsmith

[Feature] Inline Editing of Table widget #4183

Summary

Motivation

Feature Note

Additional details

Feature Note update: