> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Rendering a table in a Blade view

> [!WARNING]
>
> You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.
>
> Looking for the current stable version? Visit the [5.x documentation](https://filament-34a8cf01.mintlify.site/5.x/components/table.md).

> [!WARNING]
>
> Before proceeding, make sure `filament/tables` is installed in your project. You can check by running:
>
> ```bash theme={"theme":"gruvbox-dark-hard"}
> composer show filament/tables
> ```
>
> If it's not installed, consult the [installation guide](https://filament-34a8cf01.mintlify.site/4.x/introduction/installation.md#installing-the-individual-components) and configure the **individual components** according to the instructions.

## Setting up the Livewire component

First, generate a new Livewire component:

```bash theme={"theme":"gruvbox-dark-hard"}
php artisan make:livewire ListProducts
```

Then, render your Livewire component on the page:

```blade theme={"theme":"gruvbox-dark-hard"}
@livewire('list-products')
```

Alternatively, you can use a full-page Livewire component:

```php theme={"theme":"gruvbox-dark-hard"}
use App\Livewire\ListProducts;
use Illuminate\Support\Facades\Route;

Route::get('products', ListProducts::class);
```

## Adding the table

There are 3 tasks when adding a table to a Livewire component class:

1. Implement the `HasActions`, `HasTable`, and `HasSchemas` interfaces, and use the `InteractsWithActions`, `InteractsWithTable`, and `InteractsWithSchemas` traits.
2. Add a `table()` method, which is where you configure the table. [Add the table's columns, filters, and actions](https://filament-34a8cf01.mintlify.site/4.x/tables/overview.md#defining-table-columns).
3. Make sure to define the base query that will be used to fetch rows in the table. For example, if you're listing products from your `Product` model, you will want to return `Product::query()`.

```php theme={"theme":"gruvbox-dark-hard"}
<?php

namespace App\Livewire;

use App\Models\Shop\Product;
use Filament\Actions\Concerns\InteractsWithActions;  
use Filament\Actions\Contracts\HasActions;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Concerns\RestrictsFileUploadsToSchemaComponents;
use Filament\Schemas\Contracts\HasSchemas;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Illuminate\Contracts\View\View;
use Livewire\Component;

class ListProducts extends Component implements HasActions, HasSchemas, HasTable
{
    use InteractsWithActions;
    use InteractsWithSchemas;
    use InteractsWithTable;
    use RestrictsFileUploadsToSchemaComponents;
    
    public function table(Table $table): Table
    {
        return $table
            ->query(Product::query())
            ->columns([
                TextColumn::make('name'),
            ])
            ->filters([
                // ...
            ])
            ->recordActions([
                // ...
            ])
            ->toolbarActions([
                // ...
            ]);
    }
    
    public function render(): View
    {
        return view('livewire.list-products');
    }
}
```

Finally, in your Livewire component's view, render the table:

```blade theme={"theme":"gruvbox-dark-hard"}
<div>
    {{ $this->table }}
</div>
```

Visit your Livewire component in the browser, and you should see the table.

> [!NOTE]
>
> `filament/tables` also includes the following packages:
>
> * `filament/actions`
> * `filament/forms`
> * `filament/support`
>
> These packages allow you to use their components within Livewire components.
> For example, if your table uses [Actions](https://filament-34a8cf01.mintlify.site/4.x/components/action.md#setting-up-the-livewire-component), remember to implement the `HasActions` interface and include the `InteractsWithActions` trait.
>
> If you are using any other [Filament components](https://filament-34a8cf01.mintlify.site/4.x/components/overview.md#package-components) in your table, make sure to install and integrate the corresponding package as well.

## Building a table for an Eloquent relationship

If you want to build a table for an Eloquent relationship, you can use the `relationship()` and `inverseRelationship()` methods on the `$table` instead of passing a `query()`. `HasMany`, `HasManyThrough`, `BelongsToMany`, `MorphMany` and `MorphToMany` relationships are compatible:

```php theme={"theme":"gruvbox-dark-hard"}
use App\Models\Category;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Relations\BelongsToMany;

public Category $category;

public function table(Table $table): Table
{
    return $table
        ->relationship(fn (): BelongsToMany => $this->category->products())
        ->inverseRelationship('categories')
        ->columns([
            TextColumn::make('name'),
        ]);
}
```

> [!WARNING]
>
> `$category` is a model property on a regular Livewire component. Filament does not re-query or authorize it on later requests. Re-query and authorize the category before using it to build the relationship, including any tenant or ownership restrictions your application requires. Authorize operations that modify the relationship or its records separately. See [Eloquent model restoration in Livewire](https://filament-34a8cf01.mintlify.site/4.x/advanced/security.md#understanding-eloquent-model-restoration-in-livewire) for more information.

In this example, we have a `$category` property which holds a `Category` model instance. The category has a relationship named `products`. We use a function to return the relationship instance. This is a many-to-many relationship, so the inverse relationship is called `categories`, and is defined on the `Product` model. We just need to pass the name of this relationship to the `inverseRelationship()` method, not the whole instance.

Now that the table is using a relationship instead of a plain Eloquent query, all actions will be performed on the relationship instead of the query. For example, if you use a [`CreateAction`](../actions/create), the new product will be automatically attached to the category.

If your relationship uses a pivot table, you can use all pivot columns as if they were normal columns on your table, as long as they are listed in the `withPivot()` method of the relationship *and* inverse relationship definition.

Relationship tables are used in the Panel Builder as ["relation managers"](https://filament-34a8cf01.mintlify.site/4.x/resources/managing-relationships.md#creating-a-relation-manager). Most of the documented features for relation managers are also available for relationship tables. For instance, [attaching and detaching](https://filament-34a8cf01.mintlify.site/4.x/resources/managing-relationships.md#attaching-and-detaching-records) and [associating and dissociating](https://filament-34a8cf01.mintlify.site/4.x/resources/managing-relationships.md#associating-and-dissociating-records) actions.

## Generating table Livewire components with the CLI

It's advised that you learn how to set up a Livewire component with the Table Builder manually, but once you are confident, you can use the CLI to generate a table for you.

```bash theme={"theme":"gruvbox-dark-hard"}
php artisan make:livewire-table Products/ListProducts
```

This will ask you for the name of a prebuilt model, for example `Product`. Finally, it will generate a new `app/Livewire/Products/ListProducts.php` component, which you can customize.

### Automatically generating table columns

Filament is also able to guess which table columns you want in the table, based on the model's database columns. You can use the `--generate` flag when generating your table:

```bash theme={"theme":"gruvbox-dark-hard"}
php artisan make:livewire-table Products/ListProducts --generate
```

[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/4.x/docs/12-components/02-table.md)

## Sponsored by

[Your logo here](https://github.com/sponsors/danharrin)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.