DataTable

\Kotchasan\DataTable สำหรับสร้างตารางข้อมูลแบบ interactive พร้อม pagination, sorting, และ filtering

การสร้าง

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' => 'ชื่อ', 'sort' => 'name'],
        'email' => ['text' => 'อีเมล'],
        'status' => ['text' => 'สถานะ']
    ],
    'cols' => [
        'id' => ['class' => 'center'],
        'status' => ['class' => 'center']
    ]
]);

echo $table->render();

พารามิเตอร์

พารามิเตอร์หลัก

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' => 'แก้ไข'
    ],
    [
        'id' => 'action2',
        'class' => 'icon-delete',
        'text' => 'ลบ'
    ]
]

filters

'filters' => [
    [
        'name' => 'status',
        'text' => 'สถานะ',
        'options' => [0 => 'ทั้งหมด', 1 => 'Active', 2 => 'Inactive'],
        'value' => $request->get('status')->toInt()
    ]
]

buttons

'buttons' => [
    [
        'class' => 'icon-add button green',
        'href' => 'index.php?module=users&action=add',
        'text' => 'เพิ่มใหม่'
    ]
]

Methods

render()

Render ตารางเป็น HTML

$html = $table->render();

script()

เพิ่ม JavaScript

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

ตัวอย่างการใช้งาน

ตารางพื้นฐาน

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' => 'ชื่อ', 'sort' => 'name'],
        'email' => ['text' => 'อีเมล'],
        'status' => ['text' => 'สถานะ']
    ]
]);

echo $table->render();

ตารางพร้อม Filter และ Actions

$table = new DataTable([
    'model' => 'App\Models\Products',
    'uri' => 'index.php?module=products',
    'perPage' => 20,
    'sort' => 'name ASC',
    'filters' => [
        [
            'name' => 'category',
            'text' => 'หมวดหมู่',
            'options' => $categories
        ]
    ],
    'buttons' => [
        [
            'class' => 'icon-add button green',
            'href' => 'index.php?module=products&action=add',
            'text' => 'เพิ่มสินค้า'
        ]
    ],
    'headers' => [
        'id' => ['text' => 'รหัส', 'sort' => 'id'],
        'name' => ['text' => 'ชื่อสินค้า', 'sort' => 'name'],
        'price' => ['text' => 'ราคา', 'sort' => 'price'],
        'stock' => ['text' => 'คงเหลือ']
    ],
    'cols' => [
        'id' => ['class' => 'center'],
        'price' => ['class' => 'right'],
        'stock' => ['class' => 'center']
    ],
    'actions' => [
        ['id' => 'edit', 'class' => 'icon-edit', 'text' => 'แก้ไข'],
        ['id' => 'delete', 'class' => 'icon-delete', 'text' => 'ลบ']
    ]
]);

Custom Row Display

$table = new DataTable([
    // ... config
    'onRow' => function ($item, $o, $prop) {
        // จัดรูปแบบ 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;
    }
]);

คลาสที่เกี่ยวข้อง

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