Data Table with Async Refresh using HTML, CSS, JS and Express.js

hey guys how you going my name is dom and in today's video we're going to be creating um a data table for the web with refresh capabilities okay so what i mean by refresh capability is essentially our table uh can be refreshed asynchronously okay so for example right here this is actually going to be the final product now if i refresh on the bottom right here we can see the data refreshes and this is actually making a fetch request to the server side to get the updated data in this example uh these people might just be a list of uh you know different rankings for a game or something like that and we've also got a nice little time step which shows the last updated date time of the data okay so like i said if i go inside the network tab here we can see each request brings back of course fresh data and that simply just gets inserted into the table right here so we've also got a nice animation on the actual refresh button so if i go inside here and make the network let's just say slow 3g and then refresh we can see it now slows down okay so we get a nice little animation for the actual button okay so uh this uses expressjs for the server side okay so let's go inside this tab right here and begin from scratch to of course create what you just saw okay so let's go inside the text editor and we're going to be firstly creating a new node.js application okay so in the command line we can just say npn inits dash y to accept all the defaults then we can just install a few dependencies so we're going to be installing of course express.js so we can say npmi express we're going to be using chance as well to generate some random data so we can install chance as well as shuffle array just to randomize our data okay we can we can install all of those um and once that's done we can move on to installing nodemon for our development command okay so let's clear this and we can say npmi dash dash save the dev then include nodemon right here okay so now our package json looks something like this and we can actually go ahead and just include two scripts here so we can just once it's done we can just do this and we can say start and start can simply just be node at index.js and the dev environment or sorry the dev command or dev script can be dev then we can just say nodemon index.js okay cool so now we can go ahead and actually create our index.js file so make a new file here called index.js and inside here we can of course begin writing the server okay so first let's include express so we can say const express equal to require express we can also include um the chance.js library okay so trans equal to require chance then dot chance just like that and we can also include here shuffle array and we can just call this shuffle array like this equal to of course require uh then shuffle dash array okay so uh let's begin writing our single routes for the for the server side so we can say const app equal to just express then we can just go down here and we can say app.gets we're going to make a route just called data okay and inside here we're just going to be returning some sample data so first i just want to actually make sure everything's working so let's just simply for now send back a single line we can just say res dot send and pass through here hey dom okay and then down here we can just uh run the server app.listen on port 3001 we can just say yep console.log app is running okay cool so now let's test it out we can use npm run dev and we should get the app running right there okay so now let's go in the browser and make a request to our endpoint of forward slash data okay and we get hey dom right there so we can proceed with the working on the actual application itself okay so let's go back inside here and now we can define just some sample data okay so let's make a new constant up here called data and essentially this data is going to remain the same for essentially you know once we start the server the data right there is going to stay the same but on each request we're simply just going to randomize the the actual rows okay so with that being said for the data let's actually structure it in a way where we have essentially uh the headers and the actual rows of information separated okay so we can say headers right here equal to an array of headers so for example we can say name then age then profession then we can say country okay so those are four headers for the table okay now i forgot to mention earlier this table is actually going to be able to be generated sort of dynamically so essentially you don't need to define these headers right here in the front end the headers and the data is going to be defined on the server side so basically the table is going to work in most scenarios you can simply go inside your server side change a few columns around and it should work perfectly fine so those are our four headers now for the rows themselves we can just say rows and for this we're going to be creating a new array of 10 elements okay then we can simply just fill the array with undefined just so we actually have 10 elements to loop through okay then we can say dot map okay inside.map we can run this function and essentially we are then let's just let's just return an array right here and this array is going to represent each row okay so essentially for the name for example okay the name data is going to be of course generated 10 times one for each row right here and essentially it's going to be in position 0 or the first position in the array or index 0. okay that being said inside here now we can say chance dot name and chance is going to generate a random name for us okay so index zero contains the name then we have h so i can say chance dot age then i can say chance dot profession okay then uh then i can lastly or i can i can finally say chance dot country and pass through here an option to basically just say full equal to true this way we actually get a full country name as opposed to just the actual abbreviation so right here we have the data like i said we have the headers property and then 10 rows full of random data okay so now we can actually return this right here from the data endpoint so i can say rest.json and pass through here our data just like that let's now save this and then refresh the browser and we can see right here we get our data represented in a json format and like i said earlier we have of course the headers here and then essentially our data index zero name index one age and so on okay cool so now we need to actually structure it that way we actually have a last updated property on the data to of course display to the front end but more importantly we need to also shuffle shuffle these rows each time this endpoint is requested so to do that let's go back inside here and we can say instead of this we can say rest.json this time passing through an object we're going to say here headers is equal to data dot header so we're going to leave the headers untouched for the rows for the rows property uh we can call the shuffle array function and pass through here data dot rows to of course shuffle our array and then lastly here we can then say last updated and we're going to be setting this to uh to just simply be the current date type so we can say new date then dot 2 iso string and this will give us an iso 8601 string representation of the current time okay so let's save this and then refresh and now we get something like this we get the data we've also got right down here the last updated time step and of course the timestamp right there let's try again to refresh and we can see we get the data randomized each time okay so perfect um so now that is basically the data endpoint done and of course our table is going to constantly or when you actually press refresh on the table it is of course going to make a request for this data okay so now we need to create a static middleware that way we can actually serve some html css and js for the front end so let's go back inside here and we can say up here we can say essentially just app.use then pass through here express dot static then we can say just public so now everything inside the public directory inside here so we can make a new directory here called public inside here is going to be stored so it's going to be served statically which means if i make a new index.html file inside here and give it just a base template okay and we can just say hi let's save this and then refresh just on the root path there we now get high right there so of course our html file is getting served statically okay so now let's of course do the front end or the css and js to of course create this right here so let's go inside the index.html the very first thing to do is to include the google material icons library okay so i'll just copy and paste this link right here and i'll leave a link to this in the description below for you to of course copy and paste inside here then i can just say for the title let's just do data table with with refresh we can also include here a css file so i can say link for css at source and then app.css just like that okay let's do the exact same thing for a js file so down here we can say script for js source and then app.js let's now just format the document okay maybe not i just did a fresh installer window so everything is a bit loose at the moment but anyway let's go inside here make a new source directory just to include both the app.css and the app.js file so we can say app.css right here then of course app.js just up here okay cool um so i might just i might just indent this um to make it look a lot better um anyway moving on uh the way it's gonna work is basically we're going to be defining a data table in the html and then we can define the root of the actual data inside the actual tag itself so i'll show you an example so basically if i say div right here so div with a class of table dash refresh as our class name then i can say right here data data url is equal to right here forward slash data so with this being said all with this code right here this is all we want to do in the html in order to make this work so our javascript is going to handle cases where we have a table with this data url and this class right here and it's going to construct the table include the button all those things to make it work smoothly so that being said let's just let's start with the css and then move on to the javascript okay so i think it's going to be a lot easier to see things with the css done so let's go inside here and we can simply create basically two elements the first one is going to be the actual table itself and the uh and the second one is going to be the actual options menu on the bottom with the refresh button so let's make a new table right here with a class of table dash refresh underscore underscore table okay inside here we can say t head then make a new tr inside here we can define a few headers now so i can say for example name and then age for example okay then make i'll just minimize this okay where is it close then i can make a new t body inside here we can say tr and we can say dom let's make dom 45 years old okay cool let's save this and refresh and of course we get something like this okay so now let's just apply some css to this table to of course make it look a bit better so inside the app.css we can begin by defining or targeting the table with refresh class and i can say minimum width of 400 px and a at a maximum width of let's just do 1000 px okay i can say font size make this 14px and i find family of quicksand might look not too bad for the decode youtube channel okay let's save this one refresh and now we get something like this okay so we can now target the actual table itself so let's target table refresh underscore underscore table and we can firstly say border collapse we can make this collapse and a maximum width right here okay we can say box shadow we can say zero zero and then five px igbo zero zero zero and then 0.2 to make it look a tiny bit better we can also say border bottom at 2px solid and then let's just do 009578 for the decode green color let's save this and refresh and now we get something like this ok let's now target the actual table header itself so i can say table refresh um t head and then t r so of course targeting the actual table head row and i can say background let's make this decode green again and make the text color just a white okay let's save this refresh and we get this right here now we can obviously just target the actual table head columns and of course the table body columns so let's just let's just target the table refresh table th and then down here we can say td and we can make the text a line of these to be left and a padding of 9 px and then 18 px and we we may as well also make the font weight equal to normal just to eliminate the default building of the table head columns let's save this and refresh and now we get something like this okay so of course looking a lot closer to what we saw previously right here now let's figure out why the font weights isn't actually changing so let's go inside here uh font weight normal looks okay to me now let's just get rid of this and we get the same thing so honestly not too sure why it's um it's actually becoming bolder i might just try here you know what let's go back so td looks okay to me let's just make this a sand surf and see what happens let's try again okay so potentially the font installed on my system is not working correctly not too sure what's going on there but there we go we have the uh the normal front weight set for the table head and the table row so let's go back inside here now and copy another tr and we can also just we can also say essentially for for every second table row let's make it a light shade of gray for the background so we can say table refresh table t body and then a tr nth of type and pass through here even so now we can just say background uh then we can say a very light gray let's save this and refresh and now we get obviously every you know what let's make it odd let's go back and make this odd then we can duplicate this one more time save this and refresh and as we can see nothing changed for the css side potentially that's due to some caching no it's not um oh you know what let's make it even my mistake let's make it even oh and the last subtype hold on sorry n end of type odd no ant of type even okay cool let's try again let's refresh and now every second row starting from the second one is grey perfect okay so that right there is the table designed obviously we just used some some random data just for demonstration purposes so of course we're going to be replacing this with actual javascript so let's actually let's actually move on to doing the actual options on the bottom okay so let's minimize this and we can just i believe make a new div okay so um yep we can make a new div right here with a class of table refresh underscore underscore options and this right here is going to have a few things it's going to firstly have the actual span which contains the label so we can say for example span.table refresh underscore underscore label we can just say last update then we can say never okay then we can also say right here a button with a type of button and this is going to have a class of table refresh underscore underscore button okay inside here we can just include i with that class of material dash icons okay with the name of refresh okay so if i save this and refresh we can see we get right here of course our spam but also the icon has rendered so of course if i go to the material icons reference i've chosen the refresh icon just down here and by typing out refresh of course we can see that it's going to render that icon right there so everything's working perfectly fine in that sense so now let's go inside the css and of course style that to make it look a tiny bit better so we can say table refresh underscore underscore options for the options container we can just say display and make this flex and an align items of center okay we can also say justify content make this flex end so it actually floats to the right side and we can also say padding at 10px and then for top and bottom and 0 for left and right now also we can just copy this and we can say the options then we can select the direct child which is not the last child so basically in this case we're going to be targeting the targeting the actual span in the case where maybe you have multiple different options on the bottom right you know this will come in handy but ultimately in this case we're just targeting the span because of course it is not the last child and in this case we're going to say margin right make this 12px to of course add some space between each individual component or option in that list let's save this and refresh and now we get something like this of course everything is in the bottom right corner let's go back inside here now and we can target the actual button itself so i can say table refresh underscore underscore button and we can say firstly a background set this to be a light gray we can say color let's make this say a darker gray we can say border none outline of none a display of flex and align items of center and i justify content of center okay so all of this stuff right here of course the top three are going to be all sorry the top four are going to be for stylistic purposes just to flatten out the button and the bottom three here are just to ensure that the actual icon itself inside the span is perfectly centered horizontally and vertically we can also say here padding 5px and i bought a radius of let's just do 50 to make it a perfect circle and lastly a cursor of pointer let's also target the actual icon itself so we can say table refresh button targeting the icon let's override the default font size to be 1.2 em okay let's save this and refresh and now we get something like this okay so now we can work on having a class in the css to just ensure that the icon actually rotates when we want to refresh so we're going to be using a modifier class to achieve this so let's make a new rule set here for table refresh button then we can say dash dash refreshing and for this one we can simply say animation at 0.5 seconds rotate as the animation name then we can say infinite and then linear so basically the animation is going to take 0.5 seconds to run it's going to run the yet to be created rotate animation it's going to run infinitely and it's going to run in a linear pattern if that's a bad word for it so let's go ahead now and actually define the animation so i can say keyframes rotate of course using the same name as up here and we can just basically say two then for two we can say transform and then rotate one turn just like that so basically it's going to go from the default rotate of zero to a rotate of one turn which basically just rotates it a whole turn so now let's test this out let's go back inside the browser we're going to then refresh okay then inside here we can just add the actual class to the button so i can say dash dash refreshing press enter and now we get the nice animation as we refresh the actual button and of course this class here of refreshing is going to be added using the actual javascript okay so let's move on now to the final part of the css that being the actual label itself so let's go inside here add some basic styles for the label i can say table refresh underscore underscore label and i can say a font size of 0.8 em and a color of let's just do triple nine for a darkish gray let's save this and refresh and now we get this right here cool so now all of the css is done for the actual table we can move on to of course the javascript okay so let's go back inside the index.html so just2reiterates all of this stuff right here inside the actual container is going to be generated using javascript so basically when the page first loads up we are going to select every single element with the class of table refresh then we are going to build the html for the table and of course the div right here included in that is going to be adding the event listeners and a few other things to of course make it all work so with that being said let's just uh let's just comment out the bottom bit um you know what let's comment out the whole thing let's comment this out and just down here now like that okay cool so now let's head inside the app.js okay and the very first thing to do for the javascript is going to be creating a new block and this right here is just so we don't pollute the global namespace or just the global object with random variables and things like that so let's just go inside here now and we're going to be defining a function called update table so i can say function update table and we're going to leave this blank for now okay but basically it is going to do the job of actually updating the table when we actually press the refresh button okay let's move on come back to this later on but let's move on to actually targeting each one of our each one of our our tables right here and making them work so basically we're going to be initializing our mini component okay let's go back inside here we're going to be saying for const roots of document.queryselectorall we're going to be selecting elements with the class of table refresh and also a valid data url so we can say right here dot table dash refresh then we can say using square brackets data dash data sorry data data url so here we're using um a data attribute the actual attribute name is called just simply data url maybe this wasn't the best naming convention in fact you know what i might just name this data url to keep it a bit keep it a bit simpler okay let's go back inside here and make this data url okay cool so we have our url data attribute and we're selecting every element that meets this criteria so if i was to say console.log root let's save this and then refresh and we should get in the console here our table which we do or sorry our div which we do right here cool so now let's build the html for the table let's go inside here and we're going to firstly just say const table equal to document.createelement we can create a new table element okay we can also make one for the actual options container so i can say const options equal to a new div right here we can then just add the actual class for both these elements so i can say table dot class list dot add we can add the class of table refresh underscore underscore table and do the exact same thing for the options just down here so now we have obviously created both the table and of course the options right here so we can move on to actually including essentially just the html inside the table and of course the actual options so it's going to be very easy let's just use the inner html property so we're going to be saying table dot inner html is equal to a new template stream and essentially we're going to be pasting in here a t head so an empty t head a single table row okay also a t body and also a tr and this ti is gonna is just going to contain some text to say loading so we can say td then we can save loading inside here as the default for the for the actual text um when this first loads up just down here we're going to be running the update table method or the function up here so don't worry if you just say loading when you first create this um so now we can just say root dot appends okay and append here both the table and the options so now we're going to have both the table and the options appended to the actual root element of course this one right here so now let's save this and then refresh the page and now we can see we get loading right there if i was to inspect this we can see we have we have of course the t head with the single tr and of course the loading text and we've also got the actual table refresh options which are yet to include the actual options so let's include that right now let's go back inside here and we are going to be saying options.in html equal to a new template string inside here we can include the span with a class of table refresh underscore underscore label then we can say inside the default text we can just say last update and make this never okay and for the button type button class of table refresh underscore underscore button okay cool and of course including here the span sorry the i for that class of material icons okay and of course inside here the refresh icon so now saving this and refreshing we get something like this so now essentially we are ready to do the fetch call to of course retrieve the data but first one more thing to do inside or two more things to do inside the actual for loop here one of them is to add an event listener for when you actually click on the button so let's go inside here i might just firstly go up inside the update table and we can just say console.log hi something like that okay so let's go down here and now we're going to say essentially just update table and pass through here the root element okay so basically we're going to be updating the contents for this element right here which we are currently looping through i forgot to mention earlier if you have multiple tables which you want this functionality to you know be included for then of course just include multiple of these divs and it's going to work perfectly fine just replace the data url so essentially this for loop is meant to handle every single you know data table you have on your page so that is why we are taking through the table as a parameter to this function right here so that being said um we're passing through the roots element okay then we can just say options dot query selector we can select the table uh refresh button right here and we can just say when this thing gets clicked on so add event listener when it gets clicked on we are going to simply just update the table and once again pass through root so now essentially on load the table is going to be updated and also when you're pressing the button the table is going to be updated okay so that being said let's just refresh and we can see we get high if i press it again or if i press refresh we can see we keep getting high in the console so it's all working perfectly fine let's move on to actually you know fetching from the server side so to do this let's go back inside here and we're going to firstly make this function async so i can say right up here async function update table okay and then now we can pass through the actual accept the actual root element and i may and i may as well just add some js doc for this so i can just say here html div element for the root and i can just say description populates a data table with some data okay so quite a quite a poor comment if i'm being honest but you know what it does the job so inside here the reason why it's being async is because we're going to be taking advantage of a sync await to of course make the fetch calls okay so firstly when the table is getting updated we want to update the spinning refresh button so to do this we can simply say root.queryselector we're going to be selecting once again the refresh button and we're going to be saying for this essentially just class list dot add we're going to be adding the class of table refresh button dash dash refreshing just like that so now if i save this we should see the refresh working no it's not let's go back inside here and figure out why it's because i forgot to add a dot for the class name let's try it again refresh and now we get right here the spinning refresh button of course for the refresh let's go back inside here and we are going to be firstly or secondly inside here get a reference to the actual table element itself instead of the root so i can say constant table equal to root.queryselector pass through here table refresh underscore underscore table so now of course this table refers to the table which we created just down here so now we can actually make the request to of course uh retrieve the json so we can say const response is equal to awaits we're going to be using the fetch api so i can say fetch and then pass through here root.dataset.url so of course by saying dataset url i'm grabbing the data.urlproperty which will of course give us the actual forward slash data which are provided right here so basically forward slash data is equal to this right here okay cool so that is now done so of course we are fetching the actual response and then we can say const let's just do constant data equal to then we can say awaits response.json just like that so of course now um we are going to take the response from the server side and parse it as being json so now if i console.log we should see if i console.log the data we should see our random generator data which we did earlier let's uh go inside the browser refresh and we get right here of course the data presented nicely to us so now it's going to be it as easy as simply just clearing the table and inserting that data so let's go back inside here and we are going to be firstly like i said clearing clearing the data so we can say clear table and for the clear table we are going to be saying table dot query selector we're going to be targeting the t head tr so basically just a single uh table header row we're going to be saying in html equal to an empty string just to clear up the actual elements inside there already let's do the exact same thing for the t body so basically we don't want to i'm sorry we actually we actually want to remove the default tr right here so of course by running by running this right here we are removing this to essentially make it look like this okay cool let's go back up here and now we can simply just have two blocks of code we can say populate headers so for the headers we can simply just say for const row you know what my mistake for const header of response body dot headers okay so let's go back inside here real quick we can see i've got the headers array so basically we're going to be looping through this headers array um you know what this needs to be data my mistake so for const header of data sorry for const header of data.headers we're going to say table.queryselector t tr so the so the exact same thing right there and we can say insert adjacent html okay then we can say after begin then we can simply just say here th then pass through the header just like that right so basically using uh es6 template strings we're able to pass through the actual header which of course which of course is a string here into the th and of course insert adjacent html is simply just inserting this html right after the beginning of the actual table head so let's save this and then refresh and now we get something like this and you know what i actually realized just then in my previous example country is right here so let's fix that my mistake let's go inside here and let's make this what is it before end so now with before end it just means that this html is going to be inserted at the end of the element so basically it's going to be inserting it first being the name then the country whatever it was it's going to be inserting name age profession country in order if that makes sense so before n just means before the end of the root element let's go inside here and refresh and now we get the the headers in the right order cool so it's all working perfectly fine we can see it being populated right there okay cool so let's move on to the actual data itself so let's go back inside here and we can say populate rows for const row of data dot rows okay so for each row we can just say table dot query selector pass through here t body then we can say insert adjacent html once again using before end okay and we can say here once again using es6 template strings with the backtick um we can just make a new tr for each one of our rows of course this time rows data dot rows refers to our rows right here which i showed earlier basically just i'll just demonstrate why not maybe not let's go back and try again so our data right here of course our rows so for each row let's make a new tr okay and we're going to say essentially inside here row dot map because of course our row is actually an array itself so we have a 2d array here so basically row.map is going to loop through each one of our individual data columns so row.map and we can say col so col then we can just say return here once again using a nested template string we can say td inside here pass through a col just like that and then lastly we can just join this results um with an empty string is that correct maybe not let's figure out why so row.map okay that's probably why there we go so now we have created essentially just um using this we are converting each data column string into a td with the data inside of it and then with that array we are simply then just joining it up to make it a nice string of html okay so now let's save this and then refresh and we can see now we get the data populated right there of course in the correct order in the headers as opposed to my example right here so that's um kind of a big mistake by me but [Music] it doesn't matter too much so let's move on and the do the last two things of this video and that is going to be removing this uh this refresh rotation and of course updating this message down here so let's go back inside and we're going to be just say here we can just say update last updated text and this one is going to be really easy it's going to be just root.queryselector then table refresh underscore underscore label then dot text content is equal to let's do last update then we can just say inside here new dates pass through the data dot last updated then we can just say two local sorry two local string so um right here you know you probably could just use something like moment.js to make the formatting a lot nicer but let's keep it simple and use the built-in javascript formatting so to locale string is going to format the date for the locale which the user is running in let's save this and refresh and we can see right here nothing happened let's figure out why once again so query selector what's what's going on here what have i done so cannot set property text content of null okay this is probably not right so label okay table fresh not good table refresh let's try again and now we get the date printed right there so it's uh so it says here um you know june 29 at 8 38. okay that of course is in my own time zone it's basically just taken the actual utc from earlier so of course 10 34 am and converted it into of course my time zone but also it's formatted it to australian format with the date first then month then yeah so like i said you can probably use moment.js to make this a lot nicer but for simplicity let's keep it like that okay so the last thing for today's video is going to be stopping this button from rotating so very easy let's go back inside here and i can just say copy this this class this right here and i can paste it down here and i can just say stop rotating inside here let's say class list dot remove and pass through the exact same class of dash dash refreshing let's save this and refresh and now we get right here the finished product if i was to refresh we can see it refreshes perfectly fine and of course if i was to go inside here and make this fast 3g and then try again we get the slower refresh time so that right there is creating a data table with refresh capability using html css javascript and of course express.js thanks for watching guys and i'll see you later

Channel: dcode

Views: 16,565

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, english, with, example, examples, developer, lecture, recording, how, to, js, javascript, web, website, web app, application, nodejs, node, node.js, express.js, express, web server, async, fetch api, table, data table, columns, headers, dom, document object model, element, object, methods, function, append child, appendChild

Id: Qo-iQNXDf1c

Length: 47min 12sec (2832 seconds)

Published: Tue Jun 30 2020