Card Grid

CardGrid: A Hybrid Grid Plugin for jQuery

Managing and displaying data efficiently is essential for modern web applications. CardGrid is a jQuery plugin that combines the best features of Card View and Table View, offering a flexible, dynamic, and customizable data grid for web applications.

Designed to work seamlessly with Bootstrap 3 and TypeScript, this plugin allows developers to populate the grid using JSON data while supporting custom templates for Card layouts.

🔹 Key Features of CardGrid

1️⃣ Hybrid Grid with Card & Table Views

🔄 Switch effortlessly between Card View and Table View to suit your data presentation needs.

2️⃣ JSON Data Integration

📊 Fetch and display JSON data dynamically without writing complex logic.

3️⃣ Customizable Card Templates

🎨 Define your own Card layouts using HTML and CSS to present data in a visually appealing way.

4️⃣ Responsive & Bootstrap 3 Compatible

📱 Fully responsive design that adapts to different screen sizes.
💠 Optimized for Bootstrap 3, ensuring a seamless and modern UI.

5️⃣ TypeScript Support

⚡ Develop with TypeScript for a type-safe, scalable, and maintainable solution.

🔹 Technologies Used

• jQuery (For core functionality)

• Bootstrap 3 (For styling and responsiveness)

• TypeScript (For type-safe development)

🔹 Installation & Usage

1️⃣ Download & Include Dependencies

Clone or download the repository from GitHub:
📥 Download CardGrid

Include jQuery, Bootstrap 3, and the CardGrid plugin in your project:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="path-to-cardgrid.js"></script>

2️⃣ Initialize the Grid

Call the plugin and pass the JSON data with configuration options:

$('#myGrid').cardGrid({ data: myJsonData, template: myCardTemplate, view: 'card' // or 'table' });

🚀 Why Use CardGrid?

✅ Combines Card and Table Views for versatile data representation
✅ Works with JSON data for easy integration
✅ Supports Bootstrap 3 for a responsive UI
✅ Fully customizable Card templates for unique layouts
✅ Built-in TypeScript support for robust development

This hybrid Grid Control is perfect for dashboards, e-commerce platforms, and any data-driven UI where users need the flexibility to switch between tabular and card-based views.

📥 Download CardGrid and take your web applications to the next level!