DataTable

\Kotchasan\DataTable is for creating interactive data tables with pagination, sorting, and filtering.

Creation

use Kotchasan\DataTable;

$table = new DataTable([
    'model' => 'App\Models\Users',
    'uri' => 'index.php?module=users',
    'perPage' => 20,
    'sort' => 'id ASC',
    'headers' => [
        'id' => ['text' => 'ID', 'sort' => 'id'],
        'name' => ['text' => 'Name', 'sort' => 'name'],
        'email' => ['text' => 'Email'],
        'status' => ['text' => 'Status']
    ],
    'cols' => [
        'id' => ['class' => 'center'],
        'status' => ['class' => 'center']
    ]
]);

echo $table->render();

Parameters

Main Parameters

headers

'headers' => [
    'column_name' => [
        'text' => 'Header Text',
        'sort' => 'sort_column',      // Sortable
        'class' => 'center',          // CSS class
    ]
]

cols

'cols' => [
    'column_name' => [
        'class' => 'center',
        'style' => 'width: 100px',
    ]
]

actions

'actions' => [
    [
        'id' => 'action1',
        'class' => 'icon-edit',
        'text' => 'Edit'
    ],
    [
        'id' => 'action2',
        'class' => 'icon-delete',
        'text' => 'Delete'
    ]
]

filters

'filters' => [
    [
        'name' => 'status',
        'text' => 'Status',
        'options' => [0 => 'All', 1 => 'Active', 2 => 'Inactive'],
        'value' => $request->get('status')->toInt()
    ]
]

buttons

'buttons' => [
    [
        'class' => 'icon-add button green',
        'href' => 'index.php?module=users&action=add',
        'text' => 'Add New'
    ]
]

Methods

render()

Render table as HTML.

$html = $table->render();

script()

Add JavaScript.

$table->script('alert("Table loaded")');

Usage Examples

Basic Table

use Kotchasan\DataTable;

$table = new DataTable([
    'model' => Model::createQuery()
        ->select('id', 'name', 'email', 'status')
        ->from('users'),
    'uri' => 'index.php?module=users',
    'perPage' => 10,
    'headers' => [
        'id' => ['text' => 'ID', 'sort' => 'id'],
        'name' => ['text' => 'Name', 'sort' => 'name'],
        'email' => ['text' => 'Email'],
        'status' => ['text' => 'Status']
    ]
]);

echo $table->render();

Table with Filter and Actions

$table = new DataTable([
    'model' => 'App\Models\Products',
    'uri' => 'index.php?module=products',
    'perPage' => 20,
    'sort' => 'name ASC',
    'filters' => [
        [
            'name' => 'category',
            'text' => 'Category',
            'options' => $categories
        ]
    ],
    'buttons' => [
        [
            'class' => 'icon-add button green',
            'href' => 'index.php?module=products&action=add',
            'text' => 'Add Product'
        ]
    ],
    'headers' => [
        'id' => ['text' => 'ID', 'sort' => 'id'],
        'name' => ['text' => 'Name', 'sort' => 'name'],
        'price' => ['text' => 'Price', 'sort' => 'price'],
        'stock' => ['text' => 'Stock']
    ],
    'cols' => [
        'id' => ['class' => 'center'],
        'price' => ['class' => 'right'],
        'stock' => ['class' => 'center']
    ],
    'actions' => [
        ['id' => 'edit', 'class' => 'icon-edit', 'text' => 'Edit'],
        ['id' => 'delete', 'class' => 'icon-delete', 'text' => 'Delete']
    ]
]);

Custom Row Display

$table = new DataTable([
    // ... config
    'onRow' => function ($item, $o, $prop) {
        // Format row
        $item['price'] = number_format($item['price'], 2);
        $item['status'] = $item['status'] == 1
            ? '<span class="green">Active</span>'
            : '<span class="red">Inactive</span>';
        return $item;
    }
]);

Related Classes

• Model - Data source
• Html - HTML generation
• Form - Form elements