HtmlTable

\Kotchasan\HtmlTable สำหรับสร้างตาราง HTML แบบ programmatic

การสร้าง

use Kotchasan\HtmlTable;

// สร้างตาราง
$table = HtmlTable::create(['class' => 'data-table', 'id' => 'users']);

// เพิ่ม header
$table->addHeader([
    ['text' => 'ID'],
    ['text' => 'ชื่อ'],
    ['text' => 'อีเมล']
]);

// เพิ่มแถวข้อมูล
$table->addRow([
    ['text' => '1'],
    ['text' => 'สมชาย'],
    ['text' => 'somchai@example.com']
]);

$table->addRow([
    ['text' => '2'],
    ['text' => 'สมหญิง'],
    ['text' => 'somying@example.com']
]);

echo $table->render();

Constructor

$table = new HtmlTable($properties = []);
// หรือ
$table = HtmlTable::create($properties = []);

Methods

create()

Static factory method

$table = HtmlTable::create([
    'class' => 'table table-striped',
    'id' => 'data-table',
    'border' => '1'
]);

addCaption()

เพิ่ม caption ให้ตาราง

$table->addCaption('รายชื่อผู้ใช้งาน');

addHeader()

เพิ่ม header row (thead)

$table->addHeader([
    ['text' => 'ID', 'class' => 'id-col'],
    ['text' => 'ชื่อ', 'class' => 'name-col'],
    ['text' => 'อีเมล', 'colspan' => '2']
]);

Cell attributes:

addRow()

เพิ่มแถวข้อมูล (tbody)

$table->addRow(
    [
        ['text' => '1'],
        ['text' => 'John Doe'],
        ['text' => 'john@example.com']
    ],
    ['class' => 'odd']  // row attributes
);

addFooter()

เพิ่ม footer row (tfoot)

use Kotchasan\TableRow;

$footerRow = TableRow::create(['class' => 'footer-row']);
$footerRow->addCell(['text' => 'รวม', 'colspan' => '2']);
$footerRow->addCell(['text' => '100 รายการ']);

$table->addFooter($footerRow);

render()

Render ตารางเป็น HTML

$html = $table->render();

TableRow Class

คลาสสำหรับสร้างแถวในตาราง

use Kotchasan\TableRow;

$row = TableRow::create(['id' => 'row-1', 'class' => 'data-row']);
$row->addCell(['text' => 'Cell 1']);
$row->addCell(['text' => 'Cell 2', 'class' => 'highlight']);

$html = $row->render();

Methods

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

ตารางข้อมูลจาก Database

use Kotchasan\HtmlTable;
use Kotchasan\Model;

// ดึงข้อมูล
$users = Model::createQuery()
    ->select('id', 'name', 'email', 'status')
    ->from('users')
    ->execute();

// สร้างตาราง
$table = HtmlTable::create(['class' => 'responsive-table']);

$table->addCaption('ตารางผู้ใช้งาน');

$table->addHeader([
    ['text' => '#'],
    ['text' => 'ชื่อ-นามสกุล'],
    ['text' => 'อีเมล'],
    ['text' => 'สถานะ']
]);

foreach ($users as $user) {
    $statusClass = $user->status === 'active' ? 'text-success' : 'text-muted';

    $table->addRow([
        ['text' => $user->id],
        ['text' => $user->name],
        ['text' => $user->email],
        ['text' => $user->status, 'class' => $statusClass]
    ]);
}

echo $table->render();

ตารางพร้อม Footer

use Kotchasan\HtmlTable;
use Kotchasan\TableRow;

$table = HtmlTable::create(['class' => 'order-table']);

$table->addHeader([
    ['text' => 'สินค้า'],
    ['text' => 'จำนวน'],
    ['text' => 'ราคา'],
    ['text' => 'รวม']
]);

$total = 0;
foreach ($items as $item) {
    $subtotal = $item->qty * $item->price;
    $total += $subtotal;

    $table->addRow([
        ['text' => $item->name],
        ['text' => $item->qty],
        ['text' => number_format($item->price, 2)],
        ['text' => number_format($subtotal, 2)]
    ]);
}

// Footer
$footer = TableRow::create(['class' => 'total-row']);
$footer->addCell(['text' => 'รวมทั้งหมด', 'colspan' => '3', 'scope' => 'row']);
$footer->addCell(['text' => '฿' . number_format($total, 2)]);
$table->addFooter($footer);

echo $table->render();

ตารางแบบ Accessible

$table = HtmlTable::create([
    'class' => 'accessible-table',
    'role' => 'grid',
    'aria-label' => 'รายชื่อพนักงาน'
]);

$table->addCaption('ตารางพนักงานในแผนก');

$table->addHeader([
    ['text' => 'รหัส', 'scope' => 'col'],
    ['text' => 'ชื่อ', 'scope' => 'col'],
    ['text' => 'ตำแหน่ง', 'scope' => 'col']
]);

$table->addRow([
    ['text' => 'E001', 'scope' => 'row'],
    ['text' => 'นายสมชาย ใจดี'],
    ['text' => 'วิศวกร']
], ['id' => '1']);

echo $table->render();

HTML Output

<table class="data-table" id="users">
  <caption>รายชื่อผู้ใช้งาน</caption>
  <thead>
    <tr>
      <th id="c0" scope="col">ID</th>
      <th id="c1" scope="col">ชื่อ</th>
      <th id="c2" scope="col">อีเมล</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="c0">1</td>
      <td headers="c1">สมชาย</td>
      <td headers="c2">somchai@example.com</td>
    </tr>
  </tbody>
</table>

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

• DataTable - Interactive data tables
• Grid - Grid layout
• Html - HTML generation