Feat/table component #2786
Feat/table component #2786
Conversation
| }) | ||
| export class TmplTableComponent extends TemplateBaseComponent implements AfterViewInit { | ||
| params = computed(() => this.getParams(this.parameterList())); | ||
| dataRows = computed(() => this.getDataRowsFromValue(this.value())); |
There was a problem hiding this comment.
nit(blocking): the getDataRows from value function is async, so this computed will not behave as expected (no such thing as async computed). Instead it would be better to use an effect to respond to value changes and set the dataRows as a signal. I think it still kinda works in the frontend due to the additional cdr calls, but I'd consider that to be more of a bug than expected behaviour
| LottieModule, | ||
| MatSortModule, | ||
| MatTableModule, |
There was a problem hiding this comment.
nit(non-blocking): I can't remember how well we've implemented optimisation for this module, but might be more viable to include the imports in the table component itself and turn into a standalone component so that the modules are easier to remove from build when the component is not needed
There was a problem hiding this comment.
Thanks @jfmcquade
Overall I think component code is set out nicely and feature works well.
Longer term I'm still unsure whether we want to be importing the entire angular-material library just for one component, although at least with tree-shaking it only adds about 64kb to bundle size (which is still less than some components like pdf, lottie or odk viewer), and hopefully we can find a sensible way to include in optimisation system to remove from deployments that don't include the component
Longer term I think we'd come across similar bundle sizes if implementing AgGrid, so I think the only reasonable alternative would be Tanstack Table, although that would mean implementing quite a bit more UI code so I think maybe keep as-is for now.
Regarding my own use case to render data-items in a table, I think likely I'd be best creating another component (likely data_table component) that handles data subscriptions and finds a way to just pass the final row data to this component (may include minor refactor).
For the demo case you presented I think it might be good to include a few additional authoring options to implement pagination, as I can see the large data list is quite painful to render otherwise. I'll make a follow-up PR to address this and the other blocking issues I've raised
|
@jfmcquade Once happy may also want to tag Esmee for functional testing |
PR Checklist
Description
A very basic table component using
@angular/material's table library.Allows for sorting on columns.
TODO:
This is component is currently in use on the
conflict_forecastdeployment (which builds from thedeployment/conflict_forecastbranch). See web riots_list_view_page template, web preview here.Git Issues
Closes #2519
Screenshots/Videos
Demo of comp_table:
table.demo.mov