Display Tabular Data in React with Tanstack Table

[00:01] Here we have a Vite React app. We're just returning Hello World from the app component right now. We have Tailwind installed, and we have shadcn configured to create components in our components directory, which we haven't done yet. That's the first thing we're going to do. So in the terminal, We will go mpx shadcn at latest add table.

[00:39] This will add the table and all the associated components to this file. So back in our editor, we can look at that table component. ShadCN takes the strategy of giving you the components as a source instead of maintaining themselves and pulling them in as a library. So you can have a good default, and then when you inevitably need to come in and change something about these components, the code is there. And you can make whatever small or large change you need as you develop your app.

[01:23] So we have a table, a header, a body, a footer, a head, a row, a cell, and a table caption. So in our app, we're going to use these components. The first thing we'll do is, sure we'll import a table, but we'll also import all of these. I don't think we need a table caption. So instead of Hello World, yes, we want to render a name and an age, and then we'll render a table cell with John and an age of 20.

[02:06] Since our app is running, you can see we have a table. And if we inspect it, It's a table rendering under the hood. So this is all fine and great, but oftentimes you don't have a static table that you need to render, and you usually need fine-grained controls over how your table works. So a lot of times you'll need to use a table framework. A popular one these days is TanStackTable.

[02:47] So let's add it. Yarn, add, TAN stack, React table. With that installed, we can start defining our table. TanStack table is a headless table framework, so it does not care how you render your component, it just handles the internal details of the table state for you. So the first thing we need to do is import flex render, create column helper.

[03:33] We'll import use react table and get core row model. From here, the first thing we do is we set up a column helper. So const column helper. Column helper will take a generic, and that will tell TanStackTable what shape each row is in. So in our case, we have a row with a name and a row with an age.

[04:13] Next, as Cursor has already done, We've created columns. It's important to note that columns should either be defined outside your component, or it should be memoized inside of your component. You will get some crazy infinite loops, render loops, if you are constantly redefining your columns and passing it to use React table. So, the next thing we need to do is define our table. We'll go table equals use react table.

[05:05] We haven't defined data yet, so we'll go const data equals, and cursor knows I want John. We can add some other rows as well. So, now we have our table instance, we need to actually render the data that this table instance is managing. Cursor is guessing correctly. All we need is to call table.getHeaderGroups and each header group will have a table row and then the table header, or the head element for each column.

[05:51] The reason there might be multiple groups is you could nest headers in your table. So now that we have the table header, we can go and do the table body. It's very similar. We just call get row model. We map over the rows, and then for each row, we map over the cell in that row, and we call flexRender.

[06:28] FlexRender will take the value out of the cell and render it. It's a flex render because you can define JSX inside of your column definition to get really fine-grained control over how you render the data. And it looks like we need to import table head. Alright. So if we go over to our browser, we can see we have a table rendering with table rows, or table column headers, and table rows and cells.