A high-performance, pluggable data grid built with React, TypeScript, and Zustand for state management.
This project allows seamless integration of various cell renderers and editors, making it ideal for complex tabular data.
✔ Pluggable architecture for dynamic cell renderers
✔ User multi-select editor with avatar & overflow handling
✔ Optimized performance for large datasets (react-window)
✔ Editable cells with autocomplete-style inputs
✔ Modern UI with full responsiveness
To explore the project online, visit:
🔗 Interactive Data Grid - CodeSandbox
git clone https://github.com/yourusername/interactive-data-grid.git
cd interactive-data-grid
2️⃣ Install Dependencies
If you're using npm, run:
bash: npm clean-install
✅ Ensures successful installation by allowing legacy peer dependencies.
If using CodeSandbox, dependencies are automatically installed.
🎯 Running the Application
If running locally, start the development server:
bash: npm start
✅ Opens the app at http://localhost:3000
If using CodeSandbox, simply click Run within the editor.
🔧 Configuration Options
Modify src/config.ts for custom settings:
Setting Default Value Description
GRID_ROWS 1000 Number of rows in the data grid
COLUMN_TYPES [text, link] Defines available cell renderers
ENABLE_EDITING true Enables inline cell editing
🛠️ Pluggable Architecture
The data grid is fully extensible. You can register custom cell renderers dynamically.
Example registration:
ts
cellRenderers.register("custom", (data) => <CustomComponent value={data} />);
✅ Supports dynamic components ✅ Ensures type-safe contracts for renderers
🤝 Contributing
We welcome contributions! Follow these steps:
1️⃣ Fork the repository 2️⃣ Create a new branch (git checkout -b feature-name) 3️⃣ Commit your changes (git commit -m "Add new feature") 4️⃣ Push the branch (git push origin feature-name) 5️⃣ Submit a Pull Request 🚀
📜 License
This project is licensed under the MIT License.
📞 Support
For issues, open a ticket at: 🔗 GitHub Issues: https://github.com/yourusername/interactive-data-grid/issues
🎉 Now Your README is Fully Ready!
✔ Covers installation, usage, customization ✔ Includes instant deployment on CodeSandbox ✔ Supports pluggable architecture for extensibility
Let me know if you'd like additional sections or deployment guides for other platforms! 🚀
Would you also like documentation for backend integration?