<div class="scrollable-table max-height">
<table class="">
<caption>This is the table caption</caption>
<thead>
<tr>
<th scope="col" class=""></th>
<th scope="col" class="">Column 1</th>
<th scope="col" class="">Column 2</th>
<th scope="col" class="">Column 3</th>
<th scope="col" class="">Column 4</th>
<th scope="col" class="">Column 5</th>
<th scope="col" class="">Column 6</th>
<th scope="col" class="">Column 7</th>
<th scope="col" class="">Column 8</th>
<th scope="col" class="">Column 9</th>
<th scope="col" class="">Column 10</th>
<th scope="col" class="">Column 11</th>
<th scope="col" class="">Column 12</th>
<th scope="col" class="">Column 13</th>
<th scope="col" class="">Column 14</th>
<th scope="col" class="">Column 15</th>
<th scope="col" class="">Column 16</th>
<th scope="col" class="">Column 17</th>
<th scope="col" class="">Column 18</th>
<th scope="col" class="">Column 19</th>
<th scope="col" class="">Column 20</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row" class="">Footer row</th>
<td class="">Footer 1</td>
<td class="">Footer 2</td>
<td class="">Footer 3</td>
<td class="">Footer 4</td>
<td class="">Footer 5</td>
<td class="">Footer 6</td>
<td class="">Footer 7</td>
<td class="">Footer 8</td>
<td class="">Footer 9</td>
<td class="">Footer 10</td>
<td class="">Footer 11</td>
<td class="">Footer 12</td>
<td class="">Footer 13</td>
<td class="">Footer 14</td>
<td class="">Footer 15</td>
<td class="">Footer 16</td>
<td class="">Footer 17</td>
<td class="">Footer 18</td>
<td class="">Footer 19</td>
<td class="">Footer 20</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" class="">Row 1</th>
<td class="">Row 1, Column 1</td>
<td class="">Row 1, Column 2</td>
<td class="">Row 1, Column 3</td>
<td class="">Row 1, Column 4</td>
<td class="">Row 1, Column 5</td>
<td class="">Row 1, Column 6</td>
<td class="">Row 1, Column 7</td>
<td class="">Row 1, Column 8</td>
<td class="">Row 1, Column 9</td>
<td class="">Row 1, Column 10</td>
<td class="">Row 1, Column 11</td>
<td class="">Row 1, Column 12</td>
<td class="">Row 1, Column 13</td>
<td class="">Row 1, Column 14</td>
<td class="">Row 1, Column 15</td>
<td class="">Row 1, Column 16</td>
<td class="">Row 1, Column 17</td>
<td class="">Row 1, Column 18</td>
<td class="">Row 1, Column 19</td>
<td class="">Row 1, Column 20</td>
</tr>
<tr>
<th scope="row" class="">Row 2</th>
<td class="">Row 2, Column 1</td>
<td class="">Row 2, Column 2</td>
<td class="">Row 2, Column 3</td>
<td class="">Row 2, Column 4</td>
<td class="">Row 2, Column 5</td>
<td class="">Row 2, Column 6</td>
<td class="">Row 2, Column 7</td>
<td class="">Row 2, Column 8</td>
<td class="">Row 2, Column 9</td>
<td class="">Row 2, Column 10</td>
<td class="">Row 2, Column 11</td>
<td class="">Row 2, Column 12</td>
<td class="">Row 2, Column 13</td>
<td class="">Row 2, Column 14</td>
<td class="">Row 2, Column 15</td>
<td class="">Row 2, Column 16</td>
<td class="">Row 2, Column 17</td>
<td class="">Row 2, Column 18</td>
<td class="">Row 2, Column 19</td>
<td class="">Row 2, Column 20</td>
</tr>
<tr>
<th scope="row" class="">Row 3</th>
<td class="">Row 3, Column 1</td>
<td class="">Row 3, Column 2</td>
<td class="">Row 3, Column 3</td>
<td class="">Row 3, Column 4</td>
<td class="">Row 3, Column 5</td>
<td class="">Row 3, Column 6</td>
<td class="">Row 3, Column 7</td>
<td class="">Row 3, Column 8</td>
<td class="">Row 3, Column 9</td>
<td class="">Row 3, Column 10</td>
<td class="">Row 3, Column 11</td>
<td class="">Row 3, Column 12</td>
<td class="">Row 3, Column 13</td>
<td class="">Row 3, Column 14</td>
<td class="">Row 3, Column 15</td>
<td class="">Row 3, Column 16</td>
<td class="">Row 3, Column 17</td>
<td class="">Row 3, Column 18</td>
<td class="">Row 3, Column 19</td>
<td class="">Row 3, Column 20</td>
</tr>
<tr>
<th scope="row" class="">Row 4</th>
<td class="">Row 4, Column 1</td>
<td class="">Row 4, Column 2</td>
<td class="">Row 4, Column 3</td>
<td class="">Row 4, Column 4</td>
<td class="">Row 4, Column 5</td>
<td class="">Row 4, Column 6</td>
<td class="">Row 4, Column 7</td>
<td class="">Row 4, Column 8</td>
<td class="">Row 4, Column 9</td>
<td class="">Row 4, Column 10</td>
<td class="">Row 4, Column 11</td>
<td class="">Row 4, Column 12</td>
<td class="">Row 4, Column 13</td>
<td class="">Row 4, Column 14</td>
<td class="">Row 4, Column 15</td>
<td class="">Row 4, Column 16</td>
<td class="">Row 4, Column 17</td>
<td class="">Row 4, Column 18</td>
<td class="">Row 4, Column 19</td>
<td class="">Row 4, Column 20</td>
</tr>
<tr>
<th scope="row" class="">Row 5</th>
<td class="">Row 5, Column 1</td>
<td class="">Row 5, Column 2</td>
<td class="">Row 5, Column 3</td>
<td class="">Row 5, Column 4</td>
<td class="">Row 5, Column 5</td>
<td class="">Row 5, Column 6</td>
<td class="">Row 5, Column 7</td>
<td class="">Row 5, Column 8</td>
<td class="">Row 5, Column 9</td>
<td class="">Row 5, Column 10</td>
<td class="">Row 5, Column 11</td>
<td class="">Row 5, Column 12</td>
<td class="">Row 5, Column 13</td>
<td class="">Row 5, Column 14</td>
<td class="">Row 5, Column 15</td>
<td class="">Row 5, Column 16</td>
<td class="">Row 5, Column 17</td>
<td class="">Row 5, Column 18</td>
<td class="">Row 5, Column 19</td>
<td class="">Row 5, Column 20</td>
</tr>
<tr>
<th scope="row" class="">Row 6</th>
<td class="">Row 6, Column 1</td>
<td class="">Row 6, Column 2</td>
<td class="">Row 6, Column 3</td>
<td class="">Row 6, Column 4</td>
<td class="">Row 6, Column 5</td>
<td class="">Row 6, Column 6</td>
<td class="">Row 6, Column 7</td>
<td class="">Row 6, Column 8</td>
<td class="">Row 6, Column 9</td>
<td class="">Row 6, Column 10</td>
<td class="">Row 6, Column 11</td>
<td class="">Row 6, Column 12</td>
<td class="">Row 6, Column 13</td>
<td class="">Row 6, Column 14</td>
<td class="">Row 6, Column 15</td>
<td class="">Row 6, Column 16</td>
<td class="">Row 6, Column 17</td>
<td class="">Row 6, Column 18</td>
<td class="">Row 6, Column 19</td>
<td class="">Row 6, Column 20</td>
</tr>
<tr>
<th scope="row" class="">Row 7</th>
<td class="">Row 7, Column 1</td>
<td class="">Row 7, Column 2</td>
<td class="">Row 7, Column 3</td>
<td class="">Row 7, Column 4</td>
<td class="">Row 7, Column 5</td>
<td class="">Row 7, Column 6</td>
<td class="">Row 7, Column 7</td>
<td class="">Row 7, Column 8</td>
<td class="">Row 7, Column 9</td>
<td class="">Row 7, Column 10</td>
<td class="">Row 7, Column 11</td>
<td class="">Row 7, Column 12</td>
<td class="">Row 7, Column 13</td>
<td class="">Row 7, Column 14</td>
<td class="">Row 7, Column 15</td>
<td class="">Row 7, Column 16</td>
<td class="">Row 7, Column 17</td>
<td class="">Row 7, Column 18</td>
<td class="">Row 7, Column 19</td>
<td class="">Row 7, Column 20</td>
</tr>
<tr>
<th scope="row" class="">Row 8</th>
<td class="">Row 8, Column 1</td>
<td class="">Row 8, Column 2</td>
<td class="">Row 8, Column 3</td>
<td class="">Row 8, Column 4</td>
<td class="">Row 8, Column 5</td>
<td class="">Row 8, Column 6</td>
<td class="">Row 8, Column 7</td>
<td class="">Row 8, Column 8</td>
<td class="">Row 8, Column 9</td>
<td class="">Row 8, Column 10</td>
<td class="">Row 8, Column 11</td>
<td class="">Row 8, Column 12</td>
<td class="">Row 8, Column 13</td>
<td class="">Row 8, Column 14</td>
<td class="">Row 8, Column 15</td>
<td class="">Row 8, Column 16</td>
<td class="">Row 8, Column 17</td>
<td class="">Row 8, Column 18</td>
<td class="">Row 8, Column 19</td>
<td class="">Row 8, Column 20</td>
</tr>
<tr>
<th scope="row" class="">Row 9</th>
<td class="">Row 9, Column 1</td>
<td class="">Row 9, Column 2</td>
<td class="">Row 9, Column 3</td>
<td class="">Row 9, Column 4</td>
<td class="">Row 9, Column 5</td>
<td class="">Row 9, Column 6</td>
<td class="">Row 9, Column 7</td>
<td class="">Row 9, Column 8</td>
<td class="">Row 9, Column 9</td>
<td class="">Row 9, Column 10</td>
<td class="">Row 9, Column 11</td>
<td class="">Row 9, Column 12</td>
<td class="">Row 9, Column 13</td>
<td class="">Row 9, Column 14</td>
<td class="">Row 9, Column 15</td>
<td class="">Row 9, Column 16</td>
<td class="">Row 9, Column 17</td>
<td class="">Row 9, Column 18</td>
<td class="">Row 9, Column 19</td>
<td class="">Row 9, Column 20</td>
</tr>
<tr>
<th scope="row" class="">Row 10</th>
<td class="">Row 10, Column 1</td>
<td class="">Row 10, Column 2</td>
<td class="">Row 10, Column 3</td>
<td class="">Row 10, Column 4</td>
<td class="">Row 10, Column 5</td>
<td class="">Row 10, Column 6</td>
<td class="">Row 10, Column 7</td>
<td class="">Row 10, Column 8</td>
<td class="">Row 10, Column 9</td>
<td class="">Row 10, Column 10</td>
<td class="">Row 10, Column 11</td>
<td class="">Row 10, Column 12</td>
<td class="">Row 10, Column 13</td>
<td class="">Row 10, Column 14</td>
<td class="">Row 10, Column 15</td>
<td class="">Row 10, Column 16</td>
<td class="">Row 10, Column 17</td>
<td class="">Row 10, Column 18</td>
<td class="">Row 10, Column 19</td>
<td class="">Row 10, Column 20</td>
</tr>
<tr>
<th scope="row" class="">Row 11</th>
<td class="">Row 11, Column 1</td>
<td class="">Row 11, Column 2</td>
<td class="">Row 11, Column 3</td>
<td class="">Row 11, Column 4</td>
<td class="">Row 11, Column 5</td>
<td class="">Row 11, Column 6</td>
<td class="">Row 11, Column 7</td>
<td class="">Row 11, Column 8</td>
<td class="">Row 11, Column 9</td>
<td class="">Row 11, Column 10</td>
<td class="">Row 11, Column 11</td>
<td class="">Row 11, Column 12</td>
<td class="">Row 11, Column 13</td>
<td class="">Row 11, Column 14</td>
<td class="">Row 11, Column 15</td>
<td class="">Row 11, Column 16</td>
<td class="">Row 11, Column 17</td>
<td class="">Row 11, Column 18</td>
<td class="">Row 11, Column 19</td>
<td class="">Row 11, Column 20</td>
</tr>
<tr>
<th scope="row" class="">Row 12</th>
<td class="">Row 12, Column 1</td>
<td class="">Row 12, Column 2</td>
<td class="">Row 12, Column 3</td>
<td class="">Row 12, Column 4</td>
<td class="">Row 12, Column 5</td>
<td class="">Row 12, Column 6</td>
<td class="">Row 12, Column 7</td>
<td class="">Row 12, Column 8</td>
<td class="">Row 12, Column 9</td>
<td class="">Row 12, Column 10</td>
<td class="">Row 12, Column 11</td>
<td class="">Row 12, Column 12</td>
<td class="">Row 12, Column 13</td>
<td class="">Row 12, Column 14</td>
<td class="">Row 12, Column 15</td>
<td class="">Row 12, Column 16</td>
<td class="">Row 12, Column 17</td>
<td class="">Row 12, Column 18</td>
<td class="">Row 12, Column 19</td>
<td class="">Row 12, Column 20</td>
</tr>
</tbody>
</table>
</div>
<div class="scrollable-table max-height">
{{#> @partial-block}}
{{> @table scrollable-table}}
{{/ @partial-block}}
</div>
{
"scrollable-table": {
"data": {
"tbody": {
"rows": [
{
"cells": [
{
"row-head": "Row 1"
},
{
"content": "Row 1, Column 1"
},
{
"content": "Row 1, Column 2"
},
{
"content": "Row 1, Column 3"
},
{
"content": "Row 1, Column 4"
},
{
"content": "Row 1, Column 5"
},
{
"content": "Row 1, Column 6"
},
{
"content": "Row 1, Column 7"
},
{
"content": "Row 1, Column 8"
},
{
"content": "Row 1, Column 9"
},
{
"content": "Row 1, Column 10"
},
{
"content": "Row 1, Column 11"
},
{
"content": "Row 1, Column 12"
},
{
"content": "Row 1, Column 13"
},
{
"content": "Row 1, Column 14"
},
{
"content": "Row 1, Column 15"
},
{
"content": "Row 1, Column 16"
},
{
"content": "Row 1, Column 17"
},
{
"content": "Row 1, Column 18"
},
{
"content": "Row 1, Column 19"
},
{
"content": "Row 1, Column 20"
}
]
},
{
"cells": [
{
"row-head": "Row 2"
},
{
"content": "Row 2, Column 1"
},
{
"content": "Row 2, Column 2"
},
{
"content": "Row 2, Column 3"
},
{
"content": "Row 2, Column 4"
},
{
"content": "Row 2, Column 5"
},
{
"content": "Row 2, Column 6"
},
{
"content": "Row 2, Column 7"
},
{
"content": "Row 2, Column 8"
},
{
"content": "Row 2, Column 9"
},
{
"content": "Row 2, Column 10"
},
{
"content": "Row 2, Column 11"
},
{
"content": "Row 2, Column 12"
},
{
"content": "Row 2, Column 13"
},
{
"content": "Row 2, Column 14"
},
{
"content": "Row 2, Column 15"
},
{
"content": "Row 2, Column 16"
},
{
"content": "Row 2, Column 17"
},
{
"content": "Row 2, Column 18"
},
{
"content": "Row 2, Column 19"
},
{
"content": "Row 2, Column 20"
}
]
},
{
"cells": [
{
"row-head": "Row 3"
},
{
"content": "Row 3, Column 1"
},
{
"content": "Row 3, Column 2"
},
{
"content": "Row 3, Column 3"
},
{
"content": "Row 3, Column 4"
},
{
"content": "Row 3, Column 5"
},
{
"content": "Row 3, Column 6"
},
{
"content": "Row 3, Column 7"
},
{
"content": "Row 3, Column 8"
},
{
"content": "Row 3, Column 9"
},
{
"content": "Row 3, Column 10"
},
{
"content": "Row 3, Column 11"
},
{
"content": "Row 3, Column 12"
},
{
"content": "Row 3, Column 13"
},
{
"content": "Row 3, Column 14"
},
{
"content": "Row 3, Column 15"
},
{
"content": "Row 3, Column 16"
},
{
"content": "Row 3, Column 17"
},
{
"content": "Row 3, Column 18"
},
{
"content": "Row 3, Column 19"
},
{
"content": "Row 3, Column 20"
}
]
},
{
"cells": [
{
"row-head": "Row 4"
},
{
"content": "Row 4, Column 1"
},
{
"content": "Row 4, Column 2"
},
{
"content": "Row 4, Column 3"
},
{
"content": "Row 4, Column 4"
},
{
"content": "Row 4, Column 5"
},
{
"content": "Row 4, Column 6"
},
{
"content": "Row 4, Column 7"
},
{
"content": "Row 4, Column 8"
},
{
"content": "Row 4, Column 9"
},
{
"content": "Row 4, Column 10"
},
{
"content": "Row 4, Column 11"
},
{
"content": "Row 4, Column 12"
},
{
"content": "Row 4, Column 13"
},
{
"content": "Row 4, Column 14"
},
{
"content": "Row 4, Column 15"
},
{
"content": "Row 4, Column 16"
},
{
"content": "Row 4, Column 17"
},
{
"content": "Row 4, Column 18"
},
{
"content": "Row 4, Column 19"
},
{
"content": "Row 4, Column 20"
}
]
},
{
"cells": [
{
"row-head": "Row 5"
},
{
"content": "Row 5, Column 1"
},
{
"content": "Row 5, Column 2"
},
{
"content": "Row 5, Column 3"
},
{
"content": "Row 5, Column 4"
},
{
"content": "Row 5, Column 5"
},
{
"content": "Row 5, Column 6"
},
{
"content": "Row 5, Column 7"
},
{
"content": "Row 5, Column 8"
},
{
"content": "Row 5, Column 9"
},
{
"content": "Row 5, Column 10"
},
{
"content": "Row 5, Column 11"
},
{
"content": "Row 5, Column 12"
},
{
"content": "Row 5, Column 13"
},
{
"content": "Row 5, Column 14"
},
{
"content": "Row 5, Column 15"
},
{
"content": "Row 5, Column 16"
},
{
"content": "Row 5, Column 17"
},
{
"content": "Row 5, Column 18"
},
{
"content": "Row 5, Column 19"
},
{
"content": "Row 5, Column 20"
}
]
},
{
"cells": [
{
"row-head": "Row 6"
},
{
"content": "Row 6, Column 1"
},
{
"content": "Row 6, Column 2"
},
{
"content": "Row 6, Column 3"
},
{
"content": "Row 6, Column 4"
},
{
"content": "Row 6, Column 5"
},
{
"content": "Row 6, Column 6"
},
{
"content": "Row 6, Column 7"
},
{
"content": "Row 6, Column 8"
},
{
"content": "Row 6, Column 9"
},
{
"content": "Row 6, Column 10"
},
{
"content": "Row 6, Column 11"
},
{
"content": "Row 6, Column 12"
},
{
"content": "Row 6, Column 13"
},
{
"content": "Row 6, Column 14"
},
{
"content": "Row 6, Column 15"
},
{
"content": "Row 6, Column 16"
},
{
"content": "Row 6, Column 17"
},
{
"content": "Row 6, Column 18"
},
{
"content": "Row 6, Column 19"
},
{
"content": "Row 6, Column 20"
}
]
},
{
"cells": [
{
"row-head": "Row 7"
},
{
"content": "Row 7, Column 1"
},
{
"content": "Row 7, Column 2"
},
{
"content": "Row 7, Column 3"
},
{
"content": "Row 7, Column 4"
},
{
"content": "Row 7, Column 5"
},
{
"content": "Row 7, Column 6"
},
{
"content": "Row 7, Column 7"
},
{
"content": "Row 7, Column 8"
},
{
"content": "Row 7, Column 9"
},
{
"content": "Row 7, Column 10"
},
{
"content": "Row 7, Column 11"
},
{
"content": "Row 7, Column 12"
},
{
"content": "Row 7, Column 13"
},
{
"content": "Row 7, Column 14"
},
{
"content": "Row 7, Column 15"
},
{
"content": "Row 7, Column 16"
},
{
"content": "Row 7, Column 17"
},
{
"content": "Row 7, Column 18"
},
{
"content": "Row 7, Column 19"
},
{
"content": "Row 7, Column 20"
}
]
},
{
"cells": [
{
"row-head": "Row 8"
},
{
"content": "Row 8, Column 1"
},
{
"content": "Row 8, Column 2"
},
{
"content": "Row 8, Column 3"
},
{
"content": "Row 8, Column 4"
},
{
"content": "Row 8, Column 5"
},
{
"content": "Row 8, Column 6"
},
{
"content": "Row 8, Column 7"
},
{
"content": "Row 8, Column 8"
},
{
"content": "Row 8, Column 9"
},
{
"content": "Row 8, Column 10"
},
{
"content": "Row 8, Column 11"
},
{
"content": "Row 8, Column 12"
},
{
"content": "Row 8, Column 13"
},
{
"content": "Row 8, Column 14"
},
{
"content": "Row 8, Column 15"
},
{
"content": "Row 8, Column 16"
},
{
"content": "Row 8, Column 17"
},
{
"content": "Row 8, Column 18"
},
{
"content": "Row 8, Column 19"
},
{
"content": "Row 8, Column 20"
}
]
},
{
"cells": [
{
"row-head": "Row 9"
},
{
"content": "Row 9, Column 1"
},
{
"content": "Row 9, Column 2"
},
{
"content": "Row 9, Column 3"
},
{
"content": "Row 9, Column 4"
},
{
"content": "Row 9, Column 5"
},
{
"content": "Row 9, Column 6"
},
{
"content": "Row 9, Column 7"
},
{
"content": "Row 9, Column 8"
},
{
"content": "Row 9, Column 9"
},
{
"content": "Row 9, Column 10"
},
{
"content": "Row 9, Column 11"
},
{
"content": "Row 9, Column 12"
},
{
"content": "Row 9, Column 13"
},
{
"content": "Row 9, Column 14"
},
{
"content": "Row 9, Column 15"
},
{
"content": "Row 9, Column 16"
},
{
"content": "Row 9, Column 17"
},
{
"content": "Row 9, Column 18"
},
{
"content": "Row 9, Column 19"
},
{
"content": "Row 9, Column 20"
}
]
},
{
"cells": [
{
"row-head": "Row 10"
},
{
"content": "Row 10, Column 1"
},
{
"content": "Row 10, Column 2"
},
{
"content": "Row 10, Column 3"
},
{
"content": "Row 10, Column 4"
},
{
"content": "Row 10, Column 5"
},
{
"content": "Row 10, Column 6"
},
{
"content": "Row 10, Column 7"
},
{
"content": "Row 10, Column 8"
},
{
"content": "Row 10, Column 9"
},
{
"content": "Row 10, Column 10"
},
{
"content": "Row 10, Column 11"
},
{
"content": "Row 10, Column 12"
},
{
"content": "Row 10, Column 13"
},
{
"content": "Row 10, Column 14"
},
{
"content": "Row 10, Column 15"
},
{
"content": "Row 10, Column 16"
},
{
"content": "Row 10, Column 17"
},
{
"content": "Row 10, Column 18"
},
{
"content": "Row 10, Column 19"
},
{
"content": "Row 10, Column 20"
}
]
},
{
"cells": [
{
"row-head": "Row 11"
},
{
"content": "Row 11, Column 1"
},
{
"content": "Row 11, Column 2"
},
{
"content": "Row 11, Column 3"
},
{
"content": "Row 11, Column 4"
},
{
"content": "Row 11, Column 5"
},
{
"content": "Row 11, Column 6"
},
{
"content": "Row 11, Column 7"
},
{
"content": "Row 11, Column 8"
},
{
"content": "Row 11, Column 9"
},
{
"content": "Row 11, Column 10"
},
{
"content": "Row 11, Column 11"
},
{
"content": "Row 11, Column 12"
},
{
"content": "Row 11, Column 13"
},
{
"content": "Row 11, Column 14"
},
{
"content": "Row 11, Column 15"
},
{
"content": "Row 11, Column 16"
},
{
"content": "Row 11, Column 17"
},
{
"content": "Row 11, Column 18"
},
{
"content": "Row 11, Column 19"
},
{
"content": "Row 11, Column 20"
}
]
},
{
"cells": [
{
"row-head": "Row 12"
},
{
"content": "Row 12, Column 1"
},
{
"content": "Row 12, Column 2"
},
{
"content": "Row 12, Column 3"
},
{
"content": "Row 12, Column 4"
},
{
"content": "Row 12, Column 5"
},
{
"content": "Row 12, Column 6"
},
{
"content": "Row 12, Column 7"
},
{
"content": "Row 12, Column 8"
},
{
"content": "Row 12, Column 9"
},
{
"content": "Row 12, Column 10"
},
{
"content": "Row 12, Column 11"
},
{
"content": "Row 12, Column 12"
},
{
"content": "Row 12, Column 13"
},
{
"content": "Row 12, Column 14"
},
{
"content": "Row 12, Column 15"
},
{
"content": "Row 12, Column 16"
},
{
"content": "Row 12, Column 17"
},
{
"content": "Row 12, Column 18"
},
{
"content": "Row 12, Column 19"
},
{
"content": "Row 12, Column 20"
}
]
}
]
},
"caption": "This is the table caption",
"thead": [
{
"content": ""
},
{
"content": "Column 1"
},
{
"content": "Column 2"
},
{
"content": "Column 3"
},
{
"content": "Column 4"
},
{
"content": "Column 5"
},
{
"content": "Column 6"
},
{
"content": "Column 7"
},
{
"content": "Column 8"
},
{
"content": "Column 9"
},
{
"content": "Column 10"
},
{
"content": "Column 11"
},
{
"content": "Column 12"
},
{
"content": "Column 13"
},
{
"content": "Column 14"
},
{
"content": "Column 15"
},
{
"content": "Column 16"
},
{
"content": "Column 17"
},
{
"content": "Column 18"
},
{
"content": "Column 19"
},
{
"content": "Column 20"
}
],
"tfoot": [
{
"row-head": "Footer row"
},
{
"content": "Footer 1"
},
{
"content": "Footer 2"
},
{
"content": "Footer 3"
},
{
"content": "Footer 4"
},
{
"content": "Footer 5"
},
{
"content": "Footer 6"
},
{
"content": "Footer 7"
},
{
"content": "Footer 8"
},
{
"content": "Footer 9"
},
{
"content": "Footer 10"
},
{
"content": "Footer 11"
},
{
"content": "Footer 12"
},
{
"content": "Footer 13"
},
{
"content": "Footer 14"
},
{
"content": "Footer 15"
},
{
"content": "Footer 16"
},
{
"content": "Footer 17"
},
{
"content": "Footer 18"
},
{
"content": "Footer 19"
},
{
"content": "Footer 20"
}
]
}
}
}
@media screen {
/**
* Scrollable table container
*/
.scrollable-table {
overflow-x: auto;
overflow-y: hidden;
background-color: var(--white);
-webkit-overflow-scrolling: touch;
}
.scrollable-table.scroll-left {
box-shadow: var(--table-shadow-left);
}
.scrollable-table.scroll-right {
box-shadow: var(--table-shadow-right);
}
.scrollable-table.scroll-left.scroll-right {
box-shadow:
var(--table-shadow-left),
var(--table-shadow-right);
}
}
/**
* Toggle shadows on scrollable table container
*/
(function () {
const scrollableTable = document.querySelector('.scrollable-table');
// Bail if there’s no scrollable table container
if (!scrollableTable) return;
// Calculate how and when to show scroll shadows
function calculateScrollShadows() {
// Calculate max scroll distance
let tableContainerWidth = scrollableTable.clientWidth;
let tableScrollWidth = scrollableTable.scrollWidth;
let sLeftMax = tableScrollWidth - tableContainerWidth;
// Set scroll shadow to the right
if (scrollableTable.clientWidth < scrollableTable.scrollWidth) {
scrollableTable.classList.add('scroll-right');
}
// Check scroll position of table container
let sLeft = scrollableTable.scrollLeft;
if (sLeft > 0) {
scrollableTable.classList.add('scroll-left');
}
if (sLeft === 0) {
scrollableTable.classList.remove('scroll-left');
}
if (sLeft < sLeftMax) {
scrollableTable.classList.add('scroll-right');
}
if (sLeft === sLeftMax) {
scrollableTable.classList.remove('scroll-right');
}
}
// Set shadows on page load
window.onload = calculateScrollShadows;
// Recalculate shadows on window resize
window.addEventListener('resize', calculateScrollShadows);
// Recalculate shadows on scroll
scrollableTable.addEventListener('scroll', calculateScrollShadows);
})();
This component is basically just a container with overflow-x: auto; to allow
overflowing tables to scroll horizontally. There’s also a JavaScript function
with this component that sets an inset box-shadow, partly depending on if
there’s a need for it (i.e. content is overflowing and scroll is available),
but also when the user has started scrolling to show that there’s a possibility
to scroll in the other direction.