Course lesson
Learn how to display custom components in a Tanstack Table cell, including how to render capitalized text, apply conditional styling with class helper functions, and format dates using the Intl API for readable display.
Learn how to display custom components in a Tanstack Table cell, including how to render capitalized text, apply conditional styling with class helper functions, and format dates using the Intl API for readable display.
flexRender allows you to utilize the cell callback method in your column definitions. Tanstack table will call this function to render the custom component you defined.
Course lesson
Learn how to display custom components in a Tanstack Table cell, including how to render capitalized text, apply conditional styling with class helper functions, and format dates using the Intl API for readable display.
Here we have a table rendering static values. So each cell is just rendering its plain value that lives in that cell. In the code, you can see the name of John and Jane and 20 and 21. Tan stack table is just getting the value here and rendering that inside of the cell. If we went cell, cell.getValue, If we went cell, cell.getValue, this is doing the same thing where this callback function hands us the cell, and then this cell has helper functions that we can use to create a custom view of this cell.
So back in our code, you can see nothing has changed. If we want to render a custom cell, it's easy to do. We can render a p tag with a class of capitalized, so say our data didn't have well formatted values, we can go back to our browser and if we look at this cell, now we're returning a p tag with the capitalized value. You'll Notice that we're just returning the plain 20 value because we haven't wrapped anything in the age cell. You can do a lot of things.
It's just JSX. So if we wrap this in a function and we go return, or we will go const age equals, yes. So CN is a class helper function that ShadCN gives us. If the age value is above 20, then we'll apply the green text. If it's below 20, we'll apply the red text.
So you can see we have custom rendering going on. Let's do one more. We'll do date of birth. And here, Cursor knows what I want to do. We'll add all of the dates of birth.
And then what this is doing is it's creating a date formatter with the INTL API. We're using the medium date style. And then we're going date formatter dot format and then passing the cell value into the date. This would fail if we weren't certain that the date would parse. So you would want to be careful with rendering dates like this.
But we know that the dates are in the correct format. So now we have a date of birth that's rendered in a nice readable format. This is all powered by this flex render call. Flex render will either render the plane value as we saw at the start where we weren't passing a cell, but if the column has a cell function configured it will call that cell function and pass the cell context to the cell, just like we're doing.