Creating dynamic and reusable data tables can be challenging. A data table displays all your data with features like sorting, filtering, pagination, and other cool data presentation options. By combining JTCN view and TanStack table, we can build a powerful data table for our project. So we're already using JTCN.
What is TanStack? Well, according to their official website, TanStack is a high-quality open-source software for web developers, and it provides headless, type-safe, and powerful utilities for web applications. So it helps with routing, state management, data visualization, data grads, tables, and more. And by headless, it means it provides you with only the functionality.
It doesn't come with markup or styles. We will need to implement those on our own. Okay, so in our use case, we only want to use the TanStack table here, so I'll click on that from the sidebar, and this will give us the tools needed to add all the functionalities we want to our ShadeCN table. To get started, click on Get Started, and make sure that you select View from the sidebar.
And let's head to the installation section. Right here in the ViewTable section, we can copy the npm command to install the package. Back to VS Code, bring up the terminal and paste the installation command. And I'll leave it to install the TanStack ViewTable dependencies and head to Shadesy and Docs to grab the data table component.
And here is a preview of how it would look like when we're done. We will have features like filtering and sorting and also checking the entire row or having row actions like this. So it's going to be really good. So let's head to the installation section and check the first step, which is adding the table component from ShedCM.
I'll copy the command, head back to VS Code, paste it, and add the new component to the project. This will add the table component to SRC components UI table. The second step is to install TanStack ViewTable, and we did that already. And the next section is about a code example.
And I must say that Chatsy and documentation is super impressive. It provides a comprehensive guide for implementing all the available features. And for me, whenever I see code examples and guides for something that I want to add to my project, my first step is to copy everything exactly as shown to make it work in my project. And once it's working, I customize the implementation to fit my project's specific needs.
And that's what I'm going to do now. So let's navigate to the prerequisites and see what do we need to do. And it looks like we need to add the interface and this payments array to my component. So I'll copy that.
And in VS Code, let's head to the tasks page, for example. vue inside the tasks directory. I'll hide the terminal like so. And let's paste what we copied right here below our function to fetch the tasks.
And I guess we no longer need to export the payments array because we're using it inside the same file. And the next step, it's just breaking down the structure for our project or the hypothetical project structure in this guide. But I'm going to use everything or I'm going to make everything work in a single component. So let's just skip this and head to that basic table section.
So right now we are in the guide to create a basic table. ts file. Again, I'm not going to create another file for that. I'm just going to copy this columns array over here and then paste it in VS Code in the same component, like so.
But let's remove the export, then save. And let's make sure that we import column def from tanStackViewTable. The H function also needs to be imported from view. And just like that, we did that already.
So we are importing the H from view. And also we are importing that column def type from tans tag view table. Okay. Looks good.
Let's see what's next. I'll scroll down. And we will need to create a data table component to render our table. So I'll copy all of that.
And in VS code inside that components UI, I'll create a new directory called data table, and then inside of it, data table dot view. And then I'll paste all the code. And what's next? Scroll down.
Render the table. Finally, we will render our table in our index component. So let's see how do we render the table. Scroll down.
And inside the template, we are using the data table component that we just created to pass the columns defined and also the data. So I'll just copy that from here. get back to VS Code in the index file, I'll scroll down to the template, and then we are no longer needing those here. vue.
As for the columns prop, we're already passing the columns defined right here. And as for our data, we need to pass the data we got from the documentation, which is the payments array. So I'll replace this data reference with payments. Save the file, bring up the terminal, and let's run a development server.
And when we navigate to the tasks page, we should see that data and here it is. It only has one column and two rows. And that's exactly what we have here. So the columns here defines only one column.
And for our data, we have only two entries. And that's it. We managed to get the table working in a matter of minutes. Next, we need to review the code we have in order to customize it for our needs.