Filters in Ginkelsoft DataTables

Ginkelsoft DataTables provides a powerful filtering system to refine your dataset dynamically. Filters are always enabled and cannot be disabled. Below is a guide on the available filter types and how to use them.

Available Filter Types

Filter Type Description
input A basic text input field for searching by keyword.
select A dropdown select field where you can define options.
checkbox A checkbox filter, used for boolean values (true/false).
radio A radio button group for selecting predefined options.
date A single date picker filter.
date-between A range filter for selecting records between two dates.

Using Filters in Your DataTable Component

You can define filters directly in your Livewire DataTable component:

<livewire:datatable
    model="App\Models\User"
    :columns="['id', 'name', 'email', 'created_at']"
    :filters="[
        ['column' => 'name', 'type' => 'input', 'label' => 'Name'],
        ['column' => 'email_verified_at', 'type' => 'checkbox', 'options' => ['1' => 'Verified', '0' => 'Not Verified'], 'label' => 'Email Verified'],
        ['column' => 'role', 'type' => 'select', 'options' => ['admin' => 'Admin', 'user' => 'User'], 'label' => 'User Role'],
        ['column' => 'created_at', 'type' => 'date', 'label' => 'Created At'],
        ['column' => 'updated_at', 'type' => 'date-between', 'label' => 'Updated Between'],
    ]"
/>

Filter Details

Text Input (input)

['column' => 'name', 'type' => 'input', 'label' => 'Name']

Uses a standard text field for keyword searching.
The query is applied as a LIKE statement (WHERE column LIKE '%value%').

Select Dropdown (select)

['column' => 'role', 'type' => 'select', 'options' => ['admin' => 'Admin', 'user' => 'User'], 'label' => 'User Role']

Displays a dropdown with predefined options.
Uses WHERE column = value in the query.

Checkbox (checkbox)

['column' => 'email_verified_at', 'type' => 'checkbox', 'options' => ['1' => 'Verified', 'null' => 'Not Verified'], 'label' => 'Email Verified']

Designed for boolean values (true/false).
Uses WHERE column = value in the query.

Radio Button (radio)

['column' => 'status', 'type' => 'radio', 'options' => ['active' => 'Active', 'inactive' => 'Inactive'], 'label' => 'Status']

Works similarly to select, but displays options as radio buttons.

Date Picker (date)

['column' => 'created_at', 'type' => 'date', 'label' => 'Created At']

Allows filtering by a single date.
Uses WHERE DATE(column) = value in the query.