UNPKG

@zeix/ui-element

Version:

UIElement - a HTML-first library for reactive Web Components

372 lines • 54.4 kB
<module-tabgroup>
	<div role="tablist">
		
			<button
				type="button"
				role="tab"
				id="trigger_calc-table.html"
				aria-controls="panel_calc-table.html"
				aria-selected="false"
				tabindex="-1"
			>HTML</button>
		
			<button
				type="button"
				role="tab"
				id="trigger_calc-table.css"
				aria-controls="panel_calc-table.css"
				aria-selected="false"
				tabindex="-1"
			>CSS</button>
		
			<button
				type="button"
				role="tab"
				id="trigger_calc-table.ts"
				aria-controls="panel_calc-table.ts"
				aria-selected="true"
				tabindex="0"
			>TypeScript</button>
	</div>
	
<div role="tabpanel" id="panel_calc-table.html" aria-labelledby="trigger_calc-table.html" hidden>
	<module-codeblock language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">calc-table.html</span>
			<span class="language">html</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">calc-table</span><span style="color:#A6E22E"> rows</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"3"</span><span style="color:#A6E22E"> columns</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"3"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">div</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"rows"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">>Number of rows:&#x3C;/</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">form-spinbutton</span></span>
<span class="line"><span style="color:#A6E22E">			value</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"3"</span></span>
<span class="line"><span style="color:#A6E22E">			zero-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Add Row"</span></span>
<span class="line"><span style="color:#A6E22E">			increment-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Increment"</span></span>
<span class="line"><span style="color:#F8F8F2">		></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">button</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"button"</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"decrement"</span><span style="color:#A6E22E"> aria-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Decrement"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">				−</span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;/</span><span style="color:#F92672">button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">p</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"value"</span><span style="color:#F8F8F2">>3&#x3C;/</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">button</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"button"</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"increment"</span><span style="color:#A6E22E"> aria-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Increment"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">				+</span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;/</span><span style="color:#F92672">button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">form-spinbutton</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">div</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">div</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"columns"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">>Number of columns:&#x3C;/</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">form-spinbutton</span></span>
<span class="line"><span style="color:#A6E22E">			value</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"3"</span></span>
<span class="line"><span style="color:#A6E22E">			zero-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Add Column"</span></span>
<span class="line"><span style="color:#A6E22E">			increment-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Increment"</span></span>
<span class="line"><span style="color:#F8F8F2">		></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">button</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"button"</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"decrement"</span><span style="color:#A6E22E"> aria-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Decrement"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">				−</span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;/</span><span style="color:#F92672">button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">p</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"value"</span><span style="color:#F8F8F2">>3&#x3C;/</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">button</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"button"</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"increment"</span><span style="color:#A6E22E"> aria-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Increment"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">				+</span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;/</span><span style="color:#F92672">button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">form-spinbutton</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">div</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">table</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">thead</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">tr</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">				&#x3C;</span><span style="color:#F92672">th</span><span style="color:#A6E22E"> scope</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"col"</span><span style="color:#F8F8F2">>Row&#x3C;/</span><span style="color:#F92672">th</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;/</span><span style="color:#F92672">tr</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">thead</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">tbody</span><span style="color:#F8F8F2">>&#x3C;/</span><span style="color:#F92672">tbody</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">tfoot</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">tr</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">				&#x3C;</span><span style="color:#F92672">th</span><span style="color:#A6E22E"> scope</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"row"</span><span style="color:#F8F8F2">>Sum&#x3C;/</span><span style="color:#F92672">th</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;/</span><span style="color:#F92672">tr</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">tfoot</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">table</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">template</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"calc-table-row"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">tr</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">th</span><span style="color:#A6E22E"> scope</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"row"</span><span style="color:#F8F8F2">>&#x3C;</span><span style="color:#F92672">slot</span><span style="color:#F8F8F2">>&#x3C;/</span><span style="color:#F92672">slot</span><span style="color:#F8F8F2">>&#x3C;/</span><span style="color:#F92672">th</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">tr</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">template</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">template</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"calc-table-colhead"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">th</span><span style="color:#A6E22E"> scope</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"col"</span><span style="color:#F8F8F2">>&#x3C;</span><span style="color:#F92672">slot</span><span style="color:#F8F8F2">>&#x3C;/</span><span style="color:#F92672">slot</span><span style="color:#F8F8F2">>&#x3C;/</span><span style="color:#F92672">th</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">template</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">template</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"calc-table-cell"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">td</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">label</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">				&#x3C;</span><span style="color:#F92672">span</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"visually-hidden"</span><span style="color:#F8F8F2">>&#x3C;</span><span style="color:#F92672">slot</span><span style="color:#F8F8F2">>&#x3C;/</span><span style="color:#F92672">slot</span><span style="color:#F8F8F2">>&#x3C;/</span><span style="color:#F92672">span</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">				&#x3C;</span><span style="color:#F92672">input</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"number"</span><span style="color:#A6E22E"> min</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"0"</span><span style="color:#A6E22E"> max</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"100"</span><span style="color:#A6E22E"> step</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"1"</span><span style="color:#A6E22E"> value</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">""</span><span style="color:#F8F8F2"> /></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;/</span><span style="color:#F92672">label</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">td</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">template</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;/</span><span style="color:#F92672">calc-table</span><span style="color:#F8F8F2">></span></span>
<span class="line"></span></code></pre>
		<basic-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</basic-button>
	</module-codeblock>
