README.md

About The Project

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

Visit data-table.openstatus.dev to learn more.

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 two main concepts:

• data-table with simple pagination (client-side)
• data-table with infinite scroll and click details (server-side)

The UI is heavily inspired by datadog and vercel log tables.

Note

We are working on a Guide to help you get started and not wild guess anymore.

More Examples:

• OpenStatus Light Viewer (UI for vercel-edge-ping)

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:

pnpm 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 [email protected] 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)