Introduction
Unstyled Table is a completely unstyled, fully headless table building library for React.
Why another table library?
There are a lot of table libraries out there, so why did we build another one? Well, we wanted to build a table library that was: unstyled, headless, lightweight, accessible, and easy-to-use.
TanStack Table already does most of them. But it is a bit difficult to setup. A core understanding of the apis are required to implement a proper client side table or a server side table.
So we made our own table library on top of the tanstack table to provide easy to implement table component. We call it Unstyled Table, as it is completely unstyled and headless.
Why not a component-based libaray?
Component-based libraries are great, but they are not always the right choice. Component-based libraries are typically larger, more opinionated, and less flexible. They also tend to be more difficult to customize and integrate with existing UIs.
Headless libraries are smaller, more flexible, and more portable. They also tend to be easier to customize and integrate with existing UIs. They are also not tied to a specific styling solution. This means that you can customize them with any styling solution, and components.
Learn more about headless interfaces in react here.
Why it is built on top of TanStack Table?
TanStack Table is a great library. It is fast, flexible, and easy to use. It is also well maintained and has a large community. We wanted to build on top of it because it is a great foundation to build on top of.
It is also a great way to contribute back to the open-source community from which we have benefited so much.
Why it is unstyled?
Unstyled Table is unstyled because we believe that styling should be done by the developer. We also believe that styling should be done in a way that is easy to customize and integrate with existing UIs.
Credits
- Tanstack Table v8 - For the core and feature APIs.
- shadcn/ui - For the template, and these components:
SidebarNav
,Pager
,Callout
, andMdx
. - T3 Env - For the codeblock styling.