Table Columns โ
This section covers the features of your Table Component Columns.
Here you will find:
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.