Binding tables

HTML tables are the best way to display tabular data in rows, cells and headings. There are multiple ways of binding tabular data, depending on the use case and the type of data you have.

• You may choose to bind all rows and columns from your data source directly into an empty HTML table. This will create the appropriate row, header, and cell elements automatically.
• You may choose to bind a data structure to an HTML table with existing header cells. This will use the existing HTML structure to define the order and presence of each column.
• You may choose to prescribe exactly where data is bound within your HTML structure, allowing tables to contain hard-coded existing elements, rows, or columns.

There are two types of data structure that we can use to bind table data:

1. A two dimensional iterable, e.g. iterable<iterable<string>>, where the outer iterable represents the rows, and the inner iterable represents the columns, and the first index of the outer iterable contains the headings.

$data = [
	["Day", "Weather"], // This is the heading row
	["Monday", "Rain"],
	["Tuesday", "Cloud"],
	["Wednesday", "Cloud"],
	["Thursday", "Sun"],
	["Friday", "Sun"],
	["Saturday", "Cloud"],
	["Sunday", "Cloud"],
];

2. An two dimensional iterable of type iterable<string, iterable<string>>, where the string key of the iterable represents each heading, and the inner iterable represents the cell values for each row.

$data = [
	"Day" => ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
	"Weather" => ["Rain", "Cloud", "Cloud", "Sun", "Sun", "Cloud", "Cloud"],
];

The data in both examples above represents the same data and will bind the same table data. Associative arrays are the simplest data structure in PHP, but any iterable can be used to represent multiple objects, as long as they are Stringable

Binding to an empty table

Binding to a table without any pre-existing HTML Structure is useful for when your data is completely dynamic.

HTML:

<h1>Weather forecast</h1>
<table data-bind:table></table>

PHP:

function example(DocumentBinder $binder):void {
	$data = [
		"Day" => ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
		"Weather" => ["Rain", "Cloud", "Cloud", "Sun", "Sun", "Cloud", "Cloud"],
	];

	$binder->bindTable($data);
}

Output HTML:

<h1>Weather forecast</h1>
<table>
	<thead>
		<tr>
			<th>Day</th>
			<th>Weather</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Mon</td>
			<td>Rain</td>
		</tr>
		<tr>
			<td>Tue</td>
			<td>Cloud</td>
		</tr>
		<tr>
			<td>Wed</td>
			<td>Cloud</td>
		</tr>
		<tr>
			<td>Thu</td>
			<td>Sun</td>
		</tr>
		<tr>
			<td>Fri</td>
			<td>Sun</td>
		</tr>
		<tr>
			<td>Sat</td>
			<td>Cloud</td>
		</tr>
		<tr>
			<td>Sun</td>
			<td>Cloud</td>
		</tr>
	</tbody>
</table>

Binding to a table with existing headings

In some applications, the available datasets might be more complex than how you would like to output them. There may be many more fields to the dataset than what you want to display.

If the HTML table you bind to already contains a <thead> element, the <th> heading elements will be used to define the order and presence of the fields when binding.

HTML:

<h1>The planets</h1>
<table data-bind:table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Distance from Sun</th>
		</tr>
	</thead>
</table>

PHP:

function example(DocumentBinder $binder):void {
	$data = [
		"Name" => ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"]
		"Symbol" => ["", "", "", "", "", "", "", ""],
		"Diameter" => [, , , , , , , ],
		"Distance from Sun" => [, , , , , , , ],
	];
	$binder->bindTable($data);
}

Output HTML:

// TODO.

---

Next, learn how to use objects to represent bindable data.