> Source: https://laravilt.com/docs/tables/introduction

# Tables

Data table system with Vue 3 rendering.

## Vue Component Stack

| Layer | Package |
|-------|---------|
| Table Core | @tanstack/vue-table |
| UI Components | shadcn/ui (Radix Vue) |
| Icons | lucide-vue-next |
| Drag & Drop | @vueuse/core (useSortable) |

## Basic Usage

```php
<?php

use Laravilt\Tables\Table;
use Laravilt\Tables\Columns\TextColumn;
use Laravilt\Tables\Columns\ImageColumn;

public static function table(Table $table): Table
{
    return $table
        ->columns([
            ImageColumn::make('avatar')->circular(),
            TextColumn::make('name')->searchable()->sortable(),
            TextColumn::make('email')->copyable(),
        ])
        ->actions([
            \Laravilt\Actions\ViewAction::make(),
            \Laravilt\Actions\EditAction::make(),
        ])
        ->searchable()
        ->paginated();
}
```

## Features

| Feature | Description |
|---------|-------------|
| [Columns](https://github.com/laravilt/laravilt/blob/HEAD/docs/tables/columns/introduction) | 8 column types |
| [Filters](https://github.com/laravilt/laravilt/blob/HEAD/docs/tables/filters/introduction) | 4 filter types |
| [Actions](https://github.com/laravilt/laravilt/blob/HEAD/docs/tables/actions/introduction) | Row & bulk actions |
| [Display](https://github.com/laravilt/laravilt/blob/HEAD/docs/tables/display/introduction) | Grid/card views |
| [Features](https://github.com/laravilt/laravilt/blob/HEAD/docs/tables/features/introduction) | Sorting, search, scroll |
| [API](https://github.com/laravilt/laravilt/blob/HEAD/docs/tables/api/introduction) | REST API generation |
| [Custom](https://github.com/laravilt/laravilt/blob/HEAD/docs/tables/custom/introduction) | Vue components & custom columns |