Tanstack Table React - Bulletproof Your Table With Typescript

in this video you will learn how to use a library 10 stake table in order to get a table inside ja which is fully typed with typescript on extremely good level and in nowadays world the problem with a lot of typescript libraries is that they are not good enough you don't really get every single autoc complete every single validation possible and really often you just get some general typescript tools only for most important methods but it is not like that when we are talking about 10 stack if you don't know what is T stch this is a lot of different libraries which are extremely typ safe and which are the Pinnacle of how typescript should be written and the most popular library is obviously T query for react where we fetch data from the API and the second most popular library is probably 10st table the main point is that this is the cdk for you if it doesn't have any styling inside so this is not something like angular material where you are getting lots of styles out of the box this is something more similar to angular cdk where you are getting just functions which help you to build your table so no styling just useful functions but you will get enough functions to build your tables of any complexity let's have a look here on the documentation as you can see on the left it is supported with react swell View and vanilla JavaScript and typescript so what we're getting here are things like rendering tables headers cells ordering columns pinning sizing visibility filtering grouping pagination whatever you might need and all this stuff is covered with typescript extremely good this is why in this video I will show you how to build a user table with sorting and filtering by using this library and our first step is to jump inside console and install 10 stack react table because here we're doing it for react framework after installation let's look on my project here inside app I already prepared for us a user stable which is just an empty component as you can see here I have a little bit of styling that we will use and inside user stable TS I have this component so inside I have just a form with the input to make a filtering and I have a completely empty table without the head or to body and additionally here on the top I prepared a type user with ID name and age because this is exactly what we want to run in our table as you can see in browser there is nothing really to look at this is just a search from this form and our table is not there so let's start with implementing 10 St table and the first thing that we need to implement is columns this is why here even before our component we want first to get a column helper which is a helper of T which will help us to generate columns easier and in order to do that we can get create column helper as you can see from 10 Rea table and we must provide here our type as you can see it is unknown by default which is obvious and we want to provide here our user why that because with that we're saying for T okay we want to create a table for our users and as you can see now it is nicely typed with column helper user after this we want to create our columns and what is our columns this is just an array where we want to render an ID and name and age and in order to do that we will call column Helper and as you can see here we have access to our accessor and with it we can create the field as you can see here already we are getting nice auto complete we can't really write other fields here except of what we have in the user this is the magic of typescript when it is done on a good level this is why here here we want to select ID and here we have an object and we want first of all to provide here a header and this is just a function which will return for us an ad capitalized because this is how we want our header to be rendered and secondly we want to provide here cell we're getting information inside our cell this is the function and here we can call info. get value so it must render a value from our cell now here we can copy paste this column helper two more times and here update ID to name and the header will be name and the last one here will be our age with header age and obviously if I will write F here we will get an arrow that f is not inside our user now we want to use the hook in order to create a table so let's create here our table by using use react table and we must provide inside our options I'm sorry for Interruption but I just want to let you know that I have lots lot of advanced courses on different web Technologies where we create real applications and prepare for the interviews you can find the link in the description box below now let's jump back into the video first of all here we must provide data which is the data that we want to fill the table with we don't have here any data this is why I want to create a state for our users and set users and let's say that here we have a use state with an empty array so now we can throw inside our data users because this is the same data type like our user after this we must throw inside columns that we prepared also debug table true is nice to have for debugging purposes and the last one is get core row model but we must call get Coral model and if you for some reason don't know some function inside this Library you can use a search here on the left and just search for example get Coral model and get a nice documentation so we can see here that this is a factory that returns a model for our table and it must be called once per table this is exactly what we are doing here so we successfully prepared our table now it is time to Rend it inside our T head and T body so inside the head we can access table do get header groups and this is a function and here we can use map because this is an array and we're getting access to a header group and here we want to render row this is why here we must use a key because we're inside map and here inside every header group we're getting a unique ID additionally for styling for ourselves it is not related to this Library I want to add a class users table cell so here we have our row inside now inside we want to render cells this is where here we can take our header group do headers and here we're mapping through all our headers and we're getting access to every single header now inside here we can render our th and we must use here a key from header. ID which is also unique and actually I did it a little bit wrong this class name should not go on our TR it should go on our th now inside our th we want to render a cell information this is why here we can write that we have a div and inside we're calling a function Flex random and as you can see here this is a function which helps us in random in headers cells and Footers with custom markup so we can provide here our header do column do column definition do header and as a second parameter we must provide header. get context and I totally understand that it really looks quite difficult because we're calling lots of different functions from this library and you are seeing them for the first time but bear with me because this is what makes this Library really configurable you can do a library configurable if everything is extremely easy made so just for you to understand we have our table and we're calling get header groups to get all our RS if we have several of them which can be possible now here inside our row we're getting every single header so our cells inside the header and inside we're using this function Flex render we will use it for header cells for normal cells for footer everywhere now let's check if it's working I'm reloading the page here and as you can see in our table we successfully rendered our row with Z name and age now let's do exactly the same wiy body and here we want to render our table. get row model which will return for us our rows and we can map through them and get every single row and render it here so it is just normal TR with a unique key which will be Z ID now inside our T we want to call Z get visible cells by that because actually this library is configurable and it can be possible that you want to hide some cells so here we are mapping through every single cell we're getting access to it and we can return a TD and inside our TD we have also a key which is our cell ID and also a class name and our class name will be exactly the same like inside header cell this is just for styling and now inside ourd we can use exactly the same Flex render fun function and we're calling it with cell do column do column definition and here we have our cell and our second parameter will be sell get context so I think it is already a little bit more clear for you so here we have a table we render here our header groups and here we're rendering our roles with cells inside most importantly it is extremely difficult to write code incorrectly because typescript will scream for you let's check if it's working I'm reloading the p page and obviously we don't see any data at all because our users array is empty let's change this now what I want to do I want to simply try and throw inside a user with ID one name for and AG 40 as you can see now when I'm reloading the page we're getting this information inside our table but it is obviously not what we want we want to FEG this data from the API and in order to do that I have here running Json server with dbj let's have a look inside root of my project I have this TB Json with three users which actually means we want to F this information and put it inside our users so let's write here a user effect and we want to call it on initialize so here we have an empty array so what we need here is a URL to fetch our data and it will be Local Host 34 users now here we can use fet with this URL and we're getting the response with which we need to parse with the Json after this we will get users back as a response and we can set them inside our state by calling set users function let's have a look I'm reloading the page and we successfully rendered three users from our API but it is not all as you can see here we have a search and it would be nice to be able to filter our data and essentially this logic is not related at all to 10 St it is outside of it so what I want to do here I want to provide inside name like parameter which will equal our search value and essentially as you can see here on the top I have a form and a submission of this form and inside submission here I am updating the search value this is why we're using it here inside use effect but obviously we must provide a search value here as a dependency now every single time when we update our search value we are making an API call let's have a look I'm typing here Jack and we're getting from the back end just check this is how we Implement filtering with 10 St but realistically it is not about it at all we filtering the data from our API but what about sorting functionality it is completely possible to implement it inside T stack table this is why here on the top I want to prepare sorting as a property and set sorting now here we can write use State for the Sorting State and as you can see sorting state is coming from T react table this is why here we must provide an array and not some specific value because it is more flexible than just a string now here inside our table we must provide a state object with field sorting which we just created also we must provide a call back on sorting change which will be set sorting this is just updating of our state and this is everything that we need in order to implement sorting the only thing that we're missing is the possibility ability to change it here on the header we want to click and update our sorting and in order to do that we can go inside our th here and we want to apply first of all a different class and then add here arrows this is why here what I want to do inside our div I want to spread some logic this is why here we're spreading an object just in line and we can write here that we want a class name and we want to check if our header column get can sort which means our column is sortable then we want to attach here a class cursor pointer and select none in another case we're attaching here an empty stram and additionally to that we need here a non click event and it will be header do column do get toggle sorting Handler and as you can see we have another stuff like grouping Handler visibility Handler but we don't need that for now so the main point is here we have on click event and we are calling get toggle certain Handler which will do all all our Logic for but this is just a click we also want to render our arrows this is why after Flex render we want to render inside just a string but we want to read it from the object this is why in line we can create here an object with ascending and here we will have an icon for ascending and descending and here is an icon for descending so essentially this is an object and we can call a parameter on this object which will be header do column do get is sorted and we want to write here s string and if we don't have it then we want to render here null so as you can see here in line what we wrote is that we have an object with ascending and descending and here we are reading a value and our value is header column get is sorted as string which essentially means all this construction will return for us an icon in another case it will be null and you might think okay but why we're writing code really like this it is not extremely readable in line you could create here an additional function and move all this stuff here but the main point is that here you have access to your header this is why in a lot of examples of this Library you will find that they are writing the code in line to avoid changing context and jumping here and there to the functions which actually means here we're working with the header this is why we're attaching here attributes based on our header exactly the same with this stuff as we have access here to get is sorted we're rendering here our icons let's have a look if it's working I'm reloading the page but don't have any sorting now I can click here and we can see descending sorting I'm clicking again and we see ascending sorting I can click here and it will be changed but obviously our data are not changed at all because we don't react on that and we must do it inside our use effect by calling here sorting so let's have a look how sorting looks at all so here I'm reloading the project and as you can see our sorting is an empty array now I'm clicking on our name and we're getting inside sorting just a single object with a the name this is what column we're sorting and descending false I'm clicking here again and we're getting descending true because now we're sorting in descending but obviously here we want to put this sorting inside our URL and what I want to do here first of all we need to get our order we can use it by sort 0 do descending in this case we're providing descending in another case we're providing ascending I'm doing like this because our API wants a string not true or false and another thing that we need is a sort property and we can read it from sorting zero do ID if it is there it is fine if not then we want to fall back to ID because this is our default sting now here we can use these parameters it will be underscore sort equals here will be our value sort and underscore order and here we can put our parameter order let's check if it's working I'm reloading the page and as you can see it is broken cannot read properties of undefined it which actually means here when we're getting an order we want to check if our sorting is there because if sorting array is empty then obviously we can't read this description and exactly the same we should do here in our sorting let's reload the page again as you can see we don't have any errors and here our data I'm clicking here on the name and as you can see this column is resorted I'm clicking on the age and now this age is resorted as you can see 10stack table is not a simple solution but it is extremely flexible and when you get used to it your application is bulletproof with the typescript but if you still think that this is too much for your react table you might want to build it from scratch with sorting and filtering it is not that difficult and I already covered that in this video

Channel: Monsterlessons Academy

Views: 3,935

Keywords: tanstack table react

Id: bExHLN0W91c

Length: 18min 6sec (1086 seconds)

Published: Tue Jan 23 2024