Dynamic sized strips, tables, and date picker #963

elwerene · 2021-12-17T17:48:39Z

A (dynamic) grid and table layout widget which allows a mixed use of size constraints:

Absolute sizing
Relative sizing: relative to available size in dimension
Remainder: The remaining space is distributed evenly to all cells using Remainder Sizing
Relative/Remainder with minimum size

Also contains a date picker button which is based on the dynamic grid.

This is early in development and has definitely lots of bugs and rough edges.

I didn't want to wait longer as I love the results so far and I wanted to show it and open it up for discussion!

TODO

I added many TODO comments in the code which I want as a minimum to get this released, like:

Positioning of date picker popup
Colors on date picker popup
Internationalization/locale of date picker button/popup
Padding in table/grid should be worked over/switched to a more egui like approach
Is having two extra crates really needed? I developed it in extra grades but would not mind having it integrated into the main crate. I would prefer some integration into egui repository over maintaining external crates.

Screenshots:

emilk · 2021-12-21T08:10:30Z

This looks amazing 😍

emilk · 2021-12-27T16:25:53Z

There's a lot to review here 😅 The table/grid code could really do with some documentation too, explaining the high level concepts.

Adding two new crates creates a lot of extra work to maintain. However, I have been considering creating a new crate egui_extras for stuff like this - useful widgets built on top of egui. I think both the table and datepicker could fit in there. We could later consider moving the table into egui proper once it has been battle tested and polished.

kevin406972552 · 2022-01-08T00:18:58Z

Looking forward to it. When will it be available?

elwerene · 2022-01-09T21:04:23Z

@emilk I reworked most of the grid and table code to be more readable and with less boilerplate. Also I merged both crates into a new crate egui_extras. So maybe you could do another take in reviewing it if you find some time :)

emilk

Very impressive! I think the new dynamic grid could be very useful. I have left a lot of questions though, and have a few more:

What happens if the contents of a cell overflows the width we allocated for it? Everything else in egui expands the parent when this happens (parent window gets wider, etc), and I would like for this to happen here as well, if possible. It is very difficult to know beforehand how much space you need for a widget, so to have the parent layout expand as needed is quite important. This is why egui::Grid keeps a memory of the sizes from previous frames. Of course, this adds a lot of complexity.

We also have a name-clash: egui::Grid and egui_extras::Grid. Can we come up with a another name?

Some other things:

