Skip to content

Sorting Data โ€‹

This section covers how to configure Data Sorting in your Table Component.

Here you will find:

Sort by Field and Direction โ€‹

To configure your Table sort field and direction, you must declare the properties $sortField and $sortDirection (asc/desc) in your Components class.

Example:

php
// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;

class DishTable extends PowerGridComponent
{
      public string $sortField = 'name'; 

      public string $sortDirection = 'desc';
}

Natural Sorting (String as Number) โ€‹

Occasionally, you may need to sort alphanumeric strings in natural order, just like PHP's when using natsort() function.

plain
Standard sorting: img1.png, img10.png, img12.png, img2.png

Natural sorting:  img1.png, img2.png, img10.png, img2.png

To enable this feature, you must declare the property $withSortStringNumber as true in your Components class.

Example:

php
// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;

class DishTable extends PowerGridComponent
{
      public bool $withSortStringNumber = true; 
}

Multi Column Sorting โ€‹

Sometimes, you may need to sort your Table by the combination of two or more columns.

To enable multi sorting, you must set the property $multiSort to true in your PowerGrid Table class.

Even if this feature is disabled, users can still select multiple columns by holding shift and clicking on different column headers.

php
use PowerComponents\LivewirePowerGrid\PowerGridComponent;

class YourPowerGridTable extends PowerGridComponent
{
     public bool $multiSort = true;
}

Created By Luan Freitas and @DanSysAnalyst