React Table Using shadcn/ui and TanStack | Personal Finance Dashboard App

today we will be creating a data table component to display our bank accounts we will start with a simple implementation using only chadan UI components later on we will introduce a react table from tack for the more powerful features so we have our data now it's time to create the table let's go to our components create a new directory for a data table I called it data table because eventually we will use this data table not only for bank accounts but for categories and all the other tables within the application and inside of it let's create a data table. TSX and in here we can say const data table export default data table it will accept some props the props will be called data table props let's Define the props interface for now it will be only data of type bank accounts and it will be an array so let's import bank account type from types bank accounts and here let's take the data so now we can go ahead and install Chad CN UI table let's run the CI command all right the table was installed so now we can use it so let's say return let's wrap everything in a div because I want to give a rounded borders for the table so let's say rounded MD and border now we can use the table component which we just installed so let's import table from components UI table firstly let's define our table headers the header will have one table Row in our table we'll have three columns so we need three headers so let's say table head the first one will be account number second one will be balance and the last one will be empty which we will use for um row actions a little bit later so for now let's just say table head let's give also some classes this one will have a width of 100 pixels let's import the missing pieces now we can implement the table body itself where the bank accounts will be displayed so table body and inside of it we need to map through our data so data. map bank account the data will be displayed in a table row since we are mapping through the data we need a key the key will be bank account account. ID now in each row we need three cells so let's do table cell table cell table cell the first table cell as you can see here is account number so we can say bank account dot account number for the second one we will be displaying the balance so bank account. balance and last table cell is for row actions so inside of this one we will say button with the variant of host let's also add some class names import the button and within the button we want an icon which is more horizontal let's assign some size classes so H4 with four for the table cell styling let's say that account number should be font medium and for the balance let's say it should be positioned right and the same for the actions icon all right we do have some basic table already so let's go ahead and check how it looks right now so for that let's open our bank accounts page and instead of this pan let's import our data table component which accepts data prop we'll pass our bank accounts all right let's open the application there is some hover effects out of the box from the Chad CN UI but there are some things I would like to fix so first of all I would like to make this card border or whatever stretched till the very bottom of the page so let's give a class last name of H full also as you can see the alignment of the table header and the values itself is a bit off like the balances on the left the amounts itself are on the right so let's fix that open the data table so all we are missing is a class name on the balance header and let's say text right the last thing is about this balance field so I would like to have a common component to display the money currency throughout the application which would format the string in a way I want like for example adding the dollar sign in the front or be a red color if it's a negative number so let's quickly create this component let's go to our UI and create money with currency component so in here we can say con money with currency let's export default money with currency now this component will accept one prop so let's define the interface for it interface money with currency props the prop will be amount of type number so let's grab this prop so type will be money with currency let's grab amount now we can say return span inside of it we would say amount but that would again just display the simple number but I want formatted currency so let's open our number utils where we will create a function for just that so let's go to Source utils number utils and here we can Define our currency formatter so const currency formatter for that we will use builtin JavaScript Intel which has a number format function the first parameter is a loal so let's say n us and then let's provide an options object so the style will be currency the currency itself will be USD minimum fraction digits will be two and maximum fraction digits again will be two so now let's export a new function export const format currency which will accept a value of type number and it will return currency formatter dot format and let's pass a value let's jump back to our money with currency component so here instead of just amount we can import our format currency function and pass the amount as a parameter let's import it one additional thing I want to do with it I want to color the amount conditionally meaning I want the amount to be in red color if the amount is a negative number so let's say class name for applying conditional class names we will use CX from the class names so let's import that and inside of it we provide the argument object we want to apply the text destructive Tailwind class if the amount is less than zero that's basically it for this small money with currency component so now we can use it in our data table so in here instead of bank accounts balance we want to include our money with currency component and let's pass amount which is bank account do balance and let's close the component all right let's take a look how it looks right now and as you can see the dollar sign appeared the formatting is also being applied and if I would pass for example a negative number so let's say - 999 the red color is also applied let's revert the change we can also add a table footer which will display the total amount of balance for all the bank accounts so let's do that let's firstly calculate the total balance it will be data. reduce sum and the current bank account side of it we will say sum plus bank account. balance and we will start the counting from zero so this will hold the total balance now to add the table footer we can do that after the table body so we say table footer table footer will contain one table row and in that table row again we will have three columns so table cell let's say total in the second table cell we again will use our new component money with currency and we will pass the total balance and the last table cell will be empty all right the table footer appeared as you can see there is a total and there is a calculated total sum of the balance but yet again we need to push that sum to the right side so we can do that right here so class name and text write all right so that is how you can create a very simple data table component using Shaden UI table but this particular data table is currently dealing only with bank accounts and we want to have generic data table which we can use with any kind of data either categories or transactions or whatever else we will have in this application and to build more complex and generic table we will be using react table from 10 stack this library is very powerful it helps you with building more complex rack tables it has things like autom managed internal State Global filters agregation column visibility column resizing row selection row expansion page ination sorting multisort and all of those Fe different features and that means that you won't need to build them from the very scratch yourself so let's go ahead and install this Library let's jump to installation and copy this npm install script open the project terminal npm install 10 St react table all right it was installed so now let's make this table generic so instead of data of type bank account let's say it will be type of D data so we also need to provide the generic for the interface itself the T data means that it can be anything like bank accounts categories or whatever the user chooses to pass to the data we will also need columns prop which will be column definitions of type column def from react table this prop will allow the table to render any generic column definitions you want so the type will be column Def and the generic will be T data and T value let's also add T value right here and of course the columns will be an array let's import column definitions from maybe not table core but react table itself so now we won't be needing bank accounts type anymore also we need to update the definition of our component because it needs to accept the generic values so T data and T value and the same goes right here we can remove the total balance for now okay so now we need to create a table object so const table equals and we will be using use react table hook and we need to provide some options so we need to pass the data we need to pass the column definitions and get core row model method which we can import again from 10 stack react table and we need to call this function we also need to take the columns from from props so this one is for a basic table later on when we will be adding a sorting uh we will add some more models for this react table now it's time to update our rendering so let's comment this one out and now we need to take the headers from the table object so let's say table dot get header groups and we need to map through the table head headers so it will be header group we can say return we need a table table row similarly as we had previously since we are mapping we need to provide a key so the key will be header group. ID and inside of a table row we need table heads so let's go go header group. headers do map header one more return let's say table head again we will need a key so it will be header. ID inside of it we can say Flex render which can be imported from the 10 stack react table this function is basically a helper for rendering so as you can see right here if rendering header cells or Footers use this custom function and we can say header do column do column column def dot header and the props will be header. getet context okay so this will render our table header we can pass whatever headers we want so maybe let's create the column definitions for this bank account table so it will make more sense for you so let's create a new file let's say bank accounts columns and in here we will be exporting one thing which one function which will be called get bank accounts columns it will return an array and this array will be of type column definition and we need to provide a type of our data so our type will be bank account we can import that from our types and now this array needs to contain objects inside of it so let's say the First Column of ours will be as you remember uh for account number so let's say this the First Column will have a header of account number and of course here we need an array so the first header will be account number you can provide for the header just a simple string or we can Define the second header which as you remember was for the balance and we can pass function for it so let's say header will be a function which will return a div the text will be balance and we also want to provide some class names and we will say it will be text right the last column as you remember was meant for the actions but we don't want any header for it so we can just say this column will have ID of actions so if we would come back to the data table you can see that the header will will have only like one header group cuz we don't want group headers uh we'll map through the one group and then right here that group will have headers it will take an ID it will take column column definition and header so basically this header is this stuff either a function or just a simple string now we can Define where this column will take the data for its cell so it can be done using accessor key or a function so we will just use accessor key and it will say account number so basically as you can see an auto complete shows what our bank accounts have in it so we want account number so let's say account number and the footer will be total for the total balance the second column accessor key will be balance and the last cell does not need any accessor key because it will just display a row actions icon with um edit and delete functionality but more on that a bit later so this right here would simply render our balance but yet again we want our balance to be formatted and we want to use our custom component money with currency for it so we can do that by providing a cell function and in here we can return a custom component which will be rendered in that particular cell so let's say it will be div let's give again the class name of right and we will use our money with currency component we need to pass an amount and we can get this amount from the props of the cell function cuz this contains a row and we can take row. original which basically is equal to our bank account and let's pick a balance let's also Define a footer cuz the first cell will have a total and in here we want the total sum so we can define a function for the footer it will receive props and the props is of type header context so if we would look what it contains it contains a column header table we can take table then we can say get row model this row model contains rows row by rows by ID or flat rows so let's just pick rows and now we can reduce to calculate the total sum so it will be sum and bank account actually this will be bank account row and now we can say Su plus bank account row do original dot balance and we will start from zero so this right here will be our total balance so let's say const total balance and now we can return div with the class name text right text right and we will be rendering money with currency and the amount will be total balance we will implement this one a bit later so basically right now we have a function which returns column definitions for our bank accounts table so the First Column will be account number the header will say account number footer total it will be it will be balance with the money with currency component inside of it with the footer of total balance and this one will be for actions which we will Implement a little bit later so let's jump back to our data table so we finished with our header we can move ahead to the table body this one we can comment for now just for the reference inside of a table body we will be doing very similarly as with the headers we will say table get row model so in here we can do it very similarly as was with the header so let's say table get row model this will contain all the rows of the table so we can do map the parameter will be row and now we can render a table row so table row we will also need again key so it will be row. a so inside of a table row we need to now render our table cells so this can be done using row. get visible cells function so get visible cells and yet again we need to map through them so it will be cell return let's return a table cell component the key will be cell. a and inside we can use the same Flex render function we will pass cell do column do column definition do cell so it basically takes the cell function from the column definition so for the second cell it was the this one money with currency and for the first one since it does not have like a specific cell function defined here like that it will just use accessor key and it will take account number for from a bank account and we also need to pass sell get context all right so this will render our rows so we can can remove this one now but we can add one more additional thing so for example I would like to display a no results information if there is no rows or no bank accounts so we can move that to a if statement so let's say table. get row model rows length and if it's not zero we can return our table rows but if it is zero we can return a different thing we would need table row just a single one we need a table cell let's say call span columns dot length let's also give some class name let's say h 24 and text Center and let's say no resultss yep so if we have any table rows it will render them otherwise we will see and no results found and it's time for the table footer so again let's comment this one for the reference we can say table get footer groups it's very similar as with the headers so we could even I guess take this one copy it paste it right here and instead of get header groups we will say get footer groups let's rename this one to footer group so the key will be footer group. ID footer group headers map. footer so this one again will be footer footer footer I don't know why it's called beheaders if it's like a footer groups but it is how it is if we can open that one it's like the types are the same I guess that's why yep so this one will render our footer one additional thing what we can do is to add the call span right here and let's say footer. call span all right we can remove this one so we can remove all the unneeded Imports okay so let's jump back to our bank accounts page and we need to pass the column definitions now so let's say columns and we can get that from our get columns function but I also would like to use memo for it so let's say const columns use memo function it will return our get Bank counts columns and the dependency array will be empty for now a little bit later we will be adding something here so I will show you so now we can pass the columns here all right maybe it's time to check how our application looks like and something is off we do have a balance but our footer looks the same as a header so let's check What's Happening Here so to the Footers and yeah we need not a header but we need to take a footer from the column definition what else we can change it's from the table head to the table cell component and now our data table is looking all right so we have a generic table which accepts the column definitions and any type of data thank you for watching hit that subscribe button if you like this video and in this one I will show you how to implement sorting for the data table

Channel: CodeWithOsvaldas

Views: 4,878

Keywords: react-table, react table, tanstack table, next.js, react, fullstack application, fullstack, tailwind css, shadcn, shadcn ui, tailwind, react hook form, react form, react-query, react query, nextjs api, nextjs api route, react table tutorial, react table component

Id: NfNjj-pZV30

Length: 28min 6sec (1686 seconds)

Published: Sun Feb 18 2024