Skip to content

E
experiments
Commit 910ca865 authored by Julie Blanc's avatar Julie Blanc
Browse files
Options

repeating-table-header initial

parent 91ef553d
Hide whitespace changes
Inline Side-by-side
Showing with 256 additions and 0 deletions
repeating-table-header/index.html 0 → 100644
View file @ 910ca865
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<title>
Repeating Table Headers
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script>
class RepeatingTableHeaders extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
afterPageLayout(pageElement, page, breakToken, chunker) {
// Find all split table elements
let tables = pageElement.querySelectorAll("table[data-split-from]");
tables.forEach((table) => {
// Get the reference UUID of the node
let ref = table.dataset.ref;
// Find the node in the original source
let sourceTable = chunker.source.querySelector("[data-ref='"+ ref +"']");
// Find if there is a header
let header = sourceTable.querySelector("thead");
if (header) {
// Clone the header element
let clonedHeader = header.cloneNode(true);
// Insert the header at the start of the split table
table.insertBefore(clonedHeader, table.firstChild);
}
});
}
}
Paged.registerHandlers(RepeatingTableHeaders);
</script>
<link href="interface.css" rel="stylesheet" type='text/css'>
<style>
:root{
font-size: 18px;
}
@page {
size: A5;
margin: 20mm 20mm;
@bottom-left{
content: counter(page);
}
}
table {
font-family: Helvetica, Arial, Verdana;
font-size: 18pt
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td>
<td>2-1</td>
<td>3-1</td>
</tr>
<tr>
<td>1-2</td>
<td>2-2</td>
<td>3-2</td>
</tr>
<tr>
<td>1-3</td>
<td>2-3</td>
<td>3-3</td>
</tr>
<tr>
<td>1-4</td>
<td>2-4</td>
<td>3-4</td>
</tr>
<tr>
<td>1-5</td>
<td>2-5</td>
<td>3-5</td>
</tr>
<tr>
<td>1-6</td>
<td>2-6</td>
<td>3-6</td>
</tr>
<tr>
<td>1-7</td>
<td>2-7</td>
<td>3-7</td>
</tr>
<tr>
<td>1-8</td>
<td>2-8</td>
<td>3-8</td>
</tr>
<tr>
<td>1-9</td>
<td>2-9</td>
<td>3-9</td>
</tr>
<tr>
<td>1-10</td>
<td>2-10</td>
<td>3-10</td>
</tr>
<tr>
<td>1-11</td>
<td>2-11</td>
<td>3-11</td>
</tr>
<tr>
<td>1-12</td>
<td>2-12</td>
<td>3-12</td>
</tr>
<tr>
<td>1-13</td>
<td>2-13</td>
<td>3-13</td>
</tr>
<tr>
<td>1-14</td>
<td>2-14</td>
<td>3-14</td>
</tr>
<tr>
<td>1-15</td>
<td>2-15</td>
<td>3-15</td>
</tr>
<tr>
<td>1-16</td>
<td>2-16</td>
<td>3-16</td>
</tr>
<tr>
<td>1-17</td>
<td>2-17</td>
<td>3-17</td>
</tr>
<tr>
<td>1-18</td>
<td>2-18</td>
<td>3-18</td>
</tr>
<tr>
<td>1-19</td>
<td>2-19</td>
<td>3-19</td>
</tr>
<tr>
<td>1-20</td>
<td>2-20</td>
<td>3-20</td>
</tr>
<tr>
<td>1-21</td>
<td>2-21</td>
<td>3-21</td>
</tr>
<tr>
<td>1-22</td>
<td>2-22</td>
<td>3-22</td>
</tr>
<tr>
<td>1-23</td>
<td>2-23</td>
<td>3-23</td>
</tr>
<tr>
<td>1-24</td>
<td>2-24</td>
<td>3-24</td>
</tr>
<tr>
<td>1-25</td>
<td>2-25</td>
<td>3-25</td>
</tr>
<tr>
<td>1-26</td>
<td>2-26</td>
<td>3-26</td>
</tr>
<tr>
<td>1-27</td>
<td>2-27</td>
<td>3-27</td>
</tr>
<tr>
<td>1-28</td>
<td>2-28</td>
<td>3-28</td>
</tr>
<tr>
<td>1-29</td>
<td>2-29</td>
<td>3-29</td>
</tr>
<tr>
<td>1-30</td>
<td>2-30</td>
<td>3-30</td>
</tr>
<tr>
<td>1-31</td>
<td>2-31</td>
<td>3-31</td>
</tr>
<tr>
<td>1-32</td>
<td>2-32</td>
<td>3-32</td>
</tr>
<tr>
<td>1-33</td>
<td>2-33</td>
<td>3-33</td>
</tr>
<tr>
<td>1-34</td>
<td>2-34</td>
<td>3-34</td>
</tr>
<tr>
<td>1-35</td>
<td>2-35</td>
<td>3-35</td>
</tr>
</tbody>
</table>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment