Tables in NextJs Using shadcn/ui and TanStack Table

hey friends welcome back to the channel in this video we're going to build a user table using the shat CN UI Library we've covered chat CN in a previous video on the channel where I introduced 10 different component and UI libraries that I use we're going to specifically use the table component which is actually using tan stack table or react table under the hood to build this user table we're going to implement or look at how to implement pagination so if we paginating through the list of our users we're going to implement this action row where you would have different actions that you can perform based on the data in this specific row we're going to implement this sorting so you can sort by name or filter by name uh very easily and then at the end I'm going to also show you how to create this column toggle or visibility toggle where you can select what columns you you actually want to see inside of your table so let's just get right into it so if we're going to start from scratch and buil this together I've just gone ahead and installed or created a new nextjs app by running create next app at latest we are using Telvin CSS and typescript in the nextjs you can head to the documentation and there there's the installation steps specific to nextjs where you can actually start by creating an xjs app before copying or initializing shaten also I'll include a link to the finished project code on GitHub in the description so you can have it as a reference and compare it to your own so let me make this a bit bigger so you can see what we're doing so I've basically completed the first step which is creating an xjs application now the next step is actually to initialize the shat CN UI now shat CN is not going to install any components of its own instead it's going to actually install radx UI under the hood because it's using radx UI which is basically a headless accessible react component library that shaten is using or it's built on top of and by initializing shat CN it's basically going to add this component Json file to your project where it is actually setting up where everything is inside of your component whether or not you're using the app router whether or not you're using server components VAR is your Global CSS VAR is your teling config what style do you want to use do you want to use typescript and whatnot so it's basically a config setup for how then shat CN can copy different components into your project which we're going to see together once we start coin to the table uh component so this is explaining that you're going to go through a bunch of questions I've already done this but it's going to once you run this command it's going to ask you uh all the questions that I just mentioned you can select based on your project and then it's going to write this component's Json file as a config now the structure in which shaten is going to create components for you once you use the CLI is actually Crea a UI component inside a UI folder inside of your components besides the app folder as well as a lip folder for a function which is working with telin merage and CSS authorities now everything is set up for you to start using shaten components for example if you wanted to use a button you can use this CLI command which is going to go and get the code for the component the button component and copy that inside your project again we're going to see this in action on the left hand side as you can see there are different components that comes with chaten for example uh alert box dialogues avatars uh menu drop-downs and whatnot today we're working with the data table and we're going to learn to how to set this up but along the way through the process we're going to also use buttons and drop down so you're going to see actually using shat CN UI Li in action now one thing to mention before uh going forward is that this table component from shat CN is actually using the tan stack table or the react table uh which was named previously this is a component again a headless uh API for creating tables all this functionality that I just showed in the beginning of the video actually comes from the 10 stack table which is basically exposing a bunch of of apis so you can create tables from your data and we're going to see how we would do this and how we can add these different apis and functionality to our table such as the filter the Sorting the pagination and whatnot and let's head to the installation so the first component that we're going to install from the shaten library is the table component so I'm going to copy this script I'm using pnpm so I'm going to click on pnpm this is going to give me the pmpm version of this code and I'm going to copy this here which is basically going to copy the table component inside of my app let me just uh close this off and show you what I mean so inside of our components there's this UI folder now created and a table. TSX inside of it which is all the components that actually chat CN is exposing they different wrapper components for rendering tables table heads table rows table body and whatnot and they already have some styling set on top of them and that's the good thing about shaten uh it's not a component library in the sense that it just gives you the component it literally you can copy the code here which means that you have more control over the styling or anything that you would you would really want to uh change inside of these components so that was the first step the second step is for us to actually also install the tanack react table let me just copy the pmpm version as well here let's copy this and install the tan stack react table Library this is going to expose a bunch of functions and a specific hook called used react table uh that gives us all of those apis that allows us to work with tables now moving on it's explaining here that uh in this example on the site it's going to have a table of different payments so it's defining the type or the schema or the shape of our payment we're going to do the same for our users so let's move down to the project structure now this is how it's recommended here to structure your data you can do it differently but basically you have these three different components inside of your payments or in our case inside of our users folder so let me just create this this we want to create a folder here inside of our app directory that's responsible for showing users now the first thing we're going to put inside of it is a page. TSX this is going to be a server component responsible for rendering our page so let me just uh simply add a section here with some padding and a div with a container class and an ed which one that says all users so let me save this also close this off if you now go back to our application and go to for/ users this is the page component responsible for rendering for slash users okay so that's the first step the second step is to create this columns. TSX which is another client component that is going to include your column definitions this is the Heathers the cells and the different formatting that you want to actually have inside of your columns and the last one is this data table component which is literally the data table component that uses the shatan table component under the hood to actually render our data we're going to take the component from this file bring it into our server component here fetch some users and pass it to this data table component you're going to see this in action so don't worry if it doesn't make sense right now let's actually move on and create our next file which is our columns so I'm going to create the columns inside this user folder as well so I'm going to create a f file called columns again. TSX and let's just copy whatever is in here and then we're going to change it based on our use case so we're going to get the column definition and we're going to define a user shape which has an ID D it has a name that is a string it has an email of all email was down there so let's just eliminate this and it also has an image which is also a string it also has a last scene property which is a date string okay so this is a shape of our data now this is our column definition that I was talking about now each of these object are going to represent a column inside of your table so the first one can be the name of our user and we're going to call this name the second one the email and then maybe on the last um I want to show the last scene field and then a header of saying last scene now the accessor key is the ID for each column you can use this key to get values for a specific column and work with the apis and functions that's exposed from your use react table hook we going to see that in action and the Heather is literally the string that's going to show up on the Heather row of your table now there's actually more that we can do with these objects or these definitions we're going to build on top of this but for now let's just keep it simple and move on to actually create our data table component and then we're going to build on top of these definitions change the different formatting options or different functions that you have access to here later on now the next file we're going to create is just a data table component so I'm going to go to my component folder uh you can create it inside of this user too as you've seen uh here it's just creating everything inside of this payment for us it's the user I prefer to keep the component specific comp components or components inside of the component Library so I'm going to come inside the components we have this UI table this is shaten but inside the components itself I'm going to create a data table or data table like this to keep the same naming naming convention that chat CN also has now inside of this we're going to actually copy this and we're exporting a data table component so from a high level if I just collapse this V are rendering a component that is expecting columns and data it is using this us react table Hook from the 10stack library to pass in some data and columns and also get some table object back and this table object is actually the main op object exposing all the apis from the T stack table so as you can see here for example we're getting the Heathers group on the table object we're mapping over them and for each Heather we're actually showing a row and some T head or table head cells we're also using the get row model function which gives us all the rows inside of our table depending on the data we're going to pass into this component again we're going to see that in action in a second each data point actually is going to be a row inside of your table so for each row we again rendering some table rows and table cells and if we do not have any data so the rows length is not truthy we just showing a no result um cell okay so let's save this out now we have our column definition we have this data table which is actually getting our columns definition and also Al the data to render a table now the last thing that's left to do is to actually render our table now to render our table we're going to go to our page this is our server component where we can actually fetch our users and then pass the data down to our data table component so let me just copy some code and explain what we're doing here bear with me for a second so inside of this page component which is our first users page I've added this data table component we're bringing this in from our component this is the same component we just created together and then we are creating this function get users which is going to call this mock API endpoint I'm going to actually show this in a second as well but it's going to get some users and we're going to pass this data or our users as the data to our data table component we ALS Al passing in our columns definition so we have the column definition actually specifying how many columns rows and cells and Heathers we have and then we're passing a data which is using the uh 10stack react library to correctly render a table now before I move ahead let me just actually show you this mock API website which I'm using it's actually a service where you can use to define different shapes of data and it's going to EXP ose some endpoints for you to fetch your data um you can sign up for an account it's free you can create a project so in this project I have created two resources one users and then for each resource you can also have nested resources or linked resources for example users and to-dos and posts so if you're building applications this would be very easy to hit this end point and actually get those resources for the purpose of this video I'm just defining users and you would Define the shape of your user object you can use the fake ajs uh to actually fill up this different fields that you provide here and then it gives you or exposes an endpoint where you can call from inside your application to easily get the user data so very useful tool I thought to share this also here so that's the end point we're calling from inside of our get users function this is inside of our react server component we can turn our page component to an async function which allows us to evade our data right inside of here okay so going back to our page we should now have all the users uh literally returning 100 users to our table so as easy as creating these three different files which was a page component that we actually is where you're fetching your user data a data table component which uses this use react table hook from the react from the T stack table library that exposes some API so you can just work with your data on your table and we had this columns uh definition file where we actually Define the shape of our data and our table so that was the basic first step now let's jump into the next step which is actually formatting this cells or the data inside of each row or each column now for example here they are changing or formatting the amount cell because they're rendering some payments to show the dollar sign for us let's actually go to our table this last thing is a date string maybe we can just format this to show a local string now for this all you need to do is to actually go to that specific key or to that specific object for that specific column and pass in a Cell key and point it to a function that returns a jsx or a react element so you can instead of this strings that we put in here even for the Heather you can pass in a function or a react component so let me just copy uh this component that I have created before into this last scene column so what I'm doing on the cell itself is I'm getting the row information again you're getting bunch of props inside of these components or functions you can go to the 10 stack table documentation to actually know what other props or data is passed to this component but for now we're getting the row from the row we can call this get value function passing the last scene key to get the specific data for this cell I'm formatting it to a local date string and then I'm returning this div for that specific cell with some telin classes and then showing that formatted data so if I save this and go back to our application now you can see this last scene field it is actually formatted in a local instead of showing the date string is showing a local date string so going back to the steps this is how you can format different cells or return really whatever you want here now in the next step let's add some row actions this is the actions that we had at the end of each row with a drop-- down menu where you can view edit or delete a specific row and those type of actions so to add that what we need to do is to actually bring in this components inside of our columns file so this is our column definition and we're going to actually add a specific column called actions and for the cell and for the data we're going to return this drop- down menu from shat CN to have different options that that we can actually do inside that cell so first things first let's install this uh luced react component library because it's using some of its icons here so let me just stop the dev server then we're going to also need to install the button from shaten and the drop down menu so let's on the left hand side find the button I'm going to open this in a new page so to install the button we're going to use this CLI command and I'm going to copy the pmpm again this is going to just copy the button inside the UI folder of our project so if you see here in the component in the UI we should now have this button added let's do the same thing with the drop- down menu because it's also used in the actions so drop down menu they're going to also copy that code from pnpm just clear this out copy this and let's also get the drop- down menus okay awesome let's close this off and run the dev server let me actually also close this off so going back now that we have these components we can just copy this part of the code to add this column definition to our columns so instead of our columns maybe after the last scene which is going to come at the end of our row we're going to actually add another column definition so up top let me also import these inside of here so these are the components we just installed the button the drop- down menu and this icon now down here we are creating a new column because we're adding it to our columns array now this object has an ID this is the ID of these actions and on the cell on the specific cell on each row what we want to show is a drop- down menu that allows us to do stuff with that row data now we're going to get the user now this is another useful function to get the actual user so in some of your cells maybe instead of just calling the get value to get get that specific uh row or that specific cell or that specific key you want to have uh the object or the data entry or the data point for this whole row and then manipulate how this cell looks like instead of just getting a specific value so here we're getting the user object and we can access the user ID on it here what they have done is if you click on this copy it copies the user ID using the Navigator object from the browser it just copies the user ID and you can do different stuff for example we have the user ID here one of these um drop- down buttons or items can be to edit the user or actually delete the user so let's save this up and go back to our app and see this in action let me just refresh this now as you can see we have these action buttons added at the end of each row once you click you're going to see this drop down menu the copy user ID is just going to copy that specific users ID so if I go to a new page and copy that you can see user ID is number one here so that was adding actions or row actions to our table okay next step let's add some pagination cuz right now if we're just showing all of our users it's 100 users in one page so how do we go about adding pagination well first let's get some functions from the tan stack Library going to come here and on top of the core model we're going to get the pagination role model and we're going to add this setting inside of our used react table hook so right below where you're calling get core row models you're going to actually get the pagination model as well okay that's the first step second step is to actually pass in some pagination controls but before we add pagination controls which is going to just change Pages if we go back to our app you could see right now we only have 10 users inside of our table and that's because by default at the tack pagination it just puts 10 users or 10 um records or 10 rows inside of your table I'm going to show you how you can change that in a second but let's just add these um pagination buttons we're going to use the table object and the next page and previous page functions on it to navigate between different pages so let's bring in our button to our table here and we're going to also add this div at the end of our table so let me calm down this is our table here let's just wrap this inside of a fragment and I'm going to copy this pagination section that uses buttons from shaten also put a little comment here that that's pagination and that part upstairs is the table itself okay so what we have added is uh these buttons from shaten that literally on click are going to call the previous page or next page on the table object that we're getting back from this uh useful hook okay so going to our page now you can see these next and previous buttons added which allows us to easily paginate inside of our table now if you want to add more advanced pagination there's a section at the end of the documentation that it uses some reusable components from the example that you can see on the page to add more advanced pagination let me just show that to you for a second there's this pagination and these are using or these are the code for this tasks example so on the shat CN uh site there's this example page where you have different examples as you can see here there's an example for let me just turn this to light maybe it's seen better so this is a table example from shaten and as you can see down here in the pagination we have more stuff here if I actually make this a smaller you can see not only we have the next and previous page but we have these two buttons which goes to the end of our table or to the beginning it also shows what page you're currently on it also allows you to change how many records you want to see per page uh so if you want to implement that or take your pagination to a more advanced step you can just go down to that reusable component section at the bottom of the same page and copy the code now next step let's actually Implement sorting so it's going to be the same concept we're going to get some type definitions as well as some functions to add the sort functionality we're going to create a local state for our sort so inside of our component let me just come down here and create this local Source sorting state which is an array of different objects we can pass and then down here we're going to actually add some options to our hook so let's add them here so one of them similar to pagination is going to get the sorted model and the other one is going to just set this local sorting state anytime that the Sorting changes inside of our table we're going to also add this sorting state so let's just add this here so this is our table State and we are adding this local sorting state to the table state so they're linked or synced together anytime this changes that changes anytime that changes this changes now to make the header cell actually sortable we have to go to our column definition and change the header from being a string instead to be a function where we can actually include some buttons and some functionality from our col definition this time so let's do this we're going to need this drop down let's go back to our columns we're going to actually get another icon from the luid react and we're going to add this header for our name so inside of name instead of just rendering a simple string we're going to return a react component again these components are going to receive receive different props from tan stack table library and specifically here we're using the column to get the toggle sorting function and sort from ascending to descending for this specific column now I'm going to change this to say name and all we're doing is to add this button that's going to toggle the Sorting for that specific column which is the name so going back to our table you can now see this button is added to our name and when I click on it it just toggles the sorting and because TCT table already has our data it just sorts our data now let's also see filtering which is going to be a similar concept again we're going to get some type definitions so let's go back to our data table we're going to get some type definitions and also some functions this time we're going to get the filter model we're going to also need the input component from uh shat CN we're going to do that in a second now that we're here let's just also Define a state a local state for our filters we're going to use a state and initialize this to an empty array again these filters can be an array of different objects that is going to have an ID which is your column ID and a value for uh the value of the actual filter that's going to be used against the data in each row now down here we're going to also pass this options to our use react hook let me just bring this down here so we have the on column filter change again setting this state and we also getting this get filter row model and passing this function we just imported from uptp now we're going going to also pass in this local state to our table States similar to sorting we're going to have the filters as well and now all we need to do is to add an input and listen to the changes on that input and set that or pass that as a filter for our table so we're going to come above where the table is I'm going to include a div and inside of it I'm going to render this input which means we have to also in install the input component from shat CN so I'm going to go to the input again copy this CLI code for pmpm okay great let's restart the dev server close this up and going back to this page I need to get this input as well so let me just copy this from our components so we also getting the input now if I go back to our application we should be able to see this input which is going to allow us to filter our data based on the name now just to actually see what we're doing inside of this input for the value we're actually again accessing the table object get the column for sorry this is actually filtering by email so let's get the name because I copied the code from the example they had and in the example they're just filtering based on the email so we're going to get the column name we're going to get the filter Val value which is exposed from your table object so if there is any filter we're going to set it as a value otherwise we're just going to default to an empty string that's the value of our input element up top there and then down here on change event inside of this input we're going to get this same column and instead calling the set filter value and passing the event target. value which is the actual value that the user is typing in so if I save this and refresh let me just also update this to say filter by name so this says filter by name and now if I filter is going to filter by name now going back to the docs the next section is going to be actually changing the visibility of different columns so let's quickly also implement this we're going to use a drop-down menu let's go to our data table here and get our drop- down menu from shaten we've installed this already before so we don't need to install this this again components from shaten we're going to in uh create again a local state for the columns or the visible columns okay so if you're initializing a local state called column visibility we're initializing it to an empty object let's also get this type from T stack Library so drop down is there we initialize the local state again on visibility change we need to also set some local States so let's just add it here and also we want to add this estate to our table state so similar concept we are having this local state on change we're setting this local State and we're passing it as a state to our table that's the common pattern for using or adding these functionalities to our component or to our table now let's get this drop down component and add it to our div here so we're going to actually have another drop- down button if we go back to the application this column down here let's actually make this a flex box so class name let's go flex items Center and justify between to pass that column there this is a drop- down menu which is going to allow you to select what columns are visible inside of your table and whatnot now as you can see it's pretty powerful what you can do with these two libraries together it's giving you a table with all the apis that you would you could imagine and it's also looking nice because of the shats CN library now I'm going to let you also go ahead and experiment to this row selection this is going to give you the ability to select different rows so for example in this example that you can see here up top you can select different rows and perform actions you can also have this Advanced pagination or section at the bottom where it tells you how many rows are selected I'm going to let you experiment with that which is going to be this row selection section again there's three different steps uh but it's very similar concept to what we have done already to add that functionality to your table now as I mentioned at the bottom here there's also this reusable component section where it is actually giving you some examples of different headers pagination and column toggle that you can see inside of this tasks demo that I showed earlier so you can take this as an inspiration or use these type of paginations or the headings inside of your tables okay so let's quickly recap what we've learned we implemented a user data table in next 13 using the app router we use the shat CN UI Library specifically the table component and we also learned that it's using the 10stack table Library under the hood which exposes all the apis and functionality you need to work with your data and your table features like pagination sorting filtering and whatnot and as far as the structure goes we created three different files we had a server component a page that was responsible for rendering or for/ user page this is where we fetched our user data and passed it down to our data table component we created in the second file this file was where we're actually using the used react table Hook from the tack library and chaten components to actually render this table we also had a third file which was was our column definition this is where we Define the shape of our data so we can marry the data and the table the tan stack and the table component from chatan together to render our table I hope you found it helpful if you have any questions hit me up in the comments like always and I'll see you in the next one bye-bye

Channel: Hamed Bahram

Views: 12,005

Keywords:

Id: kHfDLN9w1KQ

Length: 37min 49sec (2269 seconds)

Published: Sat Oct 07 2023