Add egui_extras to .github/workflows/rust.yml
Add egui_extras to sh/check.sh
Please add some labels to explain the grid-demo (just a bunch of rectangles doesn't say much)
Add source code links from the grid and table demos

egui_demo_lib/src/apps/demo/table_demo.rs

egui_demo_lib/src/apps/demo/widget_gallery/serde_date_format.rs

egui_extras/Cargo.toml

egui_extras/src/datepicker/button.rs

egui_extras/src/table.rs

songlinshu · 2022-01-28T20:52:00Z

Looking forward to it. When will it be available?

emilk · 2022-03-31T13:07:37Z

I'm pushing new commits to this branch, but they are not showing up in this PR, yet they are showing up in https://github.com/emilk/egui/commits/dynamic-grid

I think GitHub is having another bad day…

elwerene · 2022-03-31T13:11:47Z

I can see your typo fix

emilk · 2022-03-31T13:12:48Z

But can you see the nine other commits at https://github.com/emilk/egui/commits/dynamic-grid ?

Do you get them if you git pull?

emilk · 2022-03-31T13:15:02Z

In the meantime: there is a bug where a vertical Strip doesn't get the width of its child elements. This means it is possible to make the table demo window far more narrow than it should be:

elwerene · 2022-03-31T13:16:46Z

But can you see the nine other commits at https://github.com/emilk/egui/commits/dynamic-grid ?

Do you get them if you pull?

You are very active! ❤️
I got them by merging your dynamic-grid into mine 🤷

emilk · 2022-03-31T13:20:38Z

Weird that only the first commit got to the shared branch…

emilk · 2022-03-31T13:31:30Z

Do you know what is causing the width-resize bug? Seems like it should be a fairly easy fix (I hope)

elwerene · 2022-03-31T13:42:48Z

Do you know what is causing the width-resize bug? Seems like it should be a fairly easy fix (I hope)

I was just inspecting it, I'm calling ui.allocate_rect for each cell to make them clickable and on the whole Strip/TableHeader/TableBody so the scroll view knows about them. Did something change in that logic?

emilk · 2022-03-31T14:47:28Z

Nothing changed, and also the problem exists in 2ec346e (before any of my commits).

elwerene · 2022-03-31T15:29:54Z

I introduced the error in ae71f91

time to find the bug!

elwerene · 2022-03-31T15:31:06Z

Oh I guess it was me moving the table inside of the grid 🤦

elwerene · 2022-03-31T15:49:10Z

This is a shortcoming of the current implementation. The strip only has one fixed dimension, the other dimension takes whatever there's left. We could add a minimum size here. This could also be added later as an option to the builder. What do you say, @emilk?

This reverts commit dd02853.

emilk

Awesome work!

JulianRuiseco · 2022-04-01T15:03:52Z

Nice!!

emilk · 2022-12-05T10:30:34Z

@elwerene chrono needs a version bump, but it has a lot of deprecated functions. Would you like to help out?

elwerene · 2022-12-05T11:35:47Z

@emilk Sure, I'll have a look some time this week :)

elwerene added 12 commits December 17, 2021 15:33

integrate into egui

4e16d48

split code, documentation

5c87d98

documentation

eb8e1c4

add todo

5f4525e

do not import unused items

c097b38

add basic table demo

6fce5a4

do not overflow

23bcb81

heading and fix growing window

84a3c18

only allow one rows call

e00c726

add virtual scroll demo

31d8cbb

rename table demo

fc79988

add grid demo

a1ba1ec

elwerene marked this pull request as draft December 17, 2021 17:51

elwerene changed the title ~~WIP: Dynamic grid~~ Dynamic grid Dec 17, 2021

elwerene changed the title ~~Dynamic grid~~ Dynamic grid and date picker Dec 17, 2021

elwerene added 2 commits January 4, 2022 12:28

Merge remote-tracking branch 'egui/master' into dynamic-grid

767357c

Merge remote-tracking branch 'egui/master' into dynamic-grid

e373961

elwerene mentioned this pull request Jan 7, 2022

Table widget #296

Closed

elwerene added 3 commits January 7, 2022 17:13

add some comments, rework lifetimes of table row

a944208

change lifetimes so that 'a is always the lifetime of Ui

4f6f871

add more documentation

a346bcf

elwerene added 2 commits January 9, 2022 21:16

combine vertical/horizontal variant to remove duplicate code

7dec705

merge both crates into egui_extras

bb5da25

Merge remote-tracking branch 'egui/master' into dynamic-grid

99fdbb7

emilk requested changes Jan 24, 2022

View reviewed changes

emilk added 3 commits March 31, 2022 14:19

More optimization

c2a0f64

Clip cells in demo

40f62b1

Fix typos

73444a7

Fix table width size bug

04135aa

Merge remote-tracking branch 'egui/master' into dynamic-grid

5a9659c

set min table width

dd02853

Revert "set min table width"

fc94655

This reverts commit dd02853.

emilk changed the title ~~Dynamic grid and date picker~~ Dynamic sized strips, tables, and date picker Mar 31, 2022

emilk approved these changes Mar 31, 2022

View reviewed changes

emilk merged commit 1d32670 into emilk:master Mar 31, 2022

This was referenced Mar 31, 2022

Table resize #1438

Merged

More table improvements #1440

Merged

emilk mentioned this pull request Apr 16, 2022

Set sizes are fractions #313

Closed

justacec mentioned this pull request Apr 18, 2022

Provide ability to use GIT egui mvlabat/bevy_egui#91

Closed

elwerene mentioned this pull request Dec 6, 2022

Chrono update #2397

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dynamic sized strips, tables, and date picker #963

Dynamic sized strips, tables, and date picker #963

elwerene commented Dec 17, 2021 •

edited

Loading

emilk commented Dec 21, 2021

emilk commented Dec 27, 2021

kevin406972552 commented Jan 8, 2022

elwerene commented Jan 9, 2022

emilk left a comment •

edited

Loading

songlinshu commented Jan 28, 2022

emilk commented Mar 31, 2022

elwerene commented Mar 31, 2022 •

edited

Loading

emilk commented Mar 31, 2022 •

edited

Loading

emilk commented Mar 31, 2022

elwerene commented Mar 31, 2022

emilk commented Mar 31, 2022

emilk commented Mar 31, 2022

elwerene commented Mar 31, 2022

emilk commented Mar 31, 2022

elwerene commented Mar 31, 2022

elwerene commented Mar 31, 2022

elwerene commented Mar 31, 2022

emilk left a comment

JulianRuiseco commented Apr 1, 2022

emilk commented Dec 5, 2022

elwerene commented Dec 5, 2022

Dynamic sized strips, tables, and date picker #963

Dynamic sized strips, tables, and date picker #963

Conversation

elwerene commented Dec 17, 2021 • edited Loading

TODO

Screenshots:

emilk commented Dec 21, 2021

emilk commented Dec 27, 2021

kevin406972552 commented Jan 8, 2022

elwerene commented Jan 9, 2022

emilk left a comment • edited Loading

Choose a reason for hiding this comment

songlinshu commented Jan 28, 2022

emilk commented Mar 31, 2022

elwerene commented Mar 31, 2022 • edited Loading

emilk commented Mar 31, 2022 • edited Loading

emilk commented Mar 31, 2022

elwerene commented Mar 31, 2022

emilk commented Mar 31, 2022

emilk commented Mar 31, 2022

elwerene commented Mar 31, 2022

emilk commented Mar 31, 2022

elwerene commented Mar 31, 2022

elwerene commented Mar 31, 2022

elwerene commented Mar 31, 2022

emilk left a comment

Choose a reason for hiding this comment

JulianRuiseco commented Apr 1, 2022

emilk commented Dec 5, 2022

elwerene commented Dec 5, 2022

elwerene commented Dec 17, 2021 •

edited

Loading

emilk left a comment •

edited

Loading

elwerene commented Mar 31, 2022 •

edited

Loading

emilk commented Mar 31, 2022 •

edited

Loading