Component Columns

This section covers the PowerGrid Table Component Column setup.

Here you will find:

• Introduction
• Include Columns
• Column Data Field
• Column Configuration Methods

Introduction

With your Component's Data Source Fields properly configured, you can start to configure which columns will be displayed in your Table Component.

If you have already added Columns to your Table, visit the section Column Features to learn more about Table Columns.

Include Columns

PowerGrid offers two ways to add columns. Let's explore them in this subsection.

Columns are added inside the array in the method columns().

Add Column

To show a column, add a new array item Column::add().

You should always provide both methods title() and field(), to give your column a title and link it to a data source field.

Then, you may chain other Column Configuration Methods to set up your column.

Example:

// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Column;

class DishTable extends PowerGridComponent
{
    public function columns(): array
    {
        return [
            Column::add()
                ->title('ID')
                ->field('id'),

            Column::add()
                ->title('Dish name')
                ->field('name'),

            Column::add()
                ->title('Price')
                ->field('price'),

            Column::add()
            ->title('Discount Price')
            ->field('price_with_discount', 'price'),
        ];
    }
}

---

Make Column

In addition to Column::add(), PowerGrid offers a shorter way to make a column.

To show a column, add a new Column::make() array item. You must provide two parameters: $title and $field. This will give your column a title and link it to a data source field.

Then, you may chain other Column Configuration Methods to set up your column.

Example:

// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Column;

class DishTable extends PowerGridComponent
{
    public function columns(): array
    {
        return [
            Column::make(title: 'ID', field: 'id'),

            Column::make(title: 'Dish name', field: 'name'),

            Column::make(title: 'Price', field: 'price'),

            Column::make(
                    title: 'Discount Price', 
                    field: 'price_with_discount', 
                    dateField: 'price'
            )
        ];
    }
}

🎉 Ok, all done!

Let's explore the various Configuration Options available in our Component.

Column Data Field

When using Data source Custom Fields or Table joins, you must pass the $dataField parameter, indicating where the "original" data can be found in the database. This allows data search, filtering and column sorting.

The $dataField is available for Column::add() and Column::make() methods.

In the next example, the column "Dish Uppercase" will retrieve data from the Custom Field name_uppercase.

Since this field does not exist in the database, we indicate the data field name in the Table dishes to be used for data search, filtering and column sorting.

// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\Column;

public function columns(): array
{
    return [
        Column::make(
                title: 'Dish Uppercase', 
                field: 'name_uppercase', 
                dataField: 'dishes.name'
            )
            ->searchable(),
    ];
}

The next example retrieves the Custom Field category_name from the join relationship and indicates the field name in the categories Table for data search and filtering.

// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\Column;

public function columns(): array
{
    return [
        Column::add()
            ->title('Category Name')
            ->field(field: 'category_name', dataField: 'categories.name'),
    ];
}

Column Configuration Methods

The methods below can be chained to the PowerComponents\LivewirePowerGrid\Column class.

title()

Set the column title (displayed in the column header).

Parameters
(string) $title

Example:

use PowerComponents\LivewirePowerGrid\Column;

Column::add()
    ->title('Dish Price'),

You may also pass HTML code to be rendered as title.

This might be helpful when using a Font Icon package, such as Font Awesome.

 Column::add()
    ->title('<i class="fas fa-low-vision" title="Visibility"></i>')

^{Notice of Non-Affiliation: Livewire PowerGrid is not in any way associated with the Font Awesome.}

---

field()

Links the column to an existing data source field.

Parameter	Description
(string) $field	(string) data source field
(string) $dataField	(string) database name and field (dot notation) [OPTIONAL]

Example:

use PowerComponents\LivewirePowerGrid\Column;

Column::add()
    ->field('name'),

The next example uses $dataField to indicate the database Table and field in data source using table joins.

use PowerComponents\LivewirePowerGrid\Column;

Column::add()
    ->field('name', 'dishes.name'),

Column::add()
    ->field('category_name', 'categories.name'),

---

placeholder()

Sets a placeholder for the Filter input text.

Parameter
(string) $placeholder

Example:

use PowerComponents\LivewirePowerGrid\Column;

Column::make('Dish name', 'name')
    ->placeholder('Enter the name'),

---

searchable()

Allow/include column to be searched with the Search Input.

Read more about Searching Data.

