Sorting in Ginkelsoft DataTables

Overview

Sorting is a core feature of Ginkelsoft DataTables and is enabled by default for all columns. This functionality cannot be disabled, ensuring that users always have the ability to organize their data effectively.

How Sorting Works

Clicking a column header will toggle between ascending and descending order.
Sorting applies to all columns specified in the :columns array.
The default sorting column is id, ordered in ascending (asc) order.
The sorting state persists when navigating through paginated data.

Sorting Configuration

Sorting is always active and does not require any additional configuration. However, you can define the default sorting behavior in your component:

<livewire:datatable
    model="App\Models\User"
    :columns="['id', 'name', 'email', 'created_at']"
    :sort-column="'created_at'"
    :sort-direction="'desc'"
/>

Parameters:

:sort-column → Defines the default sorting column (optional, default is id).
:sort-direction → Defines the default sorting direction (optional, default is asc).

Sorting Behavior

  1. Clicking a column header once sorts the data in ascending order (asc).
  2. Clicking again sorts it in descending order (desc).
  3. Clicking a different column resets sorting to ascending (asc).

Example Usage

Sorting works automatically with the following setup:

<livewire:datatable
    model="App\Models\User"
    :columns="['id', 'name', 'email', 'created_at']"
/>

In this example, users can click on any column header to sort by that column in ascending or descending order.

Notes

Sorting cannot be disabled.
Sorting applies to all columns in the :columns array.
The initial sort order can be set using :sort-column and :sort-direction.

Sorting ensures that data remains structured and easy to navigate for users at all times.