HtmlTable

\Kotchasan\HtmlTable creates HTML tables programmatically.

Creation

use Kotchasan\HtmlTable;

// Create table
$table = HtmlTable::create(['class' => 'data-table', 'id' => 'users']);

// Add header
$table->addHeader([
    ['text' => 'ID'],
    ['text' => 'Name'],
    ['text' => 'Email']
]);

// Add data rows
$table->addRow([
    ['text' => '1'],
    ['text' => 'Somchai'],
    ['text' => 'somchai@example.com']
]);

$table->addRow([
    ['text' => '2'],
    ['text' => 'Somying'],
    ['text' => 'somying@example.com']
]);

echo $table->render();

Constructor

$table = new HtmlTable($properties = []);
// or
$table = HtmlTable::create($properties = []);

Methods

create()

Static factory method.

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

addCaption()

Add caption to the table.

$table->addCaption('User List');

addHeader()

Add header row (thead).

$table->addHeader([
    ['text' => 'ID', 'class' => 'id-col'],
    ['text' => 'Name', 'class' => 'name-col'],
    ['text' => 'Email', 'colspan' => '2']
]);

Cell attributes:

addRow()

Add data row (tbody).

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

addFooter()

Add footer row (tfoot).

use Kotchasan\TableRow;

$footerRow = TableRow::create(['class' => 'footer-row']);
$footerRow->addCell(['text' => 'Total', 'colspan' => '2']);
$footerRow->addCell(['text' => '100 Items']);

$table->addFooter($footerRow);

render()

Render table as HTML.

$html = $table->render();

TableRow Class

Class for creating table rows.

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

Usage Examples

Table from Database

use Kotchasan\HtmlTable;
use Kotchasan\Model;

// Retrieve data
$users = Model::createQuery()
    ->select('id', 'name', 'email', 'status')
    ->from('users')
    ->execute();

// Create table
$table = HtmlTable::create(['class' => 'responsive-table']);

$table->addCaption('User Table');

$table->addHeader([
    ['text' => '#'],
    ['text' => 'Name'],
    ['text' => 'Email'],
    ['text' => 'Status']
]);

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();

Table with Footer

use Kotchasan\HtmlTable;
use Kotchasan\TableRow;

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

$table->addHeader([
    ['text' => 'Product'],
    ['text' => 'Quantity'],
    ['text' => 'Price'],
    ['text' => 'Total']
]);

$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' => 'Grand Total', 'colspan' => '3', 'scope' => 'row']);
$footer->addCell(['text' => '฿' . number_format($total, 2)]);
$table->addFooter($footer);

echo $table->render();

Accessible Table

$table = HtmlTable::create([
    'class' => 'accessible-table',
    'role' => 'grid',
    'aria-label' => 'Employee List'
]);

$table->addCaption('Department Employees');

$table->addHeader([
    ['text' => 'ID', 'scope' => 'col'],
    ['text' => 'Name', 'scope' => 'col'],
    ['text' => 'Position', 'scope' => 'col']
]);

$table->addRow([
    ['text' => 'E001', 'scope' => 'row'],
    ['text' => 'Mr. Somchai'],
    ['text' => 'Engineer']
], ['id' => '1']);

echo $table->render();

HTML Output

<table class="data-table" id="users">
  <caption>User List</caption>
  <thead>
    <tr>
      <th id="c0" scope="col">ID</th>
      <th id="c1" scope="col">Name</th>
      <th id="c2" scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="c0">1</td>
      <td headers="c1">John Doe</td>
      <td headers="c2">john@example.com</td>
    </tr>
  </tbody>
</table>

Related Classes

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