Add grid table demo

[richard-to]

One thing I'm beginning to notice is that some of the Angular Components aren't really that special. And that we can probably write pure Mesop versions that would be more amenable to the Mesop event flow.

So one thing that occurred to me is that we don't need to render tables using table mark up. We can just use flex box or grid. In this case I used grid.

By doing this, it allows us to implement more advanced functionality quicker than if we to work with the Angular Table component. And I know some people have been asking for more table functionality.

So as an example, I tried to build a a moderately featured table component. One major thing that is missing is pagination, but I ran out of gas. But otherwise we have custom styling, flexible custom cell formatting, sorting, filtering.

Another area to explore I want to explore is a custom web component that integrates some other grid library, such as AG Grid.

Ref: #338
Ref: #160

Grid Table With Sort

Grid Table Expanded

Grid Table With Filter

[wwwillchen]

Overall, I like this direction! I had a similar thought as you that people should just use CSS grid directly for these advanced table use cases :)

---

Not an actionable comment, but I do wonder if we should eventually graduate grid_table into mesop.labs. For example, with your other PR for dialog + snackbar, I was kind of wondering the same thing. One potential inspiration is shadcn which is a "copy-and-pastable" UI library - they do a really nice job of having demo code + impl code separated out, and then make it easy to add/copy the impl code into your project, e.g. https://ui.shadcn.com/docs/components/table

I filed an issue here: #579 to track this. I guess in the same way of how I was thinking about pip install git+..., maybe what I want is something more like mesop add github.com/google/mesop/tree/main/demo/grid_table.py which copies the file(s) over
into my project.

[richard-to]

Not an actionable comment, but I do wonder if we should eventually graduate grid_table into mesop.labs. For example, with your other PR for dialog + snackbar, I was kind of wondering the same thing. One potential inspiration is shadcn which is a "copy-and-pastable" UI library - they do a really nice job of having demo code + impl code separated out, and then make it easy to add/copy the impl code into your project, e.g. https://ui.shadcn.com/docs/components/table

I filed an issue here: #579 to track this. I guess in the same way of how I was thinking about pip install git+..., maybe what I want is something more like mesop add github.com/google/mesop/tree/main/demo/grid_table.py which copies the file(s) over
into my project.

Yeah, that's a great question. I was also wondering how we could make it easier for people to use these user definied components.

Yeah I think labs is definitely a possibility especially if we don't feel we can integrate Dialog / Snackbar in the near future. But yeah I think for now, the implementations still need polishing and improvements for them to make it to labs.

I also considered adding them to a separate repository, but I think labs would make more sense. Plus probably easier for downstream.

I like the idea of making it easier to copy and paste the component part of the example.

Yeah, I think for copy/paste, then I do like the mesop add github.com/google/mesop/tree/main/demo/grid_table.py I think maybe want to make it easier for people to find the path to the file somehow, but initially I think that would be a good start. Some caveats being how do we prevent people from just doing add for random python files.