DomTemplate icon indicating copy to clipboard operation
DomTemplate copied to clipboard

Improvement to TableBinder

Open g105b opened this issue 2 years ago • 2 comments

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.

g105b avatar Sep 02 '21 17:09 g105b

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.

g105b avatar Sep 02 '21 17:09 g105b

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.

g105b avatar Sep 06 '21 14:09 g105b