</div>

<div role="tabpanel" id="panel_calc-table.css" aria-labelledby="trigger_calc-table.css" hidden>
	<module-codeblock language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">calc-table.css</span>
			<span class="language">css</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">calc-table</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">inline-block</span><span style="color:#F8F8F2">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	.</span><span style="color:#66D9EF;font-style:italic">rows</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">	.</span><span style="color:#66D9EF;font-style:italic">columns</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">flex</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		gap</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-m);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		justify-content</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">space-between</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		margin-block-end</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-m);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26; p {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			margin</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span></code></pre>
		<basic-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</basic-button>
	</module-codeblock>
</div>

<div role="tabpanel" id="panel_calc-table.ts" aria-labelledby="trigger_calc-table.ts">
	<module-codeblock language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">calc-table.ts</span>
			<span class="language">ts</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F92672">	type</span><span style="color:#F8F8F2"> Component,</span></span>
<span class="line"><span style="color:#F92672">	type</span><span style="color:#F8F8F2"> State,</span></span>
<span class="line"><span style="color:#F8F8F2">	asInteger,</span></span>
<span class="line"><span style="color:#F8F8F2">	component,</span></span>
<span class="line"><span style="color:#F8F8F2">	insertOrRemoveElement,</span></span>
<span class="line"><span style="color:#F8F8F2">	on,</span></span>
<span class="line"><span style="color:#F8F8F2">	setProperty,</span></span>
<span class="line"><span style="color:#F8F8F2">	setText,</span></span>
<span class="line"><span style="color:#F8F8F2">	state,</span></span>
<span class="line"><span style="color:#F8F8F2">} </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> '../../../'</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> { FormSpinbuttonProps } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> '../form-spinbutton/form-spinbutton'</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">export</span><span style="color:#66D9EF;font-style:italic"> type</span><span> </span><span style="color:#A6E22E;text-decoration:underline">CalcTableProps</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F8F8F2">	columns</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> number</span></span>
<span class="line"><span style="color:#F8F8F2">	rows</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> number</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">export</span><span style="color:#F92672"> default</span><span style="color:#A6E22E"> component</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">	'calc-table'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">	{</span></span>
<span class="line"><span style="color:#F8F8F2">		columns: </span><span style="color:#A6E22E">asInteger</span><span style="color:#F8F8F2">(),</span></span>
<span class="line"><span style="color:#F8F8F2">		rows: </span><span style="color:#A6E22E">asInteger</span><span style="color:#F8F8F2">(),</span></span>
<span class="line"><span style="color:#F8F8F2">	},</span></span>
<span class="line"><span style="color:#F8F8F2">	(</span><span style="color:#FD971F;font-style:italic">el</span><span style="color:#F8F8F2">, { </span><span style="color:#FD971F;font-style:italic">all</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">first</span><span style="color:#F8F8F2"> }) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> colHeads </span><span style="color:#F92672">=</span><span style="color:#E6DB74"> 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> rowTemplate </span><span style="color:#F92672">=</span></span>
<span class="line"><span style="color:#F8F8F2">			el.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">HTMLTemplateElement</span><span style="color:#F8F8F2">>(</span><span style="color:#E6DB74">'.calc-table-row'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> colheadTemplate </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> el.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">HTMLTemplateElement</span><span style="color:#F8F8F2">>(</span></span>
<span class="line"><span style="color:#E6DB74">			'.calc-table-colhead'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">		)</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> cellTemplate </span><span style="color:#F92672">=</span></span>
<span class="line"><span style="color:#F8F8F2">			el.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">HTMLTemplateElement</span><span style="color:#F8F8F2">>(</span><span style="color:#E6DB74">'.calc-table-cell'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F92672">		if</span><span style="color:#F8F8F2"> (</span><span style="color:#F92672">!</span><span style="color:#F8F8F2">rowTemplate </span><span style="color:#F92672">||</span><span style="color:#F92672"> !</span><span style="color:#F8F8F2">colheadTemplate </span><span style="color:#F92672">||</span><span style="color:#F92672"> !</span><span style="color:#F8F8F2">cellTemplate)</span></span>
<span class="line"><span style="color:#F92672">			throw</span><span style="color:#F92672"> new</span><span style="color:#A6E22E"> Error</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'Missing template elements'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> colSums </span><span style="color:#F92672">=</span><span style="color:#F92672"> new</span><span style="color:#A6E22E"> Map</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#66D9EF;font-style:italic">string</span><span style="color:#F8F8F2">, </span><span style="color:#A6E22E;text-decoration:underline">State</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#66D9EF;font-style:italic">number</span><span style="color:#F8F8F2">>>()</span></span>
<span class="line"><span style="color:#F92672">		for</span><span style="color:#F8F8F2"> (</span><span style="color:#66D9EF;font-style:italic">let</span><span style="color:#F8F8F2"> i </span><span style="color:#F92672">=</span><span style="color:#AE81FF"> 0</span><span style="color:#F8F8F2">; i </span><span style="color:#F92672">&#x3C;</span><span style="color:#F8F8F2"> el.columns; i</span><span style="color:#F92672">++</span><span style="color:#F8F8F2">) {</span></span>
<span class="line"><span style="color:#F8F8F2">			colSums.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(colHeads[i], </span><span style="color:#A6E22E">state</span><span style="color:#F8F8F2">(</span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">))</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#A6E22E"> calcColumnSum</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> (</span><span style="color:#FD971F;font-style:italic">rowKey</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> string</span><span style="color:#F8F8F2">)</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> number</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F92672">			return</span><span style="color:#F8F8F2"> Array.</span><span style="color:#A6E22E">from</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">				el.</span><span style="color:#A6E22E">querySelectorAll</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">HTMLInputElement</span><span style="color:#F8F8F2">>(</span></span>
<span class="line"><span style="color:#E6DB74">					`tbody input[data-key="</span><span style="color:#F92672">${</span><span style="color:#F8F8F2">rowKey</span><span style="color:#F92672">}</span><span style="color:#E6DB74">"]`</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">				),</span></span>
<span class="line"><span style="color:#F8F8F2">			)</span></span>
<span class="line"><span style="color:#F8F8F2">				.</span><span style="color:#A6E22E">map</span><span style="color:#F8F8F2">(</span><span style="color:#FD971F;font-style:italic">input</span><span style="color:#66D9EF;font-style:italic"> =></span></span>
<span class="line"><span style="color:#F8F8F2">					Number.</span><span style="color:#A6E22E">isFinite</span><span style="color:#F8F8F2">(input.valueAsNumber)</span></span>
<span class="line"><span style="color:#F92672">						?</span><span style="color:#F8F8F2"> input.valueAsNumber</span></span>
<span class="line"><span style="color:#F92672">						:</span><span style="color:#AE81FF"> 0</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">				)</span></span>
<span class="line"><span style="color:#F8F8F2">				.</span><span style="color:#A6E22E">reduce</span><span style="color:#F8F8F2">((</span><span style="color:#FD971F;font-style:italic">acc</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">val</span><span style="color:#F8F8F2">) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> acc </span><span style="color:#F92672">+</span><span style="color:#F8F8F2"> val, </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">		return</span><span style="color:#F8F8F2"> [</span></span>
<span class="line"><span style="color:#88846F">			/* Control number of rows / columns */</span></span>
<span class="line"><span style="color:#A6E22E">			setProperty</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">				'rows'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">				() </span><span style="color:#66D9EF;font-style:italic">=></span></span>
<span class="line"><span style="color:#F8F8F2">					el.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">Component</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">FormSpinbuttonProps</span><span style="color:#F8F8F2">>>(</span></span>
<span class="line"><span style="color:#E6DB74">						'.rows form-spinbutton'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">					)?.value,</span></span>
<span class="line"><span style="color:#F8F8F2">			),</span></span>
<span class="line"><span style="color:#A6E22E">			setProperty</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">				'columns'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">				() </span><span style="color:#66D9EF;font-style:italic">=></span></span>
<span class="line"><span style="color:#F8F8F2">					el.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">Component</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">FormSpinbuttonProps</span><span style="color:#F8F8F2">>>(</span></span>
<span class="line"><span style="color:#E6DB74">						'.columns form-spinbutton'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">					)?.value,</span></span>
<span class="line"><span style="color:#F8F8F2">			),</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			/* Create rows */</span></span>
<span class="line"><span style="color:#A6E22E">			first</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">				'tbody'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">				insertOrRemoveElement</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#FD971F;font-style:italic">					target</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> el.rows </span><span style="color:#F92672">-</span><span style="color:#F8F8F2"> target.</span><span style="color:#A6E22E">querySelectorAll</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'tr'</span><span style="color:#F8F8F2">).length,</span></span>
<span class="line"><span style="color:#F8F8F2">					{</span></span>
<span class="line"><span style="color:#F8F8F2">						position: </span><span style="color:#E6DB74">'beforeend'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">						create</span><span style="color:#F8F8F2">: </span><span style="color:#FD971F;font-style:italic">parent</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> row </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> document.</span><span style="color:#A6E22E">importNode</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">								rowTemplate.content,</span></span>
<span class="line"><span style="color:#AE81FF">								true</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">							).firstElementChild</span></span>
<span class="line"><span style="color:#F92672">							if</span><span style="color:#F8F8F2"> (</span><span style="color:#F92672">!</span><span style="color:#F8F8F2">(row </span><span style="color:#F92672">instanceof</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLTableRowElement</span><span style="color:#F8F8F2">))</span></span>
<span class="line"><span style="color:#F92672">								throw</span><span style="color:#F92672"> new</span><span style="color:#A6E22E"> Error</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">									`Expected &#x3C;tr> as root in table row template, got </span><span style="color:#F92672">${</span><span style="color:#F8F8F2">row</span><span style="color:#F92672">}</span><span style="color:#E6DB74">`</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">								)</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> rowKey </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> String</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">								parent.</span><span style="color:#A6E22E">querySelectorAll</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'tr'</span><span style="color:#F8F8F2">).length </span><span style="color:#F92672">+</span><span style="color:#AE81FF"> 1</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">							)</span></span>
<span class="line"><span style="color:#F8F8F2">							row.dataset[</span><span style="color:#E6DB74">'key'</span><span style="color:#F8F8F2">] </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> rowKey</span></span>
<span class="line"><span style="color:#F8F8F2">							row.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'slot'</span><span style="color:#F8F8F2">)?.</span><span style="color:#A6E22E">replaceWith</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">								document.</span><span style="color:#A6E22E">createTextNode</span><span style="color:#F8F8F2">(rowKey),</span></span>
<span class="line"><span style="color:#F8F8F2">							)</span></span>
<span class="line"><span style="color:#F92672">							return</span><span style="color:#F8F8F2"> row</span></span>
<span class="line"><span style="color:#F8F8F2">						},</span></span>
<span class="line"><span style="color:#A6E22E">						resolve</span><span style="color:#F8F8F2">: () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F92672">							for</span><span style="color:#F8F8F2"> (</span><span style="color:#66D9EF;font-style:italic">const</span><span style="color:#F8F8F2"> [colKey, colSum] </span><span style="color:#F92672">of</span><span style="color:#F8F8F2"> colSums) {</span></span>
<span class="line"><span style="color:#F8F8F2">								colSum.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(</span><span style="color:#A6E22E">calcColumnSum</span><span style="color:#F8F8F2">(colKey))</span></span>
<span class="line"><span style="color:#F8F8F2">							}</span></span>
<span class="line"><span style="color:#F8F8F2">						},</span></span>
<span class="line"><span style="color:#F8F8F2">					},</span></span>
<span class="line"><span style="color:#F8F8F2">				),</span></span>
<span class="line"><span style="color:#F8F8F2">			),</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			/* Create column headers */</span></span>
<span class="line"><span style="color:#A6E22E">			first</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">				'thead tr'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">				insertOrRemoveElement</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#FD971F;font-style:italic">					target</span><span style="color:#66D9EF;font-style:italic"> =></span></span>
<span class="line"><span style="color:#F8F8F2">						el.columns </span><span style="color:#F92672">-</span><span style="color:#F8F8F2"> (target.</span><span style="color:#A6E22E">querySelectorAll</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'th'</span><span style="color:#F8F8F2">).length </span><span style="color:#F92672">-</span><span style="color:#AE81FF"> 1</span><span style="color:#F8F8F2">),</span></span>
<span class="line"><span style="color:#F8F8F2">					{</span></span>
<span class="line"><span style="color:#F8F8F2">						position: </span><span style="color:#E6DB74">'beforeend'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">						create</span><span style="color:#F8F8F2">: </span><span style="color:#FD971F;font-style:italic">parent</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> cell </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> document.</span><span style="color:#A6E22E">importNode</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">								colheadTemplate.content,</span></span>
<span class="line"><span style="color:#AE81FF">								true</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">							).firstElementChild</span></span>
<span class="line"><span style="color:#F92672">							if</span><span style="color:#F8F8F2"> (</span><span style="color:#F92672">!</span><span style="color:#F8F8F2">(cell </span><span style="color:#F92672">instanceof</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLTableCellElement</span><span style="color:#F8F8F2">))</span></span>
<span class="line"><span style="color:#F92672">								throw</span><span style="color:#F92672"> new</span><span style="color:#A6E22E"> Error</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">									`Expected &#x3C;th> as root in column header template, got </span><span style="color:#F92672">${</span><span style="color:#F8F8F2">cell</span><span style="color:#F92672">}</span><span style="color:#E6DB74">`</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">								)</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> colKey </span><span style="color:#F92672">=</span></span>
<span class="line"><span style="color:#F8F8F2">								colHeads[</span></span>
<span class="line"><span style="color:#F8F8F2">									parent.</span><span style="color:#A6E22E">querySelectorAll</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'th'</span><span style="color:#F8F8F2">).length </span><span style="color:#F92672">-</span><span style="color:#AE81FF"> 1</span></span>
<span class="line"><span style="color:#F8F8F2">								]</span></span>
<span class="line"><span style="color:#F8F8F2">							colSums.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(colKey, </span><span style="color:#A6E22E">state</span><span style="color:#F8F8F2">(</span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">))</span></span>
<span class="line"><span style="color:#F8F8F2">							cell.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'slot'</span><span style="color:#F8F8F2">)?.</span><span style="color:#A6E22E">replaceWith</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">								document.</span><span style="color:#A6E22E">createTextNode</span><span style="color:#F8F8F2">(colKey),</span></span>
<span class="line"><span style="color:#F8F8F2">							)</span></span>
<span class="line"><span style="color:#F92672">							return</span><span style="color:#F8F8F2"> cell</span></span>
<span class="line"><span style="color:#F8F8F2">						},</span></span>
<span class="line"><span style="color:#F8F8F2">					},</span></span>
<span class="line"><span style="color:#F8F8F2">				),</span></span>
<span class="line"><span style="color:#F8F8F2">			),</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			/* Create input cells for each row */</span></span>
<span class="line"><span style="color:#A6E22E">			all</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">				'tbody tr'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">				insertOrRemoveElement</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#FD971F;font-style:italic">					target</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> el.columns </span><span style="color:#F92672">-</span><span style="color:#F8F8F2"> target.</span><span style="color:#A6E22E">querySelectorAll</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'td'</span><span style="color:#F8F8F2">).length,</span></span>
<span class="line"><span style="color:#F8F8F2">					{</span></span>
<span class="line"><span style="color:#F8F8F2">						position: </span><span style="color:#E6DB74">'beforeend'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">						create</span><span style="color:#F8F8F2">: (</span><span style="color:#FD971F;font-style:italic">parent</span><span style="color:#F92672">:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLElement</span><span style="color:#F8F8F2">) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> cell </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> document.</span><span style="color:#A6E22E">importNode</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">								cellTemplate.content,</span></span>
<span class="line"><span style="color:#AE81FF">								true</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">							).firstElementChild</span></span>
<span class="line"><span style="color:#F92672">							if</span><span style="color:#F8F8F2"> (</span><span style="color:#F92672">!</span><span style="color:#F8F8F2">(cell </span><span style="color:#F92672">instanceof</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLTableCellElement</span><span style="color:#F8F8F2">))</span></span>
<span class="line"><span style="color:#F92672">								throw</span><span style="color:#F92672"> new</span><span style="color:#A6E22E"> Error</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">									`Expected &#x3C;td> as root in cell template, got </span><span style="color:#F92672">${</span><span style="color:#F8F8F2">cell</span><span style="color:#F92672">}</span><span style="color:#E6DB74">`</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">								)</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> rowKey </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> parent.dataset[</span><span style="color:#E6DB74">'key'</span><span style="color:#F8F8F2">]</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> colKey </span><span style="color:#F92672">=</span></span>
<span class="line"><span style="color:#F8F8F2">								colHeads[parent.</span><span style="color:#A6E22E">querySelectorAll</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'td'</span><span style="color:#F8F8F2">).length]</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> input </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> cell.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'input'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F92672">							if</span><span style="color:#F8F8F2"> (</span><span style="color:#F92672">!</span><span style="color:#F8F8F2">input)</span></span>
<span class="line"><span style="color:#F92672">								throw</span><span style="color:#F92672"> new</span><span style="color:#A6E22E"> Error</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">									'No input found in cell template'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">								)</span></span>
<span class="line"><span style="color:#F8F8F2">							input.dataset[</span><span style="color:#E6DB74">'key'</span><span style="color:#F8F8F2">] </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> colKey</span></span>
<span class="line"><span style="color:#F8F8F2">							cell.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'slot'</span><span style="color:#F8F8F2">)?.</span><span style="color:#A6E22E">replaceWith</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">								document.</span><span style="color:#A6E22E">createTextNode</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">`</span><span style="color:#F92672">${</span><span style="color:#F8F8F2">colKey</span><span style="color:#F92672">}${</span><span style="color:#F8F8F2">rowKey</span><span style="color:#F92672">}</span><span style="color:#E6DB74">`</span><span style="color:#F8F8F2">),</span></span>
<span class="line"><span style="color:#F8F8F2">							)</span></span>
<span class="line"><span style="color:#F92672">							return</span><span style="color:#F8F8F2"> cell</span></span>
<span class="line"><span style="color:#F8F8F2">						},</span></span>
<span class="line"><span style="color:#F8F8F2">					},</span></span>
<span class="line"><span style="color:#F8F8F2">				),</span></span>
<span class="line"><span style="color:#F8F8F2">			),</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			/* Create empty cells for column sums */</span></span>
<span class="line"><span style="color:#A6E22E">			first</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">				'tfoot tr'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">				insertOrRemoveElement</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#FD971F;font-style:italic">					target</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> el.columns </span><span style="color:#F92672">-</span><span style="color:#F8F8F2"> target.</span><span style="color:#A6E22E">querySelectorAll</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'td'</span><span style="color:#F8F8F2">).length,</span></span>
<span class="line"><span style="color:#F8F8F2">					{</span></span>
<span class="line"><span style="color:#F8F8F2">						position: </span><span style="color:#E6DB74">'beforeend'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">						create</span><span style="color:#F8F8F2">: </span><span style="color:#FD971F;font-style:italic">parent</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> cell </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> document.</span><span style="color:#A6E22E">createElement</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'td'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> colKey </span><span style="color:#F92672">=</span></span>
<span class="line"><span style="color:#F8F8F2">								colHeads[parent.</span><span style="color:#A6E22E">querySelectorAll</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'td'</span><span style="color:#F8F8F2">).length]</span></span>
<span class="line"><span style="color:#F8F8F2">							cell.dataset[</span><span style="color:#E6DB74">'key'</span><span style="color:#F8F8F2">] </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> colKey</span></span>
<span class="line"><span style="color:#F92672">							return</span><span style="color:#F8F8F2"> cell</span></span>
<span class="line"><span style="color:#F8F8F2">						},</span></span>
<span class="line"><span style="color:#F8F8F2">					},</span></span>
<span class="line"><span style="color:#F8F8F2">				),</span></span>
<span class="line"><span style="color:#F8F8F2">			),</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			/* Update column values when cells change */</span></span>
<span class="line"><span style="color:#A6E22E">			all</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">				'tbody input'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">				on</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'change'</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">e</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">					const</span><span style="color:#F8F8F2"> colKey </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> (e.target </span><span style="color:#F92672">as</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLInputElement</span><span style="color:#F8F8F2">)?.dataset[</span></span>
<span class="line"><span style="color:#E6DB74">						'key'</span></span>
<span class="line"><span style="color:#F8F8F2">					]</span></span>
<span class="line"><span style="color:#F8F8F2">					colSums.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">(colKey</span><span style="color:#F92672">!</span><span style="color:#F8F8F2">)?.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(</span><span style="color:#A6E22E">calcColumnSum</span><span style="color:#F8F8F2">(colKey</span><span style="color:#F92672">!</span><span style="color:#F8F8F2">))</span></span>
<span class="line"><span style="color:#F8F8F2">				}),</span></span>
<span class="line"><span style="color:#F8F8F2">			),</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			/* Update sums for each column */</span></span>
<span class="line"><span style="color:#A6E22E">			all</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">				'tfoot td'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">				setText</span><span style="color:#F8F8F2">(</span><span style="color:#FD971F;font-style:italic">target</span><span style="color:#66D9EF;font-style:italic"> =></span></span>
<span class="line"><span style="color:#A6E22E">					String</span><span style="color:#F8F8F2">(colSums.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">(target.dataset[</span><span style="color:#E6DB74">'key'</span><span style="color:#F8F8F2">]</span><span style="color:#F92672">!</span><span style="color:#F8F8F2">)</span><span style="color:#F92672">!</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">()),</span></span>
<span class="line"><span style="color:#F8F8F2">				),</span></span>
<span class="line"><span style="color:#F8F8F2">			),</span></span>
<span class="line"><span style="color:#F8F8F2">		]</span></span>
<span class="line"><span style="color:#F8F8F2">	},</span></span>
<span class="line"><span style="color:#F8F8F2">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">declare</span><span style="color:#F8F8F2"> global {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	interface</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLElementTagNameMap</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#E6DB74">		'calc-table'</span><span style="color:#F92672">:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">Component</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">CalcTableProps</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span></code></pre>
		<basic-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</basic-button>
	</module-codeblock>
</div>
</module-tabgroup>