How to Create a Styled Table with Web Components — JavaScript Tutorial

hey how's it going guys my name is Dom and quite a few of you have requested that I upload some more videos on web components so this one here is going to be on creating a styled table using web components now as per usual this one here is going to be reusable and we're going to be adding some CSS to it as you can see and we're also going to be giving it the ability to update the table data on the fly so if your data changes you can uh call the component and just update it as you you wish so the HTML looks like this for this page here we have the styled table custom component right here with an ID and a data- headers to specify what the table headers um need to be for this table so going inside this tab right here let's begin from scratch to create what I just showed you going inside vs code it currently looks like this nothing on the HTML we can begin by creating a new file called index.js we're going to be using JavaScript modules here so let's import that script with a type of module and say Source index.js we can now make a new folder called components this is where all the components for your website May reside I'm going to be only having a single one here of course table let's make a new Javascript file called table. yes we're also going to have a CSS file called table. CSS okay now we're going to be uh beginning on the table uh implementation so the actual class to represent a table we're going to say export class table extends HTML element now if you haven't seen web components before this here is just the uh the actual template or the definition for the component now if you want to have a custom element for it you must say extends HTML element and we are exporting here so we can then import it inside the index.js file now the Constructor for this so what happens when the element is created we're going to say super so call the super um Constructor that there is also a requirement for custom elements we're also going to say here this. attach Shadow and provide a mode of open this here is going to allow us to have our own HTML markup to represent the table itself and actually uh yeah have our own protected Dom for this component this means that any CSS that is external to this component won't affect the elements within it so more on that very shortly let's now hop down here and say connected callback okay so this here is going to run whenever uh the element is on the page so at this point you are safe to begin uh yeah messing around with what goes inside of it you can grab the table headers you can update the table with some data whatever it might be you can do it inside here what we need to do is we need to say this. shadow root. innerhtml is equal to then using the back ticks near the one on your keyboard it's going to allow us to have JavaScript template strings now inside here I'm just going to say table just like this okay I'm now going to stop here and I want to show you guys some results so let's now import this table component into the index.js file we're going to say uh import okay then say import from module uh component.js make sure to include the JS there and Within These curly brackets we're just going to say table just like this so now we can hop down here and we can just say uh custom elements do Define and then we're going to say here styled Das table as the first argument this here is going to be the tag name for your custom element the second argument is going to be the class itself so essentially what class is going to represent this custom element on the HTML so now if I save this go back in the browser nothing happen Happ s but if I go back in the HTML in the body I can now say styled DT just like this save this back in the browser and we get table right there so let's inspect what actually happened here if I go to the elements section we can expand the uh the styled table and we have this Shadow root so this here like I said earlier is like a miniature Dom or miniature document just for your web component so you can have HTML inside here and we're going to be adding a table element actually right now so going back inside here in the JavaScript let's replace this with a new table okay now you'll notice that I'm not using any classes such as class equal to style the table or anything like that that's because like like I said we're inside the realm of just this component so essentially we can reference these tables directly using CSS which I'm going to get to very shortly but for now just know that we can literally just say table and it's going to be perfectly fine now inside here we're going to say t head okay to specify the table header and we're now going to have a new T inside here for the top row The Heading row okay we can use a new th tag and let's provide some headings we can say ID then we can say uh username and then we can say um country I believe it was let's go back and check that one and yep there we go fantastic so we have those three headings let's save this go back in the browser and we get this right here expanding the table once again we can you know we can now see we have the actual table element and the table head and the row and it's all displaying as it would normally for a standard HTML table fantastic so we do know that we need to grab these headers from the HTML itself just like I showed you in this example right right here this data- headers property or attribute so we are going to get to that but first I want to show you uh the CSS so we need to now include this CSS file inside the web components now we only want these styles to apply to the web component therefore we can place a link within the shadow root let's say link Rel equal to stylesheet as per normal and an HF equal to components for sl. CSS Okay the reason why I've got SL components is because this refers to uh the root of the web server so in our case here we're using Local Host Port 5,500 it just means SL components sl. CSS okay so that's why we've chosen to use that path there and now if I save this go back in the browser we can see in the network tab in in in the CSS section there is a request to that table right here and of course you know it's it's grabbed onto it and it's working so let's now Define some Styles inside that CSS file I won't go into the Styles themselves uh too much but um let's just Target the table now and you know as we can see here we're targeting the table element not a class or anything like that because we're again we're all contained within the shadow Dom itself so we can say border-collapse is equal to collapse font size at 0.8m a font family of let's go for inter and then Sans serf as the fallback and a minimum width of 400 pixels let's also Target the uh the table header row going to give this a background color of my decode green 9578 and a text color of white let's give a text align of left as well as opposed to the default of Center in some browsers now we're going to be targeting uh both the table head cell or both the table head cells and the table data cells give this a font weight of normal and a padding of six pixels top and bottom and 12 pixels left and right of course all this here is going to be subjective it's up to you guys on how you want it to look also going to Target the T body and the TR so every row inside the body of of course we're going to be populating that soon but for now let's have some CSS here we're going to say border-bottom one pixel solid as well as a t body and then TR uh nth of type we're going to say even here and we're going to Simply give it a light background color of sorry a light gray for background color so background color of a light gray F3 F3 and F3 so this just means that essentially every second row is going to have a light background color fantastic so I'm going to stop right here go back in the browser and we get on a refresh let me just turn off this slow 3G and we're good to go so we can see here that the Styles have been applied to the table fantastic so uh going back inside the Javascript file what's next well I want to then I want to populate the headers based on whatever the user the developer wants them to be so let's go back in the index.html and we're going to be having a new property here called data- headed so this here is going to be a comma separated list of table headers let's say ID username and Country so now inside the Javascript file we need to in the connected callback get a reference to all of those headers individually right so we'll say here con headers is equal to this.get attribute actually my mistake this. dat set okay data set do headers okay we're now going to say dos split on a comma so this data set headers is going to get this value because of course headers matches the data attribute there and we're now going to say split on comma which means take it and convert it into an array and split it by comma let's console log the headers here go back in the browser refresh in the console we get ID username and Country fantastic but if you accidentally put spaces around the things like this back in the browser those spaces are going to carry across to the JavaScript so let's fix that by using a simple trim here we're going to sayit do map grab the header then say header. trim just like this I'll save this go back in the browser and they are now being trimmed fantastic so now let's get these headers and inject them inside the table row now of course there is a risk that maybe your headers have HTML markup or there's a security risk due to the fact you could inject any code you want in here but because the developer is going to be specifying what goes in the headers there isn't much of a risk here so we are ultimately in this scenario safe to just start injecting those headers in the table row so we'll say here using the uh JavaScript dollar sign and curly braces for the template strings we're going to ENT entally take each header value and convert it into a th so one of these here okay let's say inside these curly brackets headers do map of course map is going to transform each value inside the array we're going to grab onto the header and we're going to say look let's return a new string for each header this string is going to be a table header cell just like this and we're then going to inject using ass sign curly brackets going to inject that header inside there okay then once we have this array of table header cells we can now say dot join and we're going to join on empty string and what this does is it's going to take those th's and it's going to uh yeah just join them together and make it output to the T to the TR right I'll save this go back in the browser and we get the same results but this time it comes from the h HML let's change this to prove it let's change username to instead be display name back in the browser and we get this here fantastic inspecting the elements here just to further demonstrate this we can see that yes they are indeed uh populated in the table row so that is working okay the next step for this table is going to be to populate the data itself that's probably the main part right so we're going to create a new Setter down here called Data this here is going to take in some new data okay now I'm going to use some js doc here just to give us some type hinting in vs code so saying forward sorry saying SL asterisk asterisk I can now say at Pam and say the data Pam is going to be of type string string so it's going to be a multi- dimensional array of string values let me go back inside the index.js here and just specify what what this will actually look like so in my example I had uh this data I'm just going to copy and paste it from that code and it looks something like this very simple like this so you have your data const let's just call it new data equal to an array and we have this here so it's an array of arrays where each each array inside this one is a single row and each item inside the nested array is a single column so we have the ID username and Country so that's where I got this string uh you know square bracket square bracket from that's the type for that uh parameter fantastic so now inside here what's it going to look like well we need to now essentially build those table rows to be injected inside the table body so first let's get a reference to the table body itself we need to create that so let's go up in here again in the template and just create that t body okay then down here let's get a reference to it we're going to say const table body equal to this. Shadow root. query selector then provide here t- body again guys we're staying within the shadow root we're only looking at everything that's inside here when we say query selector okay we can now say const rows is equal to I want rows to be an array of table row elements TR elements right so we're going to say here data. map so for each row inside this array okay we're going to say row data okay for each row we're going to say const row equal to document. create element we're going to be creating a new TR element here then for each cell or each item inside this row here we need to make a new TD element for it so we'll say here const cells equal to uh row data do map then say cell data okay so now cell data refers to an individual item so for example 8831 dcode Australia these are all cell datas for this particular row here okay then we just going to say here contell equal to document. creat element this time we're going to say TD then we can just say cell. text content equal to cell data then return that that cell so now the cells is a list of TDS let's stop here and just demonstrate what's happening console.log CES okay now we need to call this set data we can do so by going back inside the index.js and we need to grab onto a table first so um in this case this table then inject that data so let's give it an ID we'll say ID equal to users then inside the index.js we'll say const users table equal to document. getet element by ID pass through here users then just say users table dot data is equal to new data save this back in the browser in the console inside our tab here we can see we get this for every single Row in this case two rows right here one two for every row it made three TDS okay I can't expand this properly and show you what it is but I'm sure you understand guys that's a TD for every single cell so back inside here now once we have those TDS we now need to append it to the row so we'll say here row. append dot do do cells we'll use the uh the spread syntax here to Simply uh yeah uh in append those cells to the created row and once you have the row you then need to return that so return the row because we're inside a map function here so now if I console log the rows back in the browser you'll see a array of two TR elements and we're almost there we now need to Simply take those rows right down here and we're going to append that to the table body so we'll say table body. innerhtml equal to an empty string to clear out any existing rows then we'll say table body. append and now dot dot dot for the rows save this back in the browser and there we go um that data has been you know provided to the table now one last thing before we finish off this video is that um inside JS if you want to get some type hinting for your custom elements uh cuz right now this uses table. dat says any right and it doesn't really know doesn't know what um you know you can provide it with so you can just say using JS do once again asterisk asterisk uh you can simply just say here at type and then say table so using the curly brackets so now if I hover over it data tells you what it is so yeah I guess you know you have a bit more a bit more um type in nvs code if you're not using typescript of course um yeah with that JS doc so um yeah that's basically it guys this is how to create a styled table component using web components in JavaScript I encourage you to create some of your own uh you know methods as well for example You may wish to have a method called highlights row which allows you to pass an index in that will highlight that row um yeah I guess at this point it's all customizable and it's up to you guys how you want to um use your table so that is all for this video hope you guys enjoyed that one and you learned something if you did make sure to drop a like And subscribe to the channel and I'll see you guys in the next video

Channel: dcode

Views: 5,547

Keywords: Web Components styled tables tutorial, Custom table design with HTML Web Components, CSS styling for data tables in Web Components, JavaScript table components in web development, Stylish tables with HTML and CSS in Web Components, Web Components shadow DOM for tables, Creating reusable table components with Web Components

Id: ggtL1rxpx8c

Length: 20min 40sec (1240 seconds)

Published: Wed Dec 20 2023