Editable table

<div class="w-100">
<div class="line-editor" data-lines>
<div class="table-wrap" data-allow-x data-scroller="Purchase order lines">
<table class="table">
<caption class="sr-only">Purchase order lines</caption>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Quantity</th>
<th scope="col">Unit price</th>
<th scope="col" class="r">Line total</th>
<th scope="col">
<span class="sr-only">Remove</span>
</th>
</tr>
</thead>
<tbody>
<tr data-line>
<td>
<select class="input" data-line-product data-line-label="Product" aria-label="Product" required>
<option value="">Choose a product</option>
<option value="HD-1001" data-price="4.50" data-tax="8">Oat flat white · HD-1001</option>
<option value="HD-1002" data-price="4.20" data-tax="8">Cappuccino · HD-1002</option>
<option value="HD-1003" data-price="5.20" data-tax="8">Matcha latte · HD-1003</option>
<option value="HD-1004" data-price="4.40" data-tax="8">Hot chocolate · HD-1004</option>
<option value="HD-1005" data-price="3.00" data-tax="8">Espresso · HD-1005</option>
<option value="HD-1006" data-price="4.60" data-tax="8">Chai latte · HD-1006</option>
<option value="CD-1007" data-price="4.80" data-tax="8">Cold brew · CD-1007</option>
<option value="CD-1008" data-price="2.40" data-tax="8">Sparkling water · CD-1008</option>
<option value="CD-1009" data-price="3.90" data-tax="8">Orange juice · CD-1009</option>
<option value="CD-1010" data-price="3.20" data-tax="8">Iced tea · CD-1010</option>
<option value="CD-1011" data-price="3.40" data-tax="8">Lemonade · CD-1011</option>
<option value="CD-1012" data-price="4.20" data-tax="8">Kombucha · CD-1012</option>
<option value="BK-1013" data-price="3.50" data-tax="8" selected>Butter croissant · BK-1013</option>
<option value="BK-1014" data-price="6.00" data-tax="8">Raspberry tart · BK-1014</option>
<option value="BK-1015" data-price="3.80" data-tax="8">Pain au chocolat · BK-1015</option>
<option value="BK-1016" data-price="2.20" data-tax="8">Chocolate cookie · BK-1016</option>
<option value="BK-1017" data-price="3.60" data-tax="8">Banana bread · BK-1017</option>
<option value="BK-1018" data-price="3.30" data-tax="8">Blueberry muffin · BK-1018</option>
<option value="BK-1019" data-price="3.70" data-tax="8">Cinnamon roll · BK-1019</option>
<option value="BK-1020" data-price="6.50" data-tax="8">Sourdough loaf · BK-1020</option>
<option value="GR-1021" data-price="1.95" data-tax="0">Whole milk, 1 L · GR-1021</option>
<option value="GR-1022" data-price="4.75" data-tax="0">Free-range eggs, 12 · GR-1022</option>
<option value="GR-1023" data-price="2.95" data-tax="0">Oat milk, 1 L · GR-1023</option>
<option value="GR-1024" data-price="5.40" data-tax="0">Granola, 500 g · GR-1024</option>
<option value="GR-1025" data-price="8.90" data-tax="0">Wildflower honey · GR-1025</option>
<option value="GB-1026" data-price="12.00" data-tax="5.5">Gift box · GB-1026</option>
<option value="GB-1027" data-price="9.00" data-tax="5.5">Tote bag · GB-1027</option>
<option value="GB-1028" data-price="25.00" data-tax="0">Gift card · GB-1028</option>
<option value="HD-1030" data-price="0.80" data-tax="8">Extra shot · HD-1030</option>
<option value="CB-1031" data-price="11.50" data-tax="0">House blend beans, 250 g · CB-1031</option>
<option value="CB-1032" data-price="14.00" data-tax="0">Ethiopia Yirgacheffe, 250 g · CB-1032</option>
<option value="CB-1033" data-price="13.00" data-tax="0">Colombia Huila, 250 g · CB-1033</option>
<option value="CB-1034" data-price="12.00" data-tax="0">Decaf blend, 250 g · CB-1034</option>
<option value="CB-1035" data-price="38.00" data-tax="0">Espresso roast, 1 kg · CB-1035</option>
<option value="TE-1036" data-price="6.50" data-tax="0">English breakfast tea, 20 bags · TE-1036</option>
<option value="TE-1037" data-price="6.50" data-tax="0">Earl grey tea, 20 bags · TE-1037</option>
<option value="TE-1038" data-price="5.90" data-tax="0">Peppermint tea, 20 bags · TE-1038</option>
<option value="TE-1039" data-price="9.50" data-tax="0">Sencha green tea, 100 g · TE-1039</option>
<option value="MR-1040" data-price="14.00" data-tax="5.5">Ceramic mug, 350 ml · MR-1040</option>
<option value="MR-1041" data-price="22.00" data-tax="5.5">Travel cup, 450 ml · MR-1041</option>
<option value="MR-1042" data-price="34.00" data-tax="5.5">Pour-over kit · MR-1042</option>
<option value="MR-1043" data-price="6.00" data-tax="5.5">Paper filters, 100 · MR-1043</option>
<option value="MR-1044" data-price="58.00" data-tax="5.5">Hand grinder · MR-1044</option>
<option value="GR-1045" data-price="4.50" data-tax="0">Dark chocolate bar, 70% · GR-1045</option>
<option value="BK-1046" data-price="5.20" data-tax="8">Almond biscotti, 6 · BK-1046</option>
<option value="GB-1047" data-price="15.00" data-tax="5.5">Shortbread tin · GB-1047</option>
<option value="SP-1048" data-price="9.80" data-tax="5.5">Vanilla syrup, 750 ml · SP-1048</option>
<option value="SP-1049" data-price="9.80" data-tax="5.5">Caramel syrup, 750 ml · SP-1049</option>
<option value="SP-1050" data-price="7.50" data-tax="5.5">Cups 12 oz, 50 · SP-1050</option>
<option value="SP-1051" data-price="4.00" data-tax="5.5">Lids 12 oz, 50 · SP-1051</option>
<option value="SP-1052" data-price="3.50" data-tax="5.5">Napkins, 250 · SP-1052</option>
</select>
</td>
<td class="qty">
<div class="input">
<input type="number" min="1" step="1" value="24" data-line-qty data-line-label="Quantity" aria-label="Quantity" inputmode="numeric">
</div>
</td>
<td class="price">
<div class="input">
<span class="affix">$</span>
<input type="number" min="0" step="0.01" value="1.40" data-line-price data-line-label="Unit price" aria-label="Unit price" inputmode="decimal">
</div>
</td>
<td class="r" data-line-total>$33.60</td>
<td class="r">
<button type="button" class="btn btn-ghost btn-icon btn-sm" data-line-remove aria-label="Remove line" data-tip="Remove line">
<i class="ti ti-trash">
</i>
</button>
</td>
</tr>
<tr data-line>
<td>
<select class="input" data-line-product data-line-label="Product" aria-label="Product" required>
<option value="">Choose a product</option>
<option value="HD-1001" data-price="4.50" data-tax="8">Oat flat white · HD-1001</option>
<option value="HD-1002" data-price="4.20" data-tax="8">Cappuccino · HD-1002</option>
<option value="HD-1003" data-price="5.20" data-tax="8">Matcha latte · HD-1003</option>
<option value="HD-1004" data-price="4.40" data-tax="8">Hot chocolate · HD-1004</option>
<option value="HD-1005" data-price="3.00" data-tax="8">Espresso · HD-1005</option>
<option value="HD-1006" data-price="4.60" data-tax="8">Chai latte · HD-1006</option>
<option value="CD-1007" data-price="4.80" data-tax="8">Cold brew · CD-1007</option>
<option value="CD-1008" data-price="2.40" data-tax="8">Sparkling water · CD-1008</option>
<option value="CD-1009" data-price="3.90" data-tax="8">Orange juice · CD-1009</option>
<option value="CD-1010" data-price="3.20" data-tax="8">Iced tea · CD-1010</option>
<option value="CD-1011" data-price="3.40" data-tax="8">Lemonade · CD-1011</option>
<option value="CD-1012" data-price="4.20" data-tax="8">Kombucha · CD-1012</option>
<option value="BK-1013" data-price="3.50" data-tax="8">Butter croissant · BK-1013</option>
<option value="BK-1014" data-price="6.00" data-tax="8">Raspberry tart · BK-1014</option>
<option value="BK-1015" data-price="3.80" data-tax="8">Pain au chocolat · BK-1015</option>
<option value="BK-1016" data-price="2.20" data-tax="8">Chocolate cookie · BK-1016</option>
<option value="BK-1017" data-price="3.60" data-tax="8">Banana bread · BK-1017</option>
<option value="BK-1018" data-price="3.30" data-tax="8">Blueberry muffin · BK-1018</option>
<option value="BK-1019" data-price="3.70" data-tax="8">Cinnamon roll · BK-1019</option>
<option value="BK-1020" data-price="6.50" data-tax="8" selected>Sourdough loaf · BK-1020</option>
<option value="GR-1021" data-price="1.95" data-tax="0">Whole milk, 1 L · GR-1021</option>
<option value="GR-1022" data-price="4.75" data-tax="0">Free-range eggs, 12 · GR-1022</option>
<option value="GR-1023" data-price="2.95" data-tax="0">Oat milk, 1 L · GR-1023</option>
<option value="GR-1024" data-price="5.40" data-tax="0">Granola, 500 g · GR-1024</option>
<option value="GR-1025" data-price="8.90" data-tax="0">Wildflower honey · GR-1025</option>
<option value="GB-1026" data-price="12.00" data-tax="5.5">Gift box · GB-1026</option>
<option value="GB-1027" data-price="9.00" data-tax="5.5">Tote bag · GB-1027</option>
<option value="GB-1028" data-price="25.00" data-tax="0">Gift card · GB-1028</option>
<option value="HD-1030" data-price="0.80" data-tax="8">Extra shot · HD-1030</option>
<option value="CB-1031" data-price="11.50" data-tax="0">House blend beans, 250 g · CB-1031</option>
<option value="CB-1032" data-price="14.00" data-tax="0">Ethiopia Yirgacheffe, 250 g · CB-1032</option>
<option value="CB-1033" data-price="13.00" data-tax="0">Colombia Huila, 250 g · CB-1033</option>
<option value="CB-1034" data-price="12.00" data-tax="0">Decaf blend, 250 g · CB-1034</option>
<option value="CB-1035" data-price="38.00" data-tax="0">Espresso roast, 1 kg · CB-1035</option>
<option value="TE-1036" data-price="6.50" data-tax="0">English breakfast tea, 20 bags · TE-1036</option>
<option value="TE-1037" data-price="6.50" data-tax="0">Earl grey tea, 20 bags · TE-1037</option>
<option value="TE-1038" data-price="5.90" data-tax="0">Peppermint tea, 20 bags · TE-1038</option>
<option value="TE-1039" data-price="9.50" data-tax="0">Sencha green tea, 100 g · TE-1039</option>
<option value="MR-1040" data-price="14.00" data-tax="5.5">Ceramic mug, 350 ml · MR-1040</option>
<option value="MR-1041" data-price="22.00" data-tax="5.5">Travel cup, 450 ml · MR-1041</option>
<option value="MR-1042" data-price="34.00" data-tax="5.5">Pour-over kit · MR-1042</option>
<option value="MR-1043" data-price="6.00" data-tax="5.5">Paper filters, 100 · MR-1043</option>
<option value="MR-1044" data-price="58.00" data-tax="5.5">Hand grinder · MR-1044</option>
<option value="GR-1045" data-price="4.50" data-tax="0">Dark chocolate bar, 70% · GR-1045</option>
<option value="BK-1046" data-price="5.20" data-tax="8">Almond biscotti, 6 · BK-1046</option>
<option value="GB-1047" data-price="15.00" data-tax="5.5">Shortbread tin · GB-1047</option>
<option value="SP-1048" data-price="9.80" data-tax="5.5">Vanilla syrup, 750 ml · SP-1048</option>
<option value="SP-1049" data-price="9.80" data-tax="5.5">Caramel syrup, 750 ml · SP-1049</option>
<option value="SP-1050" data-price="7.50" data-tax="5.5">Cups 12 oz, 50 · SP-1050</option>
<option value="SP-1051" data-price="4.00" data-tax="5.5">Lids 12 oz, 50 · SP-1051</option>
<option value="SP-1052" data-price="3.50" data-tax="5.5">Napkins, 250 · SP-1052</option>
</select>
</td>
<td class="qty">
<div class="input">
<input type="number" min="1" step="1" value="12" data-line-qty data-line-label="Quantity" aria-label="Quantity" inputmode="numeric">
</div>
</td>
<td class="price">
<div class="input">
<span class="affix">$</span>
<input type="number" min="0" step="0.01" value="2.60" data-line-price data-line-label="Unit price" aria-label="Unit price" inputmode="decimal">
</div>
</td>
<td class="r" data-line-total>$31.20</td>
<td class="r">
<button type="button" class="btn btn-ghost btn-icon btn-sm" data-line-remove aria-label="Remove line" data-tip="Remove line">
<i class="ti ti-trash">
</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<template data-line-template>
<tr data-line>
<td>
<select class="input" data-line-product data-line-label="Product" aria-label="Product" required>
<option value="">Choose a product</option>
<option value="HD-1001" data-price="4.50" data-tax="8">Oat flat white · HD-1001</option>
<option value="HD-1002" data-price="4.20" data-tax="8">Cappuccino · HD-1002</option>
<option value="HD-1003" data-price="5.20" data-tax="8">Matcha latte · HD-1003</option>
<option value="HD-1004" data-price="4.40" data-tax="8">Hot chocolate · HD-1004</option>
<option value="HD-1005" data-price="3.00" data-tax="8">Espresso · HD-1005</option>
<option value="HD-1006" data-price="4.60" data-tax="8">Chai latte · HD-1006</option>
<option value="CD-1007" data-price="4.80" data-tax="8">Cold brew · CD-1007</option>
<option value="CD-1008" data-price="2.40" data-tax="8">Sparkling water · CD-1008</option>
<option value="CD-1009" data-price="3.90" data-tax="8">Orange juice · CD-1009</option>
<option value="CD-1010" data-price="3.20" data-tax="8">Iced tea · CD-1010</option>
<option value="CD-1011" data-price="3.40" data-tax="8">Lemonade · CD-1011</option>
<option value="CD-1012" data-price="4.20" data-tax="8">Kombucha · CD-1012</option>
<option value="BK-1013" data-price="3.50" data-tax="8">Butter croissant · BK-1013</option>
<option value="BK-1014" data-price="6.00" data-tax="8">Raspberry tart · BK-1014</option>
<option value="BK-1015" data-price="3.80" data-tax="8">Pain au chocolat · BK-1015</option>
<option value="BK-1016" data-price="2.20" data-tax="8">Chocolate cookie · BK-1016</option>
<option value="BK-1017" data-price="3.60" data-tax="8">Banana bread · BK-1017</option>
<option value="BK-1018" data-price="3.30" data-tax="8">Blueberry muffin · BK-1018</option>
<option value="BK-1019" data-price="3.70" data-tax="8">Cinnamon roll · BK-1019</option>
<option value="BK-1020" data-price="6.50" data-tax="8">Sourdough loaf · BK-1020</option>
<option value="GR-1021" data-price="1.95" data-tax="0">Whole milk, 1 L · GR-1021</option>
<option value="GR-1022" data-price="4.75" data-tax="0">Free-range eggs, 12 · GR-1022</option>
<option value="GR-1023" data-price="2.95" data-tax="0">Oat milk, 1 L · GR-1023</option>
<option value="GR-1024" data-price="5.40" data-tax="0">Granola, 500 g · GR-1024</option>
<option value="GR-1025" data-price="8.90" data-tax="0">Wildflower honey · GR-1025</option>
<option value="GB-1026" data-price="12.00" data-tax="5.5">Gift box · GB-1026</option>
<option value="GB-1027" data-price="9.00" data-tax="5.5">Tote bag · GB-1027</option>
<option value="GB-1028" data-price="25.00" data-tax="0">Gift card · GB-1028</option>
<option value="HD-1030" data-price="0.80" data-tax="8">Extra shot · HD-1030</option>
<option value="CB-1031" data-price="11.50" data-tax="0">House blend beans, 250 g · CB-1031</option>
<option value="CB-1032" data-price="14.00" data-tax="0">Ethiopia Yirgacheffe, 250 g · CB-1032</option>
<option value="CB-1033" data-price="13.00" data-tax="0">Colombia Huila, 250 g · CB-1033</option>
<option value="CB-1034" data-price="12.00" data-tax="0">Decaf blend, 250 g · CB-1034</option>
<option value="CB-1035" data-price="38.00" data-tax="0">Espresso roast, 1 kg · CB-1035</option>
<option value="TE-1036" data-price="6.50" data-tax="0">English breakfast tea, 20 bags · TE-1036</option>
<option value="TE-1037" data-price="6.50" data-tax="0">Earl grey tea, 20 bags · TE-1037</option>
<option value="TE-1038" data-price="5.90" data-tax="0">Peppermint tea, 20 bags · TE-1038</option>
<option value="TE-1039" data-price="9.50" data-tax="0">Sencha green tea, 100 g · TE-1039</option>
<option value="MR-1040" data-price="14.00" data-tax="5.5">Ceramic mug, 350 ml · MR-1040</option>
<option value="MR-1041" data-price="22.00" data-tax="5.5">Travel cup, 450 ml · MR-1041</option>
<option value="MR-1042" data-price="34.00" data-tax="5.5">Pour-over kit · MR-1042</option>
<option value="MR-1043" data-price="6.00" data-tax="5.5">Paper filters, 100 · MR-1043</option>
<option value="MR-1044" data-price="58.00" data-tax="5.5">Hand grinder · MR-1044</option>
<option value="GR-1045" data-price="4.50" data-tax="0">Dark chocolate bar, 70% · GR-1045</option>
<option value="BK-1046" data-price="5.20" data-tax="8">Almond biscotti, 6 · BK-1046</option>
<option value="GB-1047" data-price="15.00" data-tax="5.5">Shortbread tin · GB-1047</option>
<option value="SP-1048" data-price="9.80" data-tax="5.5">Vanilla syrup, 750 ml · SP-1048</option>
<option value="SP-1049" data-price="9.80" data-tax="5.5">Caramel syrup, 750 ml · SP-1049</option>
<option value="SP-1050" data-price="7.50" data-tax="5.5">Cups 12 oz, 50 · SP-1050</option>
<option value="SP-1051" data-price="4.00" data-tax="5.5">Lids 12 oz, 50 · SP-1051</option>
<option value="SP-1052" data-price="3.50" data-tax="5.5">Napkins, 250 · SP-1052</option>
</select>
</td>
<td class="qty">
<div class="input">
<input type="number" min="1" step="1" value="1" data-line-qty data-line-label="Quantity" aria-label="Quantity" inputmode="numeric">
</div>
</td>
<td class="price">
<div class="input">
<span class="affix">$</span>
<input type="number" min="0" step="0.01" value="" data-line-price data-line-label="Unit price" aria-label="Unit price" inputmode="decimal">
</div>
</td>
<td class="r" data-line-total>$0.00</td>
<td class="r">
<button type="button" class="btn btn-ghost btn-icon btn-sm" data-line-remove aria-label="Remove line" data-tip="Remove line">
<i class="ti ti-trash">
</i>
</button>
</td>
</tr>
</template>
<div class="foot">
<button type="button" class="btn" data-line-add>
<i class="ti ti-plus">
</i>Add line</button>
<span class="sr-only" role="status" data-lines-status>
</span>
<dl class="totals-list">
<div>
<dt>Subtotal</dt>
<dd data-out="sub">$0.00</dd>
</div>
<div>
<dt>Tax</dt>
<dd data-out="tax">$0.00</dd>
</div>
<div class="grand">
<dt>Total</dt>
<dd data-out="total">$0.00</dd>
</div>
</dl>
</div>
</div>
</div>

