Table widget

[skairunner]

Is your feature request related to a problem? Please describe.
I want to display data that is tabular, e.g. a list of buy & sell requests in a market, with quantity, expiry time, price, and name.

Describe the solution you'd like
A widget that allows the user to easily display tabular data, including headers, would be great. Filtering/sorting features as well as alternating row colors would also be nice.

One consideration is that it would be nice to be able to have clickables inside table cells -- there are a lot of uses for that, even if they aren't relevant to me particularly. Additionally, some way to merge headers or cells or have sub-headers would probably also be nice to have.

Implementing a nice API for this is not going to be trivial, but there is some prior work available to draw off of, e.g. Javascript libraries for tables.

Describe alternatives you've considered
As far as I can tell, there are no ways to do this at the moment, other than having non-aligning text elements.

[emilk]

Yes, this is highly desired!

We have Grid to build on, and so we should extend that with some features (e.g. resizing columns) and add other features on top of it (e.g. headers and sorting).

[skairunner]

Alright, I've looked at Grid and tried laying out some data in it! Of the things you mentioned and the things I've thought, here's a couple things that are probably easy to do:

• "Fixed" rows with an auto-scrolling interior
  • This isn't quite possible right now, because if you embed a scrollarea mid-grid just breaks everything. It'll be useful for large tables where you want the table headers to be constantly visible.
• Resizing columns
• Sorting
  • Probably need to pass in a sorting function
  • Could be neat if we could support filtering by multiple columns at once
• Vertical lines to separate table columns
• Different alignments for contents

I've also read some about laying out tables, and realized that a table where you can merge arbitrary cells has a slightly different purpose to a filterable kind of table. The former is more for displaying data that has partial hierarchy, the latter for displaying spreadsheet-like data.

^ Arbitrary table

^ Spreadsheet-like table

So perhaps merging and laying out tables can be a separate layout method to the existing & augmented Grid. Plus, that means we don't have to rethink the current cell-by-cell layout.

[skairunner]

Explored a bit more. It seems like it's surprisingly annoying to allow a different background color for the header row, because the way rows are composited.

If I try to set the header row color before painting the row, I obviously don't know how high the row should be. I can instead set the entire rect's background color to the header row, and draw another rect for the rest of the rect after I finish writing the header row. I think that should work.

[emilk]

@skairunner Grid remembers row heights from previous frame, so if you are fine with a frame delay, then you do actually know the size of the coming row. See how GridLayout::end_row paints the "stripes" background before each row is layed out: https://github.com/emilk/egui/blob/HEAD/egui/src/grid.rs#L194

[sagebind]

I'm working on writing a custom table widget right now since I have need of one in an application. It is a work in progress and I'm also just learning egui, so the implementation might be terrible right now, but here it is: https://github.com/sagebind/smplinfo/blob/master/src/ui/widgets/table.rs. That might help as a starting point. Here's what it looks like right now anyway:

I ended up not basing it off of Grid for the following reasons:

• Having the table body be scrollable indepentent of the table header with the same column sizes was too tricky.
• Grid supports a lot of dynamic flowing logic that a data-driven table doesn't really need. For example, in a data table every row has the same number of columns and can be the same height, which is easy to calculate anyway.
• I wanted resizable columns, which goes against the grain of how Grid is designed to work.

This isn't really Grid's fault, it just wasn't quite the right tool for the job. Note that my implementation is still missing some features like resize handles in the header, but I'll get to that in the coming days or weeks.

[gents83]

I'll try to go over it to add some customization to Grid and build a more flexible Table widget.
Is it ok for you @emilk ?

[emilk]

I haven't had the time to look at this, but @sagebind makes a good case for having a table as a separate thing from Grid (especially the "separate header from scrolling" part, which is really important for a table).

[cn-hew]

hi,Is there table widget added now?

[elwerene]

@cn-hew

hi,Is there table widget added now?

I'm working on it

It would be nice to have more feedback on the usability of my proof of concept, so feel free to test it and leave feedback in the pull request!

[wellitecho]

Hi, would image in table cell be supported?

[emilk]

#963 has been merged. It doesn't quite support everything mentioned in this issue, but it is a really solid foundation to build on, so I will consider this issue closed and then we can open new issues (or PR:s) to fix the remaining things (like clicking/selecting rows and columns).