npm package: @laravilt/grids
Description: Complete grid system with cards, filters, and search. Build responsive grid layouts with custom card components, filtering, sorting, and pagination for displaying content.
Author: Fady Mondy
Latest version: 1.0.1

![grids](https://raw.githubusercontent.com/laravilt/grids/master/arts/screenshot.jpg)

# Laravilt Grids

[![Latest Stable Version](https://poser.pugx.org/laravilt/grids/version.svg)](https://packagist.org/packages/laravilt/grids)
[![License](https://poser.pugx.org/laravilt/grids/license.svg)](https://packagist.org/packages/laravilt/grids)
[![Downloads](https://poser.pugx.org/laravilt/grids/d/total.svg)](https://packagist.org/packages/laravilt/grids)
[![Dependabot Updates](https://github.com/laravilt/grids/actions/workflows/dependabot/dependabot-updates/badge.svg)](https://github.com/laravilt/grids/actions/workflows/dependabot/dependabot-updates)
[![PHP Code Styling](https://github.com/laravilt/grids/actions/workflows/fix-php-code-styling.yml/badge.svg)](https://github.com/laravilt/grids/actions/workflows/fix-php-code-styling.yml)
[![Tests](https://github.com/laravilt/grids/actions/workflows/tests.yml/badge.svg)](https://github.com/laravilt/grids/actions/workflows/tests.yml)

Complete grid/card layout system with search, filtering, sorting, and pagination for Laravilt. Display data in flexible grid or card-based layouts with built-in search, filters, and responsive design.

## Features

- 📊 **Column Types** - Text, Image, Badge, Icon columns
- 🎨 **Card Layouts** - Product, User, Media Gallery, Blog presets
- 🔍 **Search & Filter** - Full-text search and custom filters
- ↕️ **Sorting** - Multi-column sorting support
- 📄 **Pagination** - Built-in pagination with customizable page sizes
- 📱 **Responsive** - Mobile-friendly responsive layouts
- ⚡ **Inertia Integration** - Seamless Vue 3 integration

## Installation

```bash
composer require laravilt/grids
```

## Quick Start

```php
use Laravilt\Grids\Grid;
use Laravilt\Grids\Columns\TextGridColumn;
use Laravilt\Grids\Columns\ImageGridColumn;

Grid::make()
    ->columns([
        ImageGridColumn::make('image')
            ->circular()
            ->imageSize(64),

        TextGridColumn::make('name')
            ->searchable()
            ->sortable(),

        TextGridColumn::make('price')
            ->money()
            ->sortable(),
    ])
    ->searchable()
    ->paginated()
    ->defaultSort('created_at', 'desc');
```

## Generator Commands

```bash
# Generate a grid class
php artisan make:grid ProductGrid

# Generate with card layout
php artisan make:grid ProductGrid --card
```

## Documentation

- **[Complete Documentation](docs/index.md)** - Columns, cards, filters, and examples
- **[MCP Server Guide](docs/mcp-server.md)** - AI agent integration

## Column Types

- **TextGridColumn** - Display text with formatting
- **ImageGridColumn** - Display images/avatars
- **BadgeGridColumn** - Status badges with colors
- **IconGridColumn** - Icons with colors

## Card Presets

- **product()** - Product cards with image, title, price, rating
- **user()** - User cards with avatar, name, role, stats
- **media()** - Media gallery cards
- **blog()** - Blog post cards

## Configuration

```bash
php artisan vendor:publish --tag="laravilt-grids-config"
php artisan vendor:publish --tag="laravilt-grids-assets"
```

## Testing

```bash
composer test
```

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.