Example:

use PowerComponents\LivewirePowerGrid\Column;

Column::make('Dish name', 'name')
    ->searchable(),

Column::make('category_name', 'categories.name'),
    ->searchable(),

📝 NOTE

You must pass the $dataField parameter for the search to work with Custom Fields and join relationships.

---

searchableRaw()

Sometimes, you may need to use RAW SQL to search data.

The next example illustrates a case where allowing to filter by date as "d/m/Y".

    Column::make('Production date', 'produced_at_formatted', 'produced_at')
        ->searchableRaw('DATE_FORMAT(dishes.produced_at, "%d/%m/%Y")'), 

🚀 See it in action

See an interactive example using searchableRaw().

sortable()

Adds the sort control button to the column header.

Read more about Sorting Data.

Example:

use PowerComponents\LivewirePowerGrid\Column;

Column::make('Dish name', 'name')
    ->sortable(),

Column::make('category_name', 'categories.name'),
    ->sortable(),

📝 NOTE

You must pass the $dataField parameter for the sorting to work with Custom Fields and join relationships.

---

fixedOnResponsive()

Fix the column when in a Responsive Table.

Example:

use PowerComponents\LivewirePowerGrid\Column;

Column::make('Dish name', 'name')
    ->fixedOnResponsive(),

---

index()

Displays a column with the row index value.

Example:

use PowerComponents\LivewirePowerGrid\Column;

Column::make('Dish name', 'name')
    ->index(),

---

hidden()

Hides the column in your PowerGrid Table view.

Parameter	Description
(bool) $isHidden	When true, it hides the column from the Table view but not from the Hide/Show toggle button
(bool) $isForceHidden	When true, it removes the column from the Hide/Show toggle button

The example below hides the column "Dish Name" from the Table view, however the end user can still enable its visibility in the "Hide/Show" toggle.

use PowerComponents\LivewirePowerGrid\Column;

Column::make('Dish name', 'name')
    ->hidden(isHidden: true, isForceHidden: false),

The next example hides the column "Dish Name" from the Table view and also removes the option to change its visibility in the "Hide/Show" toggle, so the user cannot make the column visible again.

use PowerComponents\LivewirePowerGrid\Column;

Column::make('Dish name', 'name')
    ->hidden(isHidden: true, isForceHidden: true),

🚀 See it in action

See an interactive example using hidden().

---

visibleInExport()

Sometimes, you may want to hide and exclude a specific column when Exporting Data. This method gives you control whether the column will be included or not in the file containing the exported data.

Parameter	Description
(bool) $visible	When false, the column when be removed from the data export file.

Example:

use PowerComponents\LivewirePowerGrid\Column;

Column::make('Dish price', 'price')
    ->hidden()
    ->visibleInExport(false), // will not include in exported file

🚀 See it in action

See an interactive example using visibleInExport().

---

headerAttribute()

Adds the given class or style to the column header.

Parameter	Description
(string) $classAttr	HTML class
(string) $styleAttr	HTML style

Example:

use PowerComponents\LivewirePowerGrid\Column;

Column::make('Dish name', 'name')
    ->headerAttribute('text-center', 'color:red')

---

bodyAttribute()

Adds the given class or style to every Table row in this column.

Parameter	Description
(string) $classAttr	HTML class
(string) $styleAttr	HTML style

Example:

use PowerComponents\LivewirePowerGrid\Column;

Column::make('Dish name', 'name')
    ->bodyAttribute('text-center', 'color:red')

---

contentClassField()

Adds the content from the specified data source field to every row's <span class=""></span>.

Parameter	Description
(string) $dataField	(string) data source field

Example:

use PowerComponents\LivewirePowerGrid\Column;

Column::make('Dish name', 'name')
    ->contentClassField('status_class')

---

contentClasses()

Add a CSS class wrapping the cell content in a <span class=""></span> tag.

When passing an array, PowerGrid will match the key against the column content and apply the corresponding CSS class.

Parameter	Description
(array,string) $contentClasses	Column content => CSS Class assignments

Example:

Column::make('Dish name', 'name')
    ->contentClasses('text-blue-600');

Column::make('Dish Availability', 'availability')
    ->contentClasses([
          'available'    => 'text-green-600',
          'out-of-stock' => 'text-red-600'
     ]);

---