[Feature] Tree Table Widget

[Nikhil-Nandagopal]

Summary

A user would like a tree view of the table as shown where each row can be collapsed / expanded.

• https://ant.design/components/table/#header
• https://ant.design/components/table/#components-table-demo-tree-data

Front conversations

[somangshu]

Should this be considered in new widget or a functionality of the current table widget?

[Nikhil-Nandagopal]

@somangshu does the underlying component support it as a prop or a separate component? Is it easy to configure in the property pane? My guess is a separate widget is better but as always let's fall back to the above 2 questions ☝️

[somangshu]

@Nikhil-Nandagopal while other design frameworks will tell us that the feature can be under the same component, I feel that the UX in the Appsmith environment will be very complicated (answer to the second question).

In favour of the above, I would also consider this to be a separate widget!

[areyabhishek]

How would the user choose what to show when the row is expanded? This feels like a table control, but for discovery we can treat it as a new widget.

[Nikhil-Nandagopal]

@somangshu it need not be very complicated. We just need a property to enable horizontal scroll / collapse columns. If horizontal scroll is enabled, all columns that cannot be fit on the screen can be scrolled to be viewed. If Collapse columns is enabled, all columns that do not fit the table width are collapsed into the + option

[somangshu]

@areyabhishek your point is valid, Setting this up from the property pane could feel complex for the user/dev.

@Nikhil-Nandagopal

• Isn't Horizontal scroll already present today?
• I thought the original requirement is to expand the row to show more details and not the column. Example

[Nikhil-Nandagopal]

@somangshu yes horizontal scroll is present. It is used when the user wants to see additional columns that cannot be shown in the table. Expand row also does the same thing, it is used to show additional columns of rows that cannot be shown in the table. Thus the two are simply 2 modes of achieving the same goal via different UX. One where you scroll to see the next column and one where you expand the row to see the next column. The additional details are just other columns if that is your confusion. Tables are always arrays of rows

[somangshu]

Got it. I was thinking about showing additional information against each row. This should be fairly simple them

[somangshu]

note:

• New prop: collapse columns - toggle; Table wide setting
  • Enabled: No horizontal scroll and the rest of the data appears as an accordion when the row data is expanded
  • Disabled: all additional columns can be viewed by scrolling horizontally

[somangshu]

@Tooluloope we need to triage if its possible to do this in the current table widget implementation

[Tooluloope]

From my findings, the Current Table Library doesn't support showing columns as it can only support showing nested rows and not column.

[Jonsey4]

I have a single sql table of items which may optionally have a parent and/or child in the same table. This kind of widget would be great for visually modelling these parent-child relationships without hacking something together with a single table widget.

[pchambless]

Will there be some requirement around how to represent a hierarchy in this widget? Like, the Select widget needs columns named value and label.. Some hierarchies use Integer (non-intelligent) ids while some people like to use intelligent IDs to represent their hierarchy parent-child relationships... I guess this could be some sort of property dropdown... like when you define chart Series?

[somangshu]

Thanks for the context @Jonsey4 @pchambless

cc @dilippitchika FYI, something to consider

[ame-appsmith]

Another user on Discord requested this feature.

[brusamatteo]

Really interested in this feature. The ability to show a BOM tree is very usefull

[zuroma999]

This would be a great feature. Other low-code systems I'm evaluating allow you to drag and drop widgets into the expanded area beneath each row, to build out whatever needed, and the widgets access the same context (currentRow) etc.

[Nikhil-Nandagopal]

@zuroma999 thanks for dropping that comment. I'd be interested to learn about what you're building and how you plan on using this widget. Would you be up for a quick chat? You can find a convenient time on my calendar below

https://calendly.com/appsmith-nikhil/30min?back=1&month=2024-01

[zuroma999]

@Nikhil-Nandagopal, sure, I'll book something on your calendar to discuss.