1308451 - Implement generic table widget

Status: NEW

(DevTools :: Framework, enhancement, P3)

Description

[Steve Chung [:steveck]]

These components should be reusable for devtools (e.g. Storage panel, console.table() API):
- Sorting
- Column resizing
And actual sorting will be done by redux,

We'll create this generic SortableTable for Netmonitor panel first, then discuss the timeline for moving to shared folder later.

Comment 1

[Tim Nguyen :ntim]

It would be nice if the widget here could be re-used by the storage inspector, which means it should probably be in devtools/client/shared/components/

Comment 2

[Ricky Chien [:rickychien] (inactive)]

First time I came out with this idea to build a generic SortableTable widget is for reusing in devtools. However, we've decided to introduce the react-virtualize (see bug 1312481) which offers pretty efficient, highly customizable and powerful table widget [1].

Therefore, I think this bug is no longer used for its original purpose and let's use react-virtualized instead.

I would close this bug with "Resolve Won't fix" if there is no opposite view.

[1] https://bvaughn.github.io/react-virtualized/#/components/Table

Comment 3

[Jarda Snajdr [:jsnajdr]]

There are many places in devtools where we want to display a table with the following capabilities:
- columns are sortable, i.e., they display a sorting arrow next to the label
- columns are resizable by dragging a resize handle with mouse
- columns can be reordered by drag&drop
- there is a UI to select which columns should be displayed/hidden

Look at the table in about:config - it has all these capabilities, and it uses the XUL <tree> widget.

We should eventually have a module that can do this. It would contain React components for rendering the table headers, and actions and reducers to maintain the header state (sorting, column sizes etc.).

There probably won't be need to have components for the table content - there's not enough common functionality. But I'm not 100% sure about this now.

My recommendation is to keep this bug open and rename it appropriately to describe the task I outlined above.

I wouldn't worry about solving it now - I'd prefer to extract a reusable library from an existing working code, rather than designing the library upfront and then trying to use it.

Comment 4

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Jarda Snajdr [:jsnajdr] from comment #3)
> My recommendation is to keep this bug open and rename it appropriately to
> describe the task I outlined above.
I agree
 
Also note that there is already a tree-table component (see devtools/client/shared/components/tree) that has been implemented to reach the above-described goals. It's used by the DOM panel, JSON View and also rendering HTTP JSON responses. It doesn't support all the features, but should be definitely taken into an account and new versions should either be built on top of it or replace it.

Honza

Comment 5

[Ricky Chien [:rickychien] (inactive)]

Good catch! 

Let's keep the bug open. Maybe we can rename the title and the bug would be to implement a react component to cover all capabilities of the XUL tree widget.

Comment 7

[Sebastian Zartner [:sebo]]

Due to Honza's feedback on bug 1358414, I'm turning this bug into a request for a general table widget, which offers the features listed in comment 3.

Because the other bug has P1 and it depends on this one, I mark this one also with P1.

Sebastian

Comment 8

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Not on our roadmap atm