Custom Data Grid

Custom Data Grid is a high-performance, feature-rich custom table component build from scratch without any additional library. It supports dynamic column rendering, row virtualization, and multi-column sorting. Users can search, filter, paginate, and export data with ease. Advanced tools include column pinning, resizing, reordering, and grouping. With inline editing, bulk actions, and customizable cell types.

Preview:

Built With

• HTML
• CSS
• JavaScript
• TypeScript
• NextJS
• Zustand
• Tailwind CSS
• Framer Motion

Live version

Custom Data Grid

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

• A text editor(preferably Visual Studio Code)
• Node
• Web browser

Install

• Git
• Node

Using it Locally

• Clone the project

git clone git@github.com:thecodechaser/custom-data-grid.git

cd custom-data-grid

• Install dependencies

npm i 
or
npm install

• To Start the development server

npm run dev

• To test the project

npm run test

Visit And Open Files

Visit Repo

Download Repo

Download Repo

Authors

👤 Ranjeet Singh

• Website: thecodechaser.com
• GitHub: @thecodechaser
• Twitter: @thecodechaser
• LinkedIn: thecodechaser

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

• Inspiration: Sat N Paper

📝 License

This project is MIT licensed.