DomTemplate
DomTemplate copied to clipboard
Improvement to TableBinder
A common data structure is an iterable collection of key-value-pairs.
$data = [
[
"ID" => 55,
"Forename" => "Carlos",
"Surname" => "Sainz",
"Country" => "Spain",
],
[
"ID" => 5,
"Forename" => "Sebastian",
"Surname" => "Vettel",
"Country" => "Germany",
],
];
Assume a table already exists on the page with the correct headings:
<table id="crud-table">
<thead>
<tr>
<th>ID</th>
<th>Forename</th>
<th>Surname</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr data-template>
<td>0</td>
<td>Test</td>
<td>Testerson</td>
<td>Antarctica</td>
<td>
<form method="post">
<input name="id" type="hidden" />
<button name="do" value="edit">Edit</button>
</form>
</td>
<td>
<form method="post">
<input name="id" type="hidden" />
<button name="do" value="delete">Delete</button>
</form>
</td>
</tr>
</tbody>
</table>
It should be possible to bind the data to the table, without having to manipulate the data.
Keep in mind that in this example, there are two extra fields in the template row. Usually there will not be any need for even defining the td
as data-template
, but this has been done to allow another edge case.
It might be worth splitting this issue into a separate one. For clarity:
it should be possible to mark a <tr>
in a table as data-template
and use that for each new row, thus preserving any extra markup in the row.
Here's another sibling issue to track:
If there is an existing header, binding data that doesn't contain that key should leave an empty cell in place.
For example:
<thead>
<tr>
<th>ID</th>
<th>Forename</th>
<th>Surname</th>
<th>Team</th>
<th>Country</th>
</tr>
</thead>
$data = [
["ID", "Forename", "Surname", "Country"],
[55, "Carlos", "Sainz", "Spain"],
[5, "Sebastian", "Vettel", "Germany"],
];
Notice the team
key is not present in the data, so should just leave this cell empty. The actual output is binding the first key's value to this cell, so the ID is output again, which is not expected behaviour.