Skip to main content

​
Adding Advanced Tables to your table

To use Advanced Tables you will need to add the AdvancedTables trait to the appropriate class depending on whether you intend to use it on a Resource Table, Simple Resource Table, Table Widget, or Panel Page.
Important: For standalone Table Builder users, please refer to the documentation for using Advanced Tables with Table Builder.

​
Resource tables

To add Advanced Tables to a normal Resource table, add the AdvancedTables trait to the List page of your Resource: 
use Archilex\AdvancedTables\AdvancedTables;

class ListProducts extends ListRecords
{
    use AdvancedTables;

​
Simple (modal) resource tables

To add Advanced Tables to a Simple (modal) resource table, add the AdvancedTables trait to the Manage page: 
use Archilex\AdvancedTables\AdvancedTables;

class ManagesCustomers extends ListRecords
{
    use AdvancedTables;

​
Table Widgets

To add Advanced Tables to a Table Widget, add the AdvancedTables trait to the Table widget: 
use Archilex\AdvancedTables\AdvancedTables;

class LatestOrders extends BaseWidget
{
    use AdvancedTables;

​
Panel Pages

To add Advanced Tables to a Panel Page, you need to add the AdvancedTables trait to your component. However, as Advanced Tables overrides multiple methods in Filament’s InteractsWithTables trait, adding the AdvancedTables trait to the table will cause a conflict. For convenience, Advanced Tables includes a PanelPage class which you can use to quickly get up and running: 
use Archilex\AdvancedTables\AdvancedTables;
use Archilex\AdvancedTables\Livewire\PanelPage;

class CustomPage extends PanelPage
{
    use AdvancedTables;

    ...
Of course, there are multiple ways to prevent the trait conflict. The important part is to ensure that the AdvancedTables trait is used on a class that extends another class which contains Filament’s InteractsWithTables trait.

​
Adding the view component to your blade file

You also need to add the Favorites Bar component to your panel page’s blade file: 
<div class="space-y-6">
    
    <x-advanced-tables::favorites-bar />

    {{ $this->table }}
</div>
The Favorites Bar expects a space of 24px to properly display it’s links. This can easily be achieved with Tailwind’s space-y-6 class as shown above.

​
Core Concept: User Views vs Preset Views

Advanced Tables supports both User Views and Preset Views. Understanding the difference is important to choosing if one or both is appropriate for your application. User Views are created by your end-users using your application’s UI. An end-user chooses the appropriate filters, toggled columns, column order, column sort, table grouping, etc. to build the view they need. Then they use Advanced Tables to save that view so they have easy access to it in the future. Since each user has different needs, this allows for infinite customization within your application. (And less work for developers!) Preset Views are views that you the developer write in code and are then available to all your users, (or the users you authorize). Preset Views exposes a query() api which allows you to modify the underlying eloquent query. This means you can “filter” a table’s data without needing to have that filter on your table. However, while being able to modify the underlying eloquent query is powerful, and in some cases might be the only way to filter a table, Advanced Tables v3 introduces a new filters() api which allows you to apply values to your existing table filters. This, in turn, offers a better UX for your end-users as they will then see filter indicators in the table and will better understand how a Preset View is modifying the data. Whether used independently or together, User Views and Preset Views give your end-users quick access to the data they need.