<div class="w-100" data-count-sheet>
<div class="table-wrap" data-allow-x data-scroller="Count sheet">
<table class="table">
<caption class="sr-only">Count sheet</caption>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col" class="r">Expected</th>
<th scope="col">Counted</th>
<th scope="col" class="r">Difference</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Product">
<b class="fw-500">Sparkling water</b>
</td>
<td data-label="Expected" class="r">32</td>
<td data-label="Counted">
<div class="input qty-sm">
<input type="number" min="0" inputmode="numeric" data-counted data-expected="32" data-cost="0.6" aria-label="Counted, Sparkling water">
</div>
</td>
<td data-label="Difference" class="r">
<span data-variance>—</span>
</td>
</tr>
<tr>
<td data-label="Product">
<b class="fw-500">Orange juice</b>
</td>
<td data-label="Expected" class="r">21</td>
<td data-label="Counted">
<div class="input qty-sm">
<input type="number" min="0" inputmode="numeric" data-counted data-expected="21" data-cost="1.2" aria-label="Counted, Orange juice">
</div>
</td>
<td data-label="Difference" class="r">
<span data-variance>—</span>
</td>
</tr>
<tr>
<td data-label="Product">
<b class="fw-500">Kombucha</b>
</td>
<td data-label="Expected" class="r">2</td>
<td data-label="Counted">
<div class="input qty-sm">
<input type="number" min="0" inputmode="numeric" data-counted data-expected="2" data-cost="1.6" aria-label="Counted, Kombucha">
</div>
</td>
<td data-label="Difference" class="r">
<span data-variance>—</span>
</td>
</tr>
<tr>
<td data-label="Product">
<b class="fw-500">Butter croissant</b>
</td>
<td data-label="Expected" class="r">13</td>
<td data-label="Counted">
<div class="input qty-sm">
<input type="number" min="0" inputmode="numeric" data-counted data-expected="13" data-cost="1" aria-label="Counted, Butter croissant">
</div>
</td>
<td data-label="Difference" class="r">
<span data-variance>—</span>
</td>
</tr>
<tr>
<td data-label="Product">
<b class="fw-500">Raspberry tart</b>
</td>
<td data-label="Expected" class="r">0</td>
<td data-label="Counted">
<div class="input qty-sm">
<input type="number" min="0" inputmode="numeric" data-counted data-expected="0" data-cost="2.1" aria-label="Counted, Raspberry tart">
</div>
</td>
<td data-label="Difference" class="r">
<span data-variance>—</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="cluster mt-2">
<span class="muted">Counted: <b data-count-out="done">
</b>
</span>
<span class="muted">Difference: <b data-count-out="units">
</b> units, <b data-count-out="value">
</b>
</span>
</div>
</div>