Skip to content

ppatel-sitecore/InteractiveDataGridComponent

Repository files navigation

🖥️ Interactive Data Grid Component

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.


🚀 Features

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


🌐 Live Preview

To explore the project online, visit:
🔗 Interactive Data Grid - CodeSandbox


📦 Installation

1️⃣ Clone the Repository

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?

About

Created with CodeSandbox

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published