My goal with this was to be able to pass in header slot, and row slot so that the headers and rows could be customized while being able to reuse the bulk of the viewmodel functionality.
However, after using this in a parent component, neither the header, or row slots get rendered.
Okay - I have an update. Instead of trying to render the header and rows as slots - I’m wrapping the entire data table in a slot and passing that instead.
My next challenge is to give the slot access to the viewModel properties, like rows. Is there a way to say something like <slot rows.bind="rows"> so the slot can render the rows?
Okay - so the interesting thing is that the replaceable template works outside of the mdc-data-table, but not inside it. I think this is because of how mdc components likely work, they appear to be doing the dom manipulation in the component and don’t expect the <template> tag inside the component, that’s my guess anyways.
I was able to get what I wanted working by using the compose tag - and just copying/pasting the template with modifications but its less DRY.
Hey @zewa666 - the replace-part tag is now working for me! Thank you much!
Basically I wrapped my whole mdc-data-table in the replaceable template. This lets me replace the table, but preserve my pagination and filtering functionality. So what I have now is:
Awesome, hey could you perhaps Post an image so that we can see what this looks like? Also have you already checked out aurelia-slickgrid from @ghiscoding, perhaps that might be another nice fit if you’re looking for a powerful datagrid
That does seem like a lot of code, you should definitely take a look at my lib Aurelia-Slickgrid, the main difference in comparison to your approach is that I always prefer to have as small code as possible in the View and rather have that in the ViewModel, for example defining the Column Definitions, Grid Options (editing, filtering, exporting, …) is all declared in the ViewModel. Lastly, Aurelia-Slickgrid was originally built with Bootstrap styling but I now also have other SASS Themes like Material Design (with plenty of variables to customize everything).
I often see other grid libraries filling up their Views with lot of html code and tags, it’s not necessarily bad but it’s a lot harder to unit test, so you might want to keep that in mind.
Hey! Thanks for the feedback. I’m quite new to Aurelia - and every piece of advice I can gather helps me get a better idea of what I could/should be doing so your feedback is much appreciated!
I will definitely take a look into slick grid paired with some sass from the material design - that’s the goal anyways
And YES - I do want to have solid unit tests when I get this dialed in so that is definitely something to consider.
To give you an idea of the Material Design Theme that I created, you can take a look at this Example from my other lib. Also, like I said earlier, it’s totally stylable, I have added over 800+ SASS variables over time, so you can change it quite a lot. I have been working on the lib for over 3 years, it’s also fully tested.
Side Note, I have started working on the next major version 3.x, it shouldn’t be too much hard to switch from current version to the future. More info in this WIP PR, I’m expecting a release before year end and is totally unrelated to Aurelia2.