How to Create Data Tables with Ionic 4

[Music] hey everyone what's up this is sign from the ionic academy back with an updated version of a tutorial we did in the past about data tables so today we will use the ng X data table package once again with ionic 4 in our application to create a cool layout that can present your data from Jason into a cool table so let's do this I already started my blinking yep to make this a bit faster and then I installed the package from Ed swimlane ng X data table and you can also take a look at the according github repository if you want to quite a lot of watch and stars here actually some parts of it don't look like they're really or maintained anymore I'm not completely sure but all the other packages I inspected were also not really that good so this one is really something that you can customize in a lot of ways you can check out the demos here and it's pretty cool because you see like the demos here whatever it is and then you can also immediately open and dive into the source code so the documentation is pretty great in terms of examples this documentation isn't that great but I think we can live with that so what we're gonna do is we're gonna create a basic example for our application which looks currently pretty empty so we can close this already and then get started because first of all we have to import the according CSS and this is already a bit different than the previous world so now we can simply import it from the package we will pick this up from node modules folder automatically just like the ionic stuff in here and then we need the index CSS which is like the main CSS these two are two themes that you can apply can you actually dive into that folder nope we cut seems great perhaps we can look at it in swimlane ngx datatable release themes that's actually a third theme I just seen let's import that one as well so that would be materials yes interesting I don't know what we're gonna see and finally the icons are used once we toggle a column to get like the little icons when you sort them so that's all we need in here for now also we need some data and I basically copied the data from the repository maybe I can show you the link it's that one yeah you can see the link really great you can simply dive into the assets data company and then get the content of this file and create a new file in your assets folder and because with angular I thinks since angular 6 we can load this data directly from a JSON file and don't need the HTTP client module we also need a little addition to our typescript configuration because we need two keys let me copy them over so I don't make any mistake so we need to the resolved JSON module which allows includes module imported with JSON extension and the second one is also I don't know exactly why what we needed so now we can directly load the JSON data and don't need to make any HTTP calls then on the pages where you want to use the package so now we're really diving into it we need the ng X data table module just like this so in all the lazy loaded pages where you want to use it make sure to edit to the array of your import and then we can dive into this I already created the basic functionalities haven't implemented it so far so first of all let's whoops there wasn't my idea let's import the data from and now I need to get the path right one more folder up assets slash company Jason a you see we don't get any red lines so that's pretty cool and now we can use this data right here and simply say private companies equals our data and there we go um to show you that I don't lie I will also look out of course not the data but this star companies but that's really a simple way to load a local JSON data file so again what learned is we say in Germany alright I wanted to implement two things for you to switch this style from dark to bootstrap but it appears we also have the material style so we will see how we can apply this let's set the table style for now to actually use material I don't know what we can expect here and then perhaps let's try to use the most basic version of our swimlane package can we can we maybe just dive into one of the demos once again come on give me the demos there we go because the most basic form is really really very simple I can't find it let's let's just do it manually so what you're gonna need is first of all the nut I on pad ng eggs data table component and this one defines how the general table looks so in here you got stuff like the rows which is your data so in our case it's companies and then a lot of more things that we can edit here but for now maybe let's just let's just use only this one and then you need to specify how the columns looks so ng X data table column and then first one is name I think we can also use lowercase for this so let's see if this already works let's not work with the demo here okay we see the data and we see a list of data hmm it's okay so far let's use two more of these for or what is in our data I think we had the gender and we had the company so we save and we load once again and we should see nicely formatted stuff we can actually already sort or filter no that's actually sorting you can also supply your own functionalities but we will not do this right now and now as you can see there's no styling we need to apply some more styling so let's use ng class and use the table style that we created in our homepage so that should be material right now well it's looking interesting I would say it's not really what I would enjoy and you see the rows don't have the right page and the header is a bit small and we can actually change the width of the columns so let's prevent some of these things so we go back and to the new definition so let's do the row hate should be auto and remember if we use the brackets we also have to supply an object and therefore we have the additional string in here so let's the row hate then perhaps the header hate and now I want to decode completion let's make this 50 interesting syntax your son and then we could also use the column mode which we should set to force but again make sure it is a string so now we are not allowed to change the column size anymore you see it's taking the whole why am I still allowed to do this column mode is set to force please I'm normally not allowed to do this anymore well well well what do we see that we actually have the right hate for the rows the header has a custom hate and let's change the table style to something bootstrapping I think that should look a bit better so there we got a nice bootstrap style and we can still change it that's actually interesting because I don't think that should be allowed with the forest mode but for now maybe we'll just keep this then let's do some more things on our table so in many cases I needed a button in the table for example at the end to delete to open details to perform some quick actions and to do so you can simply create your own template of an ng X data table column so let's simply name this one action let's make this not sortable because that doesn't really make sense and then in here we can now create our ng template that will be used for the column so in here we're gonna have a row value available we will have the real value of that column available and we also need to add I think my hope my face is not covering it we need the ng X data table cell template so this gives our ng template the right structure for the actual cell and in here a little button I think we should make it small to match the screen let's use an outline button and on click we want to call open with the current value of the row so let's say details and to show that it's working we should also dive into the open function let's let's for now just walk out the row so now we have added a new column at the end which is here we have a details button and once we press the details button we see all the details you see we can still order this that is a bit strange so if you have the parts sometimes don't immediately work and you have to dive into why they are not working so for example this in my case or in my eyes this should now really be not sortable we could edit here but I don't think that it belongs there and there are a few more other cases when you think you know how the stuff works but it's actually not so let us sometimes a bit strange I don't know if we need to make it like this that's just a bit of trial and error yeah actually that's the that's the solution so great we could discover this let's add a quick fix so we can change the style of our table and this one is something we will do in a second so for switch style I will just use the code I have prepared I just want to switch between the dark and the bootstrap style because actually actually the material style wasn't looking that great in my eyes so we will fall back to dark and bootstrap which are I think pretty cool so that's the bootstrap theme and and we should use the right variable names so you can immediately switch the theme right around to the dark mode which is also pretty awesome I think so both of them look really great well let's do something more and let's use a custom row class because sometimes you want to highlight different cells or a full row in that case you can use a custom roll class and we will set this to false in the beginning and whenever we press this little bulb icon we simply change it to be true and then we can implement on whichever row or cell we want to use it so if you want to make it for all rows you can use use it in this place and then say row class equals get row class actually we don't need this or you could also directly do it on the cells so I think that would be Cell class exactly and then you could have a condition on which something should be applied so now we need to implement the good role class and I will also lock out the rope once again for the class so you see that it's called right in the beginning and in here we just make a little switch between if the row gender is male then we were at the male row styling and otherwise the female one and if this row class isn't enabled then we just return an empty object and now to implement these two rules I initially thought that we just go to our home page we add a bit of styling and then everything is fine the problem is then we should remove the lock I think the problem is if we now inspect the row we don't really see the styling applied here and we also see there's nothing green or great but if I move this up to our global CSS right below this and then we hit the refresh then we see I haven't toggled the stuff I just remember interesting and also interesting that it's still working yeah basically the problem is now that thanks for this inside the get rogue class we're accessing this third customer class and the get raw class function is connected to the NZXT data table but it has no access to the scope of this so the actual class we can fix this by calling bind this on to the function which will bind our this to the function and then allows to access it in this place so the difference is now that it now works I'm not sure why this package is implemented like this and it's not working out of the box because with most angular packages they already works and also with open row we don't have to bind this in that place it always works so maybe if you know why it's not working if you're the creator of the package watching this let me know but now we are able to add a male or female row CSS class so maybe we can do this now once again and check out the row and then we toggle this and we see that here the female row CSS class is added and you see all females are now in red and the males ones are in green is there anything more I wanted to show you actually I don't think so we got the two different stylings which we don't see if the class is activated the dock is pretty cool the bootstrap is also cool and the material let's give it one more try I didn't really enjoyed it so well yeah no no I just like the bootstrap and the dark one if you got any questions for the package let me know below the video or directly asked on the ng aches data table swimlane package in here they're quite a few issues open so that's also why I'm not sure if it is really actively maintained but most of the time you can get around and you also find answers in the open issues so I hope you enjoyed this quick win today on data tables there's also the possibility of creating data tables with the angular material package if you would like to see that just let me know below and of course leave a like otherwise I won't do it and then also subscribe to the channel that's both of this is required in order to get me to do the angular material data table quick win I hope you enjoyed it make sure to subscribe check out the ionic academy my place to help you with everything ionic and then i'll see you inside the next video so have a great day and take care [Music] you

Channel: Simon Grimm

Views: 15,592

Keywords: ionic 4, ionic framework, ionic 4 tutorial, ionic 4 course, learn ionic, learn ionic 4, angular, ionic angular, ionic 4 angular, ionic guide, cross platform, hybrid app, ionic4, ionic 4 app, ionic for beginners, ionic 4 for beginners, ionic course, angular 7, angular 7 tutorial, ionic, cordova, javascript, ionic data table, ionic datatable, ionic json list example, ionic table view, ionic 4 data table

Id: _ym7bKfsMSs

Length: 17min 24sec (1044 seconds)

Published: Tue Sep 24 2019