Example

1. Sample Data Source (Associative Array)

$data = [
    ['id' => 1, 'name' => 'Alice', 'email' => 'alice@example.com'],
    ['id' => 2, 'name' => 'Bob', 'email' => 'bob@example.com'],
    ['id' => 3, 'name' => 'Charlie', 'email' => 'charlie@example.com'],
];

2. Creating a Table with an Adapter

use Ucscode\HtmlComponent\TableGenerator\TableGenerator;
use Ucscode\HtmlComponent\TableGenerator\Adapter\AssocArrayAdapter;

// Instantiate the adapter
$adapter = new AssocArrayAdapter($data);

// Create the TableGenerator instance
$tableGenerator = new TableGenerator($adapter);

// Render the table
echo $tableGenerator->render();
Output:
<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Alice</td>
            <td>alice@example.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Bob</td>
            <td>bob@example.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Charlie</td>
            <td>charlie@example.com</td>
        </tr>
    </tbody>
</table>

3. Applying Checkboxes Middleware

use Ucscode\HtmlComponent\TableGenerator\Middleware\AbstractMiddleware;
use Ucscode\HtmlComponent\TableGenerator\Contracts\TableSegmentInterface;
use Ucscode\HtmlComponent\TableGenerator\Component\Section\Tr;
use Ucscode\HtmlComponent\TableGenerator\Component\Td;

class CheckboxMiddleware extends AbstractMiddleware
{
    public function process(Table $table): Table
    {
        $this->iterateTrsIn($table, function (Tr $tr) {
            // Add a checkbox to each row
            $checkbox = new Td('<input type="checkbox" />');
            $tr->getCellCollection()->prepend($checkbox);
        });

        return $table;
    }
}

// Add middleware
$tableGenerator->addMiddleware(new CheckboxMiddleware());

// Regenerate and render
$tableGenerator->regenerate();

echo $tableGenerator->render();
Updated Output (Checkboxes Added to Each Row)
<table>
    <thead>
        <tr>
            <td><input type="checkbox" /></td>
            <th>id</th>
            <th>name</th>
            <th>email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>1</td>
            <td>Alice</td>
            <td>alice@example.com</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>2</td>
            <td>Bob</td>
            <td>bob@example.com</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>3</td>
            <td>Charlie</td>
            <td>charlie@example.com</td>
        </tr>
    </tbody>
</table>

4. Applying Element Attributes Middleware

use Ucscode\HtmlComponent\TableGenerator\Middleware\AbstractMiddleware;
use Ucscode\HtmlComponent\TableGenerator\Contracts\TableSegmentInterface;
use Ucscode\HtmlComponent\TableGenerator\Component\Section\Tr;
use Ucscode\HtmlComponent\TableGenerator\Component\Td;

class ElementAttributesMiddleware extends AbstractMiddleware
{
    public function process(Table $table): Table
    {
        $table->getAttributes()->set('class', 'table');

        $this->iterateCellsIn($table, function (CellInterface $cell, Tr $tr, TableSegmentInterface $segment) {
            if ($segment instanceof Tbody) {
                // skip checkbox cells
                if ($tr->indexOf($cell) !== 0) {
                    $cell->getAttributes()->set('data-value', $cell->getData());
                }
            }
        });

        return $table;
    }
}

// Add middleware
$tableGenerator->addMiddleware(new ElementAttributesMiddleware());

// Regenerate and render
$tableGenerator->regenerate();

echo $tableGenerator->render();
Updated Output (Checkboxes Added to Each Row)
<table class="table">
    <thead>
        <tr>
            <td><input type="checkbox" /></td>
            <th>id</th>
            <th>name</th>
            <th>email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td data-value="1">1</td>
            <td data-value="Alice">Alice</td>
            <td data-value="alice@example.com">alice@example.com</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td data-value="2">2</td>
            <td data-value="Bob">Bob</td>
            <td data-value="bob@example.com">bob@example.com</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td data-value="3">3</td>
            <td data-value="Charlie">Charlie</td>
            <td data-value="charlie@example.com">charlie@example.com</td>
        </tr>
    </tbody>
</table>

Conclusion

  • TableGenerator makes it easy to create tables from various data sources.
  • You can use adapters to automatically format different types of data.
  • Middleware allows modification of the table structure dynamically.
  • The render() method generates an HTML table that can be styled as needed.
Source Code
If you find this project useful, consider leaving a on GitHub! Thank you!