Table Columns

This section covers the features of your Table Component Columns.

Here you will find:

• Add a Column
• Configure a Column
• Show/Hide Columns
• Action Column
• Edit On Click
• Toggleable
• Column Summary
• Formatting Summarized Data

Add a Column

See Include columns.

Configure a Column

See Column Configuration Methods.

Show/Hide Columns

See Toggle Column Visibility to enable a button giving power to the user to hide and show columns.

Additionally, see the method Column::hide() to programmatically hide/show a specific column.

Furthermore, you may see Exclude Columns From Exporting if you need to omit certain Columns when exporting data.

Action Column

The Action Column is a dedicated column to display Row Actions such as Buttons and Actions From View.

To include an Action Column, just add a call to Column::action() in your Component's columns() method.

Typically, the Action Column is the last column in your Table, however may add this column as many times as you want and at any desired position.

Example:

// app/Livewire/DishTable.php

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

class DishTable extends PowerGridComponent
{
   public function columns(): array
    {
        return [
            Column::make('ID', 'id'),
            Column::make('Name', 'name'),
            Column::action('Action'), 
        ];
    }
}

Edit On Click

Edit on click allows editing the cell content directly in the row, without leaving the Table.

Clicking on the cell will convert it into a text input. The user can type a new text and submit changes by pressing the <enter> key. To discard changes, the user can press the <ESC> key.

If the record has a null value, a fallback can be displayed instead.

To enable this feature, just chain the ->editOnClick() method to a LivewirePowerGrid\Column class. Inline editing is not available when using Collection Data Source.

Example:

// app/Livewire/DishTable.php

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

class DishTable extends PowerGridComponent
{
   public function columns(): array
    {
        return [
            Column::add()
                ->title('Name')
                ->field('name'),
                ->editOnClick(
                    hasPermission: auth()->check(),
                    fallback: '- empty -'
                ),
        ];
    }
}

The editOnClick() method accepts the following parameters:

Parameter	Description	Default
(bool) $hasPermission	When true, it enables "edit on click" .	true
(?string) $fallback	Fallback text for null values.	null
(bool) $saveOnMouseOut	If true, submit changes when clicking outside the text input.	false

💡 TIP

Learn more about how to update data from Edit On Click.

Toggleable

Toggle buttons provide a convenient way to display the boolean state of a record, while also giving the possibility to quickly switch between these values.

When using this feature, the cell will be converted into a toggleable button. If the user does not have permission to edit data, a fallback label will be displayed instead.

To enable this feature, just chain the ->toggleable() method to a LivewirePowerGrid\Column class. Toggle switch is not available when using Collection Data Source.

Example:

// app/Livewire/DishTable.php

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

class DishTable extends PowerGridComponent
{
   public function columns(): array
    {
        return [
            Column::add()
                ->title('In Stock')
                ->field('in_stock')
                ->toggleable(
                        hasPermission: auth()->check(),
                        trueLabel: 'Yes',
                        falseLabel: 'No'
                ),
        ];
    }
}

The toggleable() method accepts the following parameters:

Parameter	Description	Default
(bool) $hasPermission	enable/disable this feature	true
(string) $trueLabel	Label when record is true	Yes
(string) $falseLabel	Label when record is false	No

💡 TIP

Learn more about how to update data from Toggle Switches.

Column Summary

PowerGrid can display each column's sum, count, average, minimum, and maximum value inside column headers.

Summaries are chained to the Component Column methods Column::add() or Column::make().

Sum

Display the sum of all records in the column.

All data in your database will be preprocessed to fetch the sum of all records. Only one request will be made when using ->get().

Example:

// app/Livewire/DishTable.php

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

class DishTable extends PowerGridComponent
{
   public function columns(): array
    {
         return [
            Column::make('Price', 'price')
                ->withSum('Sum Price', header: true, footer: false)
          ];
    }
}

Parameter	Description	Default
(string) $label	The argument $label sets the summary caption.	'Sum'
(bool) $header	If true, results will be displayed in the Table header, under the filters.	false
(bool) $footer	If true, results will be displayed in the Table footer.	false

🚀 See it in action

See an interactive example using Sum.

---

Count

Display the count of all records in the column.

Example:

// app/Livewire/DishTable.php

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

class DishTable extends PowerGridComponent
{
   public function columns(): array
    {
         return [
            Column::make('Price', 'price')
                ->withCount('Count Price', header: true, footer: false)
          ];
    }
}

Parameter	Description	Default
(string) $label	The argument $label sets the summary caption.	'Count'
(bool) $header	If true, results will be displayed in the Table header, under the filters.	false
(bool) $footer	If true, results will be displayed in the Table footer.	false

🚀 See it in action

See an interactive example using Count.

---

Average

Display the average value of all records in the column.

Example:

// app/Livewire/DishTable.php

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

class DishTable extends PowerGridComponent
{
   public function columns(): array
    {
         return [
            Column::make('Price', 'price')
                ->withAvg('Avg Price', header: true, footer: false)
          ];
    }
}

Parameter	Description	Default
(string) $label	The argument $label sets the summary caption.	'Avg'
(bool) $header	If true, results will be displayed in the Table header, under the filters.	false
(bool) $footer	If true, results will be displayed in the Table footer.	false

🚀 See it in action

See an interactive example using Average.

---

Min

Display the minimum value of records in the given column.

Example:

// app/Livewire/DishTable.php

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

class DishTable extends PowerGridComponent
{
   public function columns(): array
    {
         return [
            Column::make('Price', 'price')
                ->withMin('Min Price', header: true, footer: false)
          ];
    }
}

Parameter	Description	Default
(string) $label	The argument $label sets the summary caption.	'Min'
(bool) $header	If true, results will be displayed in the Table header, under the filters.	false
(bool) $footer	If true, results will be displayed in the Table footer.	false

---

🚀 See it in action

See an interactive example using Min.

---

Max

Display the maximum value of records in the given column.

Example:

// app/Livewire/DishTable.php

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

class DishTable extends PowerGridComponent
{
   public function columns(): array
    {
        return [
            Column::make('Price', 'price')
                ->withMax('Max Price', header: true, footer: false)
        ];
    }
}

Parameter	Description	Default
(string) $label	The argument $label sets the summary caption.	'Max'
(bool) $header	If true, results will be displayed in the Table header, under the filters.	false
(bool) $footer	If true, results will be displayed in the Table footer.	false

🚀 See it in action

See an interactive example using Max.

Formatting Summarized Data

To format the summarized data, you must add the summaryFormat() returning an associative array containing column.{summary methods}, and a closure to format data. You must provide the summary methods comma separated.

Summary methods are: sum, avg, count, min, max.

Example:

// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use Illuminate\Support\Number;

class DishTable extends PowerGridComponent
{
  public function summarizeFormat(): array
  {
    return [
        'price.{sum,avg,min,max}' => fn ($value) => Number::currency($value, in: 'USD'),
        'price.{count}'  => fn ($value) => Number::format($value, locale: 'br'),
        'calories.{avg}' => fn ($value) => Number::format($value, locale: 'br', precision: 2) . ' kcal',
    ];
  }
}

🚀 See it in action

See an interactive example using Formatting Summarized Data.