npm package: @forjedio/inertia-table-vue
Description: Vue 3 components for Forjed Inertia Table - backend-driven dynamic tables for Laravel + Inertia.js
Author: Forjed
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<h1 align="center">Inertia Table Vue</h1>
<p align="center">
  Vue 3 components for <a href="https://github.com/forjedio/inertia-table">Inertia Table</a> - backend-driven dynamic tables for Laravel + Inertia.js.
</p>
<p align="center">
  <a href="https://github.com/forjedio/inertia-table-vue/actions/workflows/tests.yml"><img src="https://github.com/forjedio/inertia-table-vue/actions/workflows/tests.yml/badge.svg?branch=main" alt="Tests"></a>
  <a href="https://github.com/forjedio/inertia-table-vue/actions/workflows/tests.yml"><img src="https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/RichardAnderson/e29bf5a426b54efb85898a4f5eb4bd49/raw/inertia-table-vue-coverage.json" alt="Coverage"></a>
  <a href="https://inertia-table.forjed.io/"><img src="https://img.shields.io/badge/docs-inertia--table.forjed.io-blue" alt="Documentation"></a>
  <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="License"></a>
</p>

## Installation

```bash
npm install @forjedio/inertia-table-vue
```

Add the package to your Tailwind CSS content sources so it detects the component classes:

```css
/* Tailwind v4 - resources/css/app.css */
@source '../../node_modules/@forjedio/inertia-table-vue/dist';
```

```js
// Tailwind v3 - tailwind.config.js
content: [
    './node_modules/@forjedio/inertia-table-vue/dist/**/*.js',
]
```

This is the Vue frontend package. You also need the PHP package - see [forjedio/inertia-table](https://github.com/forjedio/inertia-table) for full setup.

## Quick Example

Define your table in PHP:

```php
class CompanyTable extends Table
{
    protected string $defaultSort = '-created_at';

    protected function columns(): array
    {
        return [
            LinkColumn::make('name', 'Name')
                ->route('companies.show', ['company' => ':id'])
                ->sortable(),
            TextColumn::make('email', 'Email')->sortable(),
            EnumColumn::make('status', 'Status')->sortable(),
            DateTimeColumn::make('created_at', 'Created')->sortable(),
            ActionsColumn::make(),
            Column::data('id'),
        ];
    }

    protected function searchable(): array
    {
        return ['name', 'email'];
    }
}
```

Render it in Vue:

```vue
<script setup>
import { InertiaTable } from '@forjedio/inertia-table-vue';

defineProps({ companies: Object });
</script>

<template>
    <InertiaTable :table-data="companies">
        <template #actions="{ row }">
            <button @click="edit(row)">Edit</button>
        </template>
    </InertiaTable>
</template>
```

Search, sorting, pagination, and all cell rendering handled automatically.

## Documentation

Full documentation is available at **[inertia-table.forjed.io](https://inertia-table.forjed.io/)**.

## Live Demo

See it in action at **[inertia-table-demo.forjed.io](https://inertia-table-demo.forjed.io/)**.

## License

MIT