| title of the table | ||
|---|---|---|
| Header 1 | Header 2 | Header...3 |
| hi | Cell Content 2 | Cell Content 3 |
| More Cell Content 1 | More Cell Content 2 | More Cell Content 3 |
| Even More Cell Content 1 | Even More Cell Content 2 | Even More Cell Content 3 |
| And Repeat 1 | And Repeat 2 | And Repeat 3 |
| Cell Content 1 | Cell Content 2 | Cell Content 3 |
| More Cell Content 1 | More Cell Content 2 | More Cell Content 3 |
| Even More Cell Content 1 | Even More Cell Content 2 | Even More Cell Content 3 |
| And Repeat 1 | And Repeat 2 | And Repeat 3 |
| Cell Content 1 | Cell Content 2 | Cell Content 3 |
| More Cell Content 1 | More Cell Content 2 | More Cell Content 3 |
| Even More Cell Content 1 | Even More Cell Content 2 | Even More Cell Content 3 |
| And Repeat 1 | And Repeat 2 | And Repeat 3 |
| Cell Content 1 | Cell Content 2 | Cell Content 3 |
| More Cell Content 1 | More Cell Content 2 | More Cell Content 3 |
| Even More Cell Content 1 | Even More Cell Content 2 | Even More Cell Content 3 |
| And Repeat 1 | And Repeat 2 | And Repeat 3 |
| Cell Content 1 | Cell Content 2 | Cell Content 3 |
| More Cell Content 1 | More Cell Content 2 | More Cell Content 3 |
| Even More Cell Content 1 | Even More Cell Content 2 | Even More Cell Content 3 |
ariaLabel
You will need to provide a custom ariaLabel impl if your table's first header row does not contain the same number
of cells as the number of columns in your table.
Check out the table above, its first header row contains a single cell with colspan=3. If you do not customize ariaLabel, you will end up with a table having an aria label on the first header cell only.
You need to tell the plugin to use the 2nd table row to get aria-labels it needs:
$("table").floatThead({
ariaLabel: function($table, $headerCell, columnIndex){
// Get labels from the 2nd header row. Ignore $headerCell, its not useful to us.
return $table.find(`thead > tr:nth-child(2) > th:nth-child(${columnIndex + 1})`).text();
}
});Open console to see the html of the real table after the plugin runs.
Please note, that the header cells that contain the aria-labels are not visible to the user, only to screen readers.