openstatusHQ/data-table-filters

A playground for tanstack-table

About The Project

This is a standalone data-table demo that we will be using within the OpenStatus dashboard.

To make it not only more accessible for you to use, but also work on PoC/MVP with data-tables, we have started this repository. We will maintain it and add new examples over time.

It currently includes:

• data-table with simple pagination
• data-table with infinite scroll and click details

The examples are heavily inspired by datadog and vercel log tables.

Built With

Our stack is:

• nextjs
• tanstack-query
• tanstack-table
• shadcn/ui
• cmdk
• nuqs
• dnd-kit

We will consider making an example with vitejs for all our raw react lovers. Contributions are welcome!

Getting Started

No environment variable required. Run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Want more?

If you are looking for specific use-cases or like what we are building and want to hire us, feel free write us to hire@openstatus.dev or book a call via cal.com.

Credits

• sadmann17 for the dope <Sortable /> component around @dnd-kit (see sortable.sadmn.com)
• shelwin_ for the draggable chart inspiration (see zoom-chart-demo.vercel.app)