[Feature] Datagrid widget

[areyabhishek]

Summary

A data grid widget will enable users to create an editable spreadsheet view of their database.

Motivation

Advanced users will use this to quickly edit multiple cells.

Additional Context

We could use ag grid or other open source libraries.

Some OSS libraries:

1. https://github.com/githubocto/flat-ui
2. https://github.com/glideapps/glide-data-grid

[alex-jitbit]

Yeah, that would awesome, something similar to this: https://docs.retool.com/docs/working-with-tables#editing-table-values-making-data-editable

[mingfang]

Something with "formula" support would be amazing. Luckysheet https://github.com/mengshukeji/Luckysheet tries to be Excel like which is great already. But I think appsmith can go a step further to support calling javascript as a formula.

[Nikhil-Nandagopal]

@mingfang thank you for the suggestion!

[riodeuno]

Reference to a library we can use for this widget, referred by a community member on discord

https://github.com/SheetJS/sheetjs

[marcius]

This could be a nice candidate for the datagrid widget: https://revolist.github.io/revogrid/

[mingfang]

If would be great if Appsmith can be used build something that works like seektable https://www.seektable.com

[momcilo-appsmith]

@riodeuno @somangshu Can we schedule a discussion around this widget?

[kavhad]

Many companies in the financial sector OR else where who maintain and input a large amount of data would view this feature as essential.

[somangshu]

@kavhad thanks for the additional context 👍 We are yet to prioritise this and bring it up on our roadmap, Right now we are focusing more to improve our table widget to handle large amounts of data.

We will post back here once we have decided to take this forward.

[kavhad]

Hi @somangshu, sounds promisin. Can you share anything about how you're going to improve the existing table widget for the mentioned purpose?

[somangshu]

Sure @kavhad, as of now you can track it in #9135. This is our first set of goal before we can move ahead. There are more enhancements in the pipeline. Let us know if you wish to checkout the dev version, we will be more than happy to have your feedback.

Cc @dilippitchika

[dilippitchika]

Hey @kavhad would you be willing to help us understand how this can helpful for the financial sector specifically? If you are, would you be able to jump on a call with us and walk through financial use-cases?

Adding a link to book a slot which is convenient for you - https://calendly.com/dilip_pitchika/30min?back=1&month=2022-05

Do let me know if this doesn't work out, i will figure out another way to get in touch with you.

[yan-hic]

@Nikhil-Nandagopal this was raised for quite some time and last prioritized for Q4 22 I read. Can you update us on progress + direction ? I.e. new widget, enhanced Table widget or use of compatible external library ?

[Nikhil-Nandagopal]

@yan-hic we de-prioritised this in favour of making the table widget inline editable. It works slightly different to a datagrid but it seemed to solve most use cases. Have you tried it out? Would love to hear if it still doesn't meet your use case.

We'll be working on making adding custom widgets easier so that we can power widget use cases faster.

[yan-hic]

Yes, I am using mainly the table widget and have requested features through discord already. I think the main missing feature would be cell selecting and editing, without the need to click on caret.

[Nikhil-Nandagopal]

That sounds like a reasonable addition! cc: @dilippitchika

[dilippitchika]

Yes, i will prioritise this soon and deliver it in the next Quarter.

[dilippitchika]

There are some caveats to this which we need to bypass -

1. We don't have a concept of cell yet, everything is expected to be defined at a column level
2. If i remember correctly, @yan-hic wanted to enable all the columns to be editable at once either at a row level or across the table. This might be tricky because we have 2 different modes on the table, one for display and one for editing. We only process data after editing is done.

@yan-hic one solution which i am thinking of exploring is

1. making the cell itself selectable and editable with a keypress or a click (today it's a double click)
2. navigate cells using arrow keys in keyboard rather than having to move cursor. Will this help you get to the experience you are looking for? This will mimic the experience in google sheets

[yan-hic]

@dilippitchika you're reading my mind - navigating (pointer or keyboard arrows) and introducing the concept of CurrentCell and/or CurrentColumn would be great. Then editing could indeed be enabled by pressing Enter or F2 (as seen elsewhere), or a configurable keystroke. One important feature though: copy/pasting experience can be better. Pasting works as-is (using whatever shortcut e.g. Ctrl-V on Win) but copying the cell content should be as easy as using the shortcut (e.g. Ctrl-C) while on the cell. Currently, one needs to edit, select the text and copy.

[Nikhil-Nandagopal]

@yan-hic we recently introduced a custom widget that makes it really easy to add widgets like a Datagrid. Check out the post below where you can fork the data grid into your application. https://community.appsmith.com/template/data-grid