@zeix/ui-element/docs-src/components/calc-table/calc-table.html

UIElement - a HTML-first library for reactive Web Components

<calc-table rows="3" columns="3">
	<div class="rows">
		<p>Number of rows:</p>
		<form-spinbutton
			value="3"
			zero-label="Add Row"
			increment-label="Increment"
		>
			<button type="button" class="decrement" aria-label="Decrement">
				−
			</button>
			<p class="value">3</p>
			<button type="button" class="increment" aria-label="Increment">
				+
			</button>
		</form-spinbutton>
	</div>
	<div class="columns">
		<p>Number of columns:</p>
		<form-spinbutton
			value="3"
			zero-label="Add Column"
			increment-label="Increment"
		>
			<button type="button" class="decrement" aria-label="Decrement">
				−
			</button>
			<p class="value">3</p>
			<button type="button" class="increment" aria-label="Increment">
				+
			</button>
		</form-spinbutton>
	</div>
	<table>
		<thead>
			<tr>
				<th scope="col">Row</th>
			</tr>
		</thead>
		<tbody></tbody>
		<tfoot>
			<tr>
				<th scope="row">Sum</th>
			</tr>
		</tfoot>
	</table>
	<template class="calc-table-row">
		<tr>
			<th scope="row"><slot></slot></th>
		</tr>
	</template>
	<template class="calc-table-colhead">
		<th scope="col"><slot></slot></th>
	</template>
	<template class="calc-table-cell">
		<td>
			<label>
				<span class="visually-hidden"><slot></slot></span>
				<input type="number" min="0" max="100" step="1" value="" />
			</label>
		</td>
	</template>
</calc-table>