Data table
The data table can be used for displaying data in a structured form. It can be extended with functions and various kinds of content based on the use case.
Data tables are meant to display big chunks of data enabling you to include certain data manipulation elements alongside the data itself.
The component consists of 2 elements: a flix-data-table-wrapper and the flix-data-table itself. Both elements are equally important for the modifiers to work properly.
Modifiers
These are are the available class modifiers for each element:
Wrapper modifiers
flix-data-table-wrapper--collapsed- Makes the table width smaller by adapting to its content instead of filling the entire available horizontal space.
flix-data-table-wrapper--responsive- Triggers a responsive horizontal scroll on screens bellow `sm` breakpoint.
flix-data-table-wrapper--scrollable- Creates a scrollable table wrapper when vertical space is limited.
Table modifiers
flix-data-table--small- A smaller table with less paddings in the cells.
flix-data-table--sticky-header- On scrollable tables, this makes table header stick to the top while scrolling.
flix-data-table--plain- Removes the "zebra" color effect from the rows.
flix-data-table--show-cols- Shows dividers for all table columns.
Row modifiers
flix-data-table--selected- Adds a highlighted background to the entire row to represent a selected row.
Cell modifiers
All cell modifiers are available for flix-data-table__td and flix-data-table__th elements.
--collapsed- Adds `width: 0` to the cell, making it shrink to fit the content. (Like min-content for table cells).
- Does not work if you add custom `table-layout: fixed` style to the table.
--divider--divider-left--divider-right- Adds a divider on the cell. You can choose which side you want the divider to be added.
--sticky- Makes this cell sticky and adds a "sticky-divider", usually to make one entire column sticky. Must be used together with custom `width` and `left` inline styles that should be tailored to the content on your own table.
--hide-sticky-divider- Can be used if you have multiple sticky columns next to each other but don't want to show column dividers for all of them.
Examples
The default markup of a data table include the headers for each column, so the headers must have scope="col" that identifies the data. E.g.: "This column shows Prices".
The footers are optional and can be used to display the summarization of the data on each column. E.g.: "Total number of available seats".
The caption is also optional, and it can be used to provide a description for the table. It is usually considered good practice to include a caption for accessibility reasons, so screen reader users can understand the purpose of the table.
The th elements represent a header and can have one of four scopes: "col", "row", "colgroup" or "rowgroup".
Please check the th element documentation on MDN for more information on header scopes.
The example bellow also shows a pager component for controlling the data table pagination, but you can use any combination of controllers, such as arrow buttons pagination, input and select fields, etc. When using data table controls, add another wrapper data-table-controls to add the correct space between the data table component and the controls underneath.
<!-- The flix-data-table-controls is only necessary if you want to add a pagination or other controls after the data table. -->
<div class="flix-data-table-controls">
<div class="flix-data-table-wrapper">
<table class="flix-data-table">
<!-- Captions are optional; they provide a description to the data table and must be added before the table body and will be visible bellow. -->
<caption>Trips: Page 1 of 5</caption>
<!-- The cells in thead are identifying the columns so they should always be th with scope="col". -->
<thead class="flix-data-table__header">
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="col">
Name
<button aria-label="Sort rows by name" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-down"></flix-icon>
</button>
</th>
<th class="flix-data-table__th" scope="col">
Time
<button aria-label="Sort rows by time" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-up"></flix-icon>
</button>
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by price" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Price
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by seats" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Seats
</th>
<th class="flix-data-table__th" scope="col">
Options
</th>
</tr>
</thead>
<tbody class="flix-data-table__body">
<!-- If the rows have an identifying cell you can use a th with scope="row". -->
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">AB 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">BC 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">CD 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">DE 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">EF 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">FG 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">GH 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
</tbody>
<!-- Footers are optional and usually used to summarize the columns. E.g.: the sum of all values. -->
<tfoot class="flix-data-table__footer">
<tr class="flix-data-table__row">
<th class="flix-data-table__td" scope="row">Totals</th>
<td class="flix-data-table__td"></td>
<td class="flix-data-table__td flix-has-text-right">1399.93€</td>
<td class="flix-data-table__td flix-has-text-right">203</td>
<td class="flix-data-table__td"></td>
</tr>
</tfoot>
</table>
</div>
<!-- Optional control, usually a pagination. -->
<nav class="flix-pager" aria-label="Data table pagination">
<ul class="flix-pager__list">
<li class="flix-pager__item">
<button class="flix-pager__link flix-pager__link--prev flix-pager__link--disabled" aria-disabled="true" disabled>
<span class="flix-sr-only">Previous page</span>
</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link" aria-current="page">1</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">2</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">3</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">4</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">5</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link flix-pager__link--next">
<span class="flix-sr-only">Next page</span>
</button>
</li>
</ul>
</nav>
</div>Plain
The plain modifier should be applied to the data table element and removes the "zebra" color effect from the rows.
<div class="flix-data-table-wrapper">
<table class="flix-data-table flix-data-table--plain">
<thead class="flix-data-table__header">
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="col">Name</th>
<th class="flix-data-table__th" scope="col">Time</th>
<th class="flix-data-table__th" scope="col">Price</th>
<th class="flix-data-table__th" scope="col">Seats</th>
<th class="flix-data-table__th" scope="col">Options</th>
</tr>
</thead>
<tbody class="flix-data-table__body">
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">AB 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td">22.99€</td>
<td class="flix-data-table__td">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">BC 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td">22.99€</td>
<td class="flix-data-table__td">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">CD 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td">22.99€</td>
<td class="flix-data-table__td">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">DE 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td">22.99€</td>
<td class="flix-data-table__td">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">EF 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td">22.99€</td>
<td class="flix-data-table__td">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">FG 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td">22.99€</td>
<td class="flix-data-table__td">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">GH 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td">22.99€</td>
<td class="flix-data-table__td">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
</tbody>
<tfoot class="flix-data-table__footer">
<tr class="flix-data-table__row">
<th class="flix-data-table__td" scope="row">Totals</th>
<td class="flix-data-table__td"></td>
<td class="flix-data-table__td">1399.93€</td>
<td class="flix-data-table__td">203</td>
<td class="flix-data-table__td"></td>
</tr>
</tfoot>
</table>
</div>Selectable
To create selectable rows you must include at least one column with a small checkbox, that is usually the first column but that's not a hard rule. The checkbox enables keyboard users to easily select the rows by focusing on their respective checkboxes and toggling them with the space bar.
To toggle selected rows pay attention to the following:
- You may also add a click handler to toggle the row selection when the user clicks the row element, but you MUST always allow users to select the rows with only the keyboard, this is usually done with the small checkboxes that should be clearly labelled;
- Ensure the "checked" state of the checkbox and the "selected" state of the row are kept in sync. If their states do not match it can lead to user confusion, specially for screen reader users.
- The selected rows must have
aria-selected="true"attribute for screen readers. The unselected rows may have "false" value on this attribute, or you can omit the attribute altogether. - Add
flix-data-table__row--selectedmodifier to the row element to show it in the highlighted color.
<div class="flix-data-table-wrapper">
<table class="flix-data-table">
<thead class="flix-data-table__header">
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="col" >
<!-- This small checkbox on the header allows the selection of all rows at once. -->
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input
class="flix-checkbox__input"
type="checkbox"
id="example-table-checkbox-all"
value="all"
/>
<label class="flix-checkbox__label" for="example-table-checkbox-all">
<span class="flix-sr-only">Select all rows</span>
</label>
</div>
</th>
<th class="flix-data-table__th" scope="col">Name</th>
<th class="flix-data-table__th" scope="col">Time</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">Price</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">Seats</th>
<th class="flix-data-table__th" scope="col">Options</th>
</tr>
</thead>
<tbody class="flix-data-table__body">
<!-- Unselected rows don't need to have aria-selected="false". But they can. -->
<tr class="flix-data-table__row">
<td class="flix-data-table__td">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input
class="flix-checkbox__input"
type="checkbox"
id="example-table-checkbox-0"
value="0"
/>
<!-- Ensure all checkboxes are properly labelled. If the labels can be visually hidden, you can use the sr-only helper. -->
<label class="flix-checkbox__label" for="example-table-checkbox-0">
<span class="flix-sr-only">Select row AB 123</span>
</label>
</div>
</td>
<!-- If the row has a cell that can be used as identification (e.g.: name, id, line number), you can use a `th` with scope="row". -->
<th class="flix-data-table__th" scope="row">AB 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input
class="flix-checkbox__input"
type="checkbox"
id="example-table-checkbox-1"
value="1"
/>
<label class="flix-checkbox__label" for="example-table-checkbox-1">
<span class="flix-sr-only">Select row BC 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">BC 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<!-- Selected rows need to have aria-selected="true" and the --selected modifier for visual highlight. -->
<tr class="flix-data-table__row flix-data-table__row--selected" aria-selected="true">
<td class="flix-data-table__td">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<!-- Ensure the checkboxes and the rows checked and selected states are in sync. -->
<input
class="flix-checkbox__input"
type="checkbox"
id="example-table-checkbox-2"
value="2"
checked
/>
<label class="flix-checkbox__label" for="example-table-checkbox-2">
<span class="flix-sr-only">Select row CD 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">CD 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input
class="flix-checkbox__input"
type="checkbox"
id="example-table-checkbox-3"
value="3"
/>
<label class="flix-checkbox__label" for="example-table-checkbox-3">
<span class="flix-sr-only">Select row DE 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">DE 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input
class="flix-checkbox__input"
type="checkbox"
id="example-table-checkbox-4"
value="4"
/>
<label class="flix-checkbox__label" for="example-table-checkbox-4">
<span class="flix-sr-only">Select row EF 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">EF 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row flix-data-table__row--selected" aria-selected="true">
<td class="flix-data-table__td">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input
class="flix-checkbox__input"
type="checkbox"
id="example-table-checkbox-5"
value="5"
checked
/>
<label class="flix-checkbox__label" for="example-table-checkbox-5">
<span class="flix-sr-only">Select row FG 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">FG 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input
class="flix-checkbox__input"
type="checkbox"
id="example-table-checkbox-6"
value="6"
/>
<label class="flix-checkbox__label" for="example-table-checkbox-6">
<span class="flix-sr-only">Select row GH 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">GH 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
</tbody>
</table>
</div>Sortable
Sorting the rows can be done via the column headers. You can add a button with arrow icons next to the headers you want to sort, and then attach your click handlers to this button.
- The buttons must be correctly labelled and identified as "Sort by ..." for screen reader users.
- Add the
flix-data-table__sorter-btnclass name to the sorting button to fix the label and icon alignment. - The button can be added before or after the label, depending on your use case.
You can also use the alignment helpers to align the content of the cells as you prefer.
The example bellow also shows the effect of the flix-data-table--small modifier applied to the table to make the cells smaller.
<div class="flix-data-table-wrapper">
<table class="flix-data-table flix-data-table--small">
<caption>Trips: Page 1 of 5</caption>
<thead class="flix-data-table__header">
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="col">
Name
<button aria-label="Sort rows by name" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-down"></flix-icon>
</button>
</th>
<th class="flix-data-table__th" scope="col">
Time
<button aria-label="Sort rows by time" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-up"></flix-icon>
</button>
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by price" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Price
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by seats" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Seats
</th>
<th class="flix-data-table__th" scope="col">
Options
</th>
</tr>
</thead>
<tbody class="flix-data-table__body">
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">AB 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">BC 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">CD 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">DE 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">EF 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">FG 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">GH 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
</tbody>
<tfoot class="flix-data-table__footer">
<tr class="flix-data-table__row">
<th class="flix-data-table__td" scope="row">Totals</th>
<td class="flix-data-table__td"></td>
<td class="flix-data-table__td flix-has-text-right">1399.93€</td>
<td class="flix-data-table__td flix-has-text-right">203</td>
<td class="flix-data-table__td"></td>
</tr>
</tfoot>
</table>
</div>Scrollable
To make a scrollable data table you can use the flix-data-table-wrapper--scrollable modifier on the wrapper element.
<div class="flix-data-table-controls">
<div class="flix-data-table-wrapper flix-data-table-wrapper--scrollable" style="height: 300px;">
<table class="flix-data-table">
<thead class="flix-data-table__header">
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="col">
Name
<button aria-label="Sort rows by name" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-down"></flix-icon>
</button>
</th>
<th class="flix-data-table__th" scope="col">
Time
<button aria-label="Sort rows by time" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-up"></flix-icon>
</button>
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by price" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Price
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by seats" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Seats
</th>
<th class="flix-data-table__th" scope="col">
Options
</th>
</tr>
</thead>
<tbody class="flix-data-table__body">
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">AB 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">BC 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">CD 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">DE 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">EF 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">FG 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">GH 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
</tbody>
<tfoot class="flix-data-table__footer">
<tr class="flix-data-table__row">
<th class="flix-data-table__td" scope="row">Totals</th>
<td class="flix-data-table__td">--:--</td>
<td class="flix-data-table__td flix-has-text-right">1399.93€</td>
<td class="flix-data-table__td flix-has-text-right">203</td>
<td class="flix-data-table__td"></td>
</tr>
</tfoot>
</table>
</div>
<nav class="flix-pager" aria-label="Data table pagination">
<ul class="flix-pager__list">
<li class="flix-pager__item">
<button class="flix-pager__link flix-pager__link--prev flix-pager__link--disabled" aria-disabled="true" disabled>
<span class="flix-sr-only">Previous page</span>
</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link" aria-current="page">1</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">2</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">3</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">4</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">5</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link flix-pager__link--next">
<span class="flix-sr-only">Next page</span>
</button>
</li>
</ul>
</nav>
</div>Collapsed
The flix-data-table-wrapper--collapsed modifier can be added to the wrapper to stop the data table from expanding all the way. This way the data table will only occupy as much space as it needs depending on its content.
This is useful for data tables with fewer columns where horizontal space is limited.
<div class="flix-data-table-wrapper flix-data-table-wrapper--collapsed">
<table class="flix-data-table">
<caption>Trips: Page 1 of 5</caption>
<thead class="flix-data-table__header">
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="col">
Name
<button aria-label="Sort rows by name" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-down"></flix-icon>
</button>
</th>
<th class="flix-data-table__th" scope="col">
Time
<button aria-label="Sort rows by time" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-up"></flix-icon>
</button>
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by price" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Price
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by seats" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Seats
</th>
<th class="flix-data-table__th" scope="col">
Options
</th>
</tr>
</thead>
<tbody class="flix-data-table__body">
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">AB 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">BC 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">CD 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">DE 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
</tbody>
<tfoot class="flix-data-table__footer">
<tr class="flix-data-table__row">
<th class="flix-data-table__td" scope="row">Totals</th>
<td class="flix-data-table__td"></td>
<td class="flix-data-table__td flix-has-text-right">799.96€</td>
<td class="flix-data-table__td flix-has-text-right">116</td>
<td class="flix-data-table__td"></td>
</tr>
</tfoot>
</table>
</div>Show columns and cell dividers
By adding the flix-data-table--show-cols modifier to the data table element, the table will add vertical dividers to all columns, like so:
| Name | Time | Price | Seats | Options |
|---|---|---|---|---|
| AB 123 | 07:05h | 22.99€ | 29 | Details |
| BC 123 | 07:05h | 22.99€ | 29 | Details |
| CD 123 | 07:05h | 22.99€ | 29 | Details |
| DE 123 | 07:05h | 22.99€ | 29 | Details |
| EF 123 | 07:05h | 22.99€ | 29 | Details |
| FG 123 | 07:05h | 22.99€ | 29 | Details |
| GH 123 | 07:05h | 22.99€ | 29 | Details |
| Totals | --:-- | 1399.93€ | 203 |
<div class="flix-data-table-controls">
<div class="flix-data-table-wrapper">
<table class="flix-data-table flix-data-table--show-cols">
<caption>Dividers added to all columns with single container class modifier.</caption>
<thead class="flix-data-table__header">
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="col">
Name
<button aria-label="Sort rows by name" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-down"></flix-icon>
</button>
</th>
<th class="flix-data-table__th" scope="col">
Time
<button aria-label="Sort rows by time" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-up"></flix-icon>
</button>
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by price" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Price
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by seats" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Seats
</th>
<th class="flix-data-table__th" scope="col">Options</th>
</tr>
</thead>
<tbody class="flix-data-table__body">
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">AB 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">BC 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">CD 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">DE 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">EF 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">FG 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="row">GH 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
</tbody>
<tfoot class="flix-data-table__footer">
<tr class="flix-data-table__row">
<th class="flix-data-table__td" scope="row">Totals</th>
<td class="flix-data-table__td">--:--</td>
<td class="flix-data-table__td flix-has-text-right">1399.93€</td>
<td class="flix-data-table__td flix-has-text-right">203</td>
<td class="flix-data-table__td"></td>
</tr>
</tfoot>
</table>
</div>
<nav class="flix-pager" aria-label="Data table pagination">
<ul class="flix-pager__list">
<li class="flix-pager__item">
<button class="flix-pager__link flix-pager__link--prev flix-pager__link--disabled" aria-disabled="true" disabled>
<span class="flix-sr-only">Previous page</span>
</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link" aria-current="page">1</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">2</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">3</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">4</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">5</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link flix-pager__link--next">
<span class="flix-sr-only">Next page</span>
</button>
</li>
</ul>
</nav>
</div>It is also possible to add dividers to specific cells by adding the --divider, --divider-left or --divider-right modifiers to the respective table cell elements. This will enable you to create custom columns or highlight specific columns by adding dividers only to them.
|
|
Name | Time | Price | Seats | Options |
|---|---|---|---|---|---|
|
|
AB 123 | 07:05h | 22.99€ | 29 | Details |
|
|
BC 123 | 07:05h | 22.99€ | 29 | Details |
|
|
CD 123 | 07:05h | 22.99€ | 29 | Details |
|
|
DE 123 | 07:05h | 22.99€ | 29 | Details |
|
|
EF 123 | 07:05h | 22.99€ | 29 | Details |
|
|
FG 123 | 07:05h | 22.99€ | 29 | Details |
|
|
GH 123 | 07:05h | 22.99€ | 29 | Details |
| Totals | --:-- | 1399.93€ | 203 |
<div class="flix-data-table-controls">
<div class="flix-data-table-wrapper">
<table class="flix-data-table">
<caption>Dividers added on individual cells with cell class modifiers.</caption>
<thead class="flix-data-table__header">
<tr class="flix-data-table__row">
<th class="flix-data-table__th flix-data-table__th--collapsed" scope="col">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-all" value="all" />
<label class="flix-checkbox__label" for="example-table-checkbox-all">
<span class="flix-sr-only">Select all rows</span>
</label>
</div>
</th>
<th class="flix-data-table__th flix-data-table__th--divider-right" scope="col">
Name
<button aria-label="Sort rows by name" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-down"></flix-icon>
</button>
</th>
<th class="flix-data-table__th" scope="col">
Time
<button aria-label="Sort rows by time" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-up"></flix-icon>
</button>
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by price" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Price
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by seats" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Seats
</th>
<th class="flix-data-table__th flix-data-table__th--divider" scope="col">Options</th>
</tr>
</thead>
<tbody class="flix-data-table__body">
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-0" value="0" />
<label class="flix-checkbox__label" for="example-table-checkbox-0">
<span class="flix-sr-only">Select row AB 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th flix-data-table__th--divider-right" scope="row">AB 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td flix-data-table__td--divider"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-1" value="1" />
<label class="flix-checkbox__label" for="example-table-checkbox-1">
<span class="flix-sr-only">Select row BC 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th flix-data-table__th--divider-right" scope="row">BC 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td flix-data-table__td--divider"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row flix-data-table__row--selected" aria-selected="true">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-2" value="2" checked />
<label class="flix-checkbox__label" for="example-table-checkbox-2">
<span class="flix-sr-only">Select row CD 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th flix-data-table__th--divider-right" scope="row">CD 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td flix-data-table__td--divider"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-3" value="3" />
<label class="flix-checkbox__label" for="example-table-checkbox-3">
<span class="flix-sr-only">Select row DE 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th flix-data-table__th--divider-right" scope="row">DE 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td flix-data-table__td--divider"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-4" value="4" />
<label class="flix-checkbox__label" for="example-table-checkbox-4">
<span class="flix-sr-only">Select row EF 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th flix-data-table__th--divider-right" scope="row">EF 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td flix-data-table__td--divider"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row flix-data-table__row--selected" aria-selected="true">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-5" value="5" checked />
<label class="flix-checkbox__label" for="example-table-checkbox-5">
<span class="flix-sr-only">Select row FG 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th flix-data-table__th--divider-right" scope="row">FG 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td flix-data-table__td--divider"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-6" value="6" />
<label class="flix-checkbox__label" for="example-table-checkbox-6">
<span class="flix-sr-only">Select row GH 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th flix-data-table__th--divider-right" scope="row">GH 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td flix-data-table__td--divider"><a class="flix-link" href="#">Details</a></td>
</tr>
</tbody>
<tfoot class="flix-data-table__footer">
<tr class="flix-data-table__row">
<td class="flix-data-table__td"></td>
<th class="flix-data-table__td flix-data-table__td--divider-right" scope="row">Totals</th>
<td class="flix-data-table__td">--:--</td>
<td class="flix-data-table__td flix-has-text-right">1399.93€</td>
<td class="flix-data-table__td flix-has-text-right">203</td>
<td class="flix-data-table__td flix-data-table__td--divider"></td>
</tr>
</tfoot>
</table>
</div>
<nav class="flix-pager" aria-label="Data table pagination">
<ul class="flix-pager__list">
<li class="flix-pager__item">
<button class="flix-pager__link flix-pager__link--prev flix-pager__link--disabled" aria-disabled="true" disabled>
<span class="flix-sr-only">Previous page</span>
</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link" aria-current="page">1</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">2</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">3</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">4</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">5</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link flix-pager__link--next">
<span class="flix-sr-only">Next page</span>
</button>
</li>
</ul>
</nav>
</div>Column groups
In addition to that you can also use the column elements in the colgroup to configure columns in the table. There are 2 modifiers available for this purpose:
flix-data-table__col--dividerflix-data-table__col--divider-leftflix-data-table__col--divider-right- Adds a divider for the respective column.
flix-data-table__col--collapsed- Makes the respective column "collapsed" so it is only as wide as the content in it.
The colgroup element should be added inside the table element, after the caption element if you have one, and before any thead, tbody or tfoot elements.
Check the colgroup documentation on MDN for more information on how to configure columns with this element.
Please note that the column group modifiers with colgroup elements can cause some visual bugs when used together with sticky headers or sticky columns, due to the way tables are rendered in the browser. If you want sticky headers and/or columns as well as column dividers, we encourage you to use the cell class modifiers instead for better results.
|
|
Name | Time | Price | Seats | Options |
|---|---|---|---|---|---|
|
|
AB 123 | 07:05h | 22.99€ | 29 | Details |
|
|
BC 123 | 07:05h | 22.99€ | 29 | Details |
|
|
CD 123 | 07:05h | 22.99€ | 29 | Details |
|
|
DE 123 | 07:05h | 22.99€ | 29 | Details |
|
|
EF 123 | 07:05h | 22.99€ | 29 | Details |
|
|
FG 123 | 07:05h | 22.99€ | 29 | Details |
|
|
GH 123 | 07:05h | 22.99€ | 29 | Details |
| Totals | --:-- | 1399.93€ | 203 |
<div class="flix-data-table-controls">
<div class="flix-data-table-wrapper">
<table class="flix-data-table">
<caption>Dividers added to specific columns in colgroup element.</caption>
<colgroup>
<col class="flix-data-table__col flix-data-table__col--collapsed" />
<col class="flix-data-table__col flix-data-table__col--divider-right" />
<col class="flix-data-table__col" />
<col class="flix-data-table__col" />
<col class="flix-data-table__col" />
<col class="flix-data-table__col flix-data-table__col--divider" />
</colgroup>
<thead class="flix-data-table__header">
<tr class="flix-data-table__row">
<th class="flix-data-table__th flix-data-table__th--collapsed" scope="col">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-all" value="all" />
<label class="flix-checkbox__label" for="example-table-checkbox-all">
<span class="flix-sr-only">Select all rows</span>
</label>
</div>
</th>
<th class="flix-data-table__th" scope="col">
Name
<button aria-label="Sort rows by name" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-down"></flix-icon>
</button>
</th>
<th class="flix-data-table__th" scope="col">
Time
<button aria-label="Sort rows by time" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-up"></flix-icon>
</button>
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by price" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Price
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by seats" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Seats
</th>
<th class="flix-data-table__th" scope="col">
Options
</th>
</tr>
</thead>
<tbody class="flix-data-table__body">
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-0" value="0" />
<label class="flix-checkbox__label" for="example-table-checkbox-0">
<span class="flix-sr-only">Select row AB 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">AB 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-1" value="1" />
<label class="flix-checkbox__label" for="example-table-checkbox-1">
<span class="flix-sr-only">Select row BC 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">BC 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row flix-data-table__row--selected" aria-selected="true">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-2" value="2" checked />
<label class="flix-checkbox__label" for="example-table-checkbox-2">
<span class="flix-sr-only">Select row CD 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">CD 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-3" value="3" />
<label class="flix-checkbox__label" for="example-table-checkbox-3">
<span class="flix-sr-only">Select row DE 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">DE 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-4" value="4" />
<label class="flix-checkbox__label" for="example-table-checkbox-4">
<span class="flix-sr-only">Select row EF 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">EF 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row flix-data-table__row--selected" aria-selected="true">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-5" value="5" checked />
<label class="flix-checkbox__label" for="example-table-checkbox-5">
<span class="flix-sr-only">Select row FG 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">FG 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-6" value="6" />
<label class="flix-checkbox__label" for="example-table-checkbox-6">
<span class="flix-sr-only">Select row GH 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">GH 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
</tbody>
<tfoot class="flix-data-table__footer">
<tr class="flix-data-table__row">
<td class="flix-data-table__td"></td>
<th class="flix-data-table__td" scope="row">Totals</th>
<td class="flix-data-table__td">--:--</td>
<td class="flix-data-table__td flix-has-text-right">1399.93€</td>
<td class="flix-data-table__td flix-has-text-right">203</td>
<td class="flix-data-table__td"></td>
</tr>
</tfoot>
</table>
</div>
<nav class="flix-pager" aria-label="Data table pagination">
<ul class="flix-pager__list">
<li class="flix-pager__item">
<button class="flix-pager__link flix-pager__link--prev flix-pager__link--disabled" aria-disabled="true"
disabled>
<span class="flix-sr-only">Previous page</span>
</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link" aria-current="page">1</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">2</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">3</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">4</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">5</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link flix-pager__link--next">
<span class="flix-sr-only">Next page</span>
</button>
</li>
</ul>
</nav>
</div>Header with multiple rows
You can create complex table headers by making use of the colspan and rowspan attributes.
Check the Column and row spanning example on MDN for more information on how to use these attributes and what do they mean.
|
|
Name | Availability | Options | ||
|---|---|---|---|---|---|
| Time | Price | Seats | |||
|
|
AB 123 | 07:05h | 22.99€ | 29 | Details |
|
|
BC 123 | 07:05h | 22.99€ | 29 | Details |
|
|
CD 123 | 07:05h | 22.99€ | 29 | Details |
|
|
DE 123 | 07:05h | 22.99€ | 29 | Details |
|
|
EF 123 | 07:05h | 22.99€ | 29 | Details |
|
|
FG 123 | 07:05h | 22.99€ | 29 | Details |
|
|
GH 123 | 07:05h | 22.99€ | 29 | Details |
| Totals | --:-- | 1399.93€ | 203 | ||
<div class="flix-data-table-controls">
<div class="flix-data-table-wrapper">
<table class="flix-data-table">
<caption>Trips: Page 1 of 5</caption>
<thead class="flix-data-table__header">
<tr class="flix-data-table__row">
<th class="flix-data-table__th flix-data-table__th--collapsed" scope="col" rowspan="2">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-all" value="all" />
<label class="flix-checkbox__label" for="example-table-checkbox-all">
<span class="flix-sr-only">Select all rows</span>
</label>
</div>
</th>
<th class="flix-data-table__th" scope="col" rowspan="2">
Name
<button aria-label="Sort rows by name" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-down"></flix-icon>
</button>
</th>
<th class="flix-data-table__th" scope="colgroup" colspan="3">
Availability
</th>
<th class="flix-data-table__th" scope="col" rowspan="2">
Options
</th>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="col">
Time
<button aria-label="Sort rows by time" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-up"></flix-icon>
</button>
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by price" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Price
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by seats" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Seats
</th>
</tr>
</thead>
<tbody class="flix-data-table__body">
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-0" value="0" />
<label class="flix-checkbox__label" for="example-table-checkbox-0">
<span class="flix-sr-only">Select row AB 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">AB 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-1" value="1" />
<label class="flix-checkbox__label" for="example-table-checkbox-1">
<span class="flix-sr-only">Select row BC 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">BC 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row flix-data-table__row--selected" aria-selected="true">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-2" value="2" checked />
<label class="flix-checkbox__label" for="example-table-checkbox-2">
<span class="flix-sr-only">Select row CD 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">CD 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-3" value="3" />
<label class="flix-checkbox__label" for="example-table-checkbox-3">
<span class="flix-sr-only">Select row DE 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">DE 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-4" value="4" />
<label class="flix-checkbox__label" for="example-table-checkbox-4">
<span class="flix-sr-only">Select row EF 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">EF 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row flix-data-table__row--selected" aria-selected="true">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-5" value="5" checked />
<label class="flix-checkbox__label" for="example-table-checkbox-5">
<span class="flix-sr-only">Select row FG 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">FG 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-6" value="6" />
<label class="flix-checkbox__label" for="example-table-checkbox-6">
<span class="flix-sr-only">Select row GH 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">GH 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
</tbody>
<tfoot class="flix-data-table__footer">
<tr class="flix-data-table__row">
<td class="flix-data-table__td"></td>
<th class="flix-data-table__td" scope="row">Totals</th>
<td class="flix-data-table__td">--:--</td>
<td class="flix-data-table__td flix-has-text-right">1399.93€</td>
<td class="flix-data-table__td flix-has-text-right">203</td>
<td class="flix-data-table__td"></td>
</tr>
</tfoot>
</table>
</div>
<nav class="flix-pager" aria-label="Data table pagination">
<ul class="flix-pager__list">
<li class="flix-pager__item">
<button class="flix-pager__link flix-pager__link--prev flix-pager__link--disabled" aria-disabled="true"
disabled>
<span class="flix-sr-only">Previous page</span>
</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link" aria-current="page">1</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">2</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">3</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">4</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">5</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link flix-pager__link--next">
<span class="flix-sr-only">Next page</span>
</button>
</li>
</ul>
</nav>
</div>Sticky header
To make the table header sticky while scrolling, add the flix-data-table--sticky-header modifier to the data table element in addition to the flix-data-table-wrapper--scrollable modifier to the wrapper element.
|
|
Name | Availability | Options | ||
|---|---|---|---|---|---|
| Time | Price | Seats | |||
|
|
AB 123 | 07:05h | 22.99€ | 29 | Details |
|
|
BC 123 | 07:05h | 22.99€ | 29 | Details |
|
|
CD 123 | 07:05h | 22.99€ | 29 | Details |
|
|
DE 123 | 07:05h | 22.99€ | 29 | Details |
|
|
EF 123 | 07:05h | 22.99€ | 29 | Details |
|
|
FG 123 | 07:05h | 22.99€ | 29 | Details |
|
|
GH 123 | 07:05h | 22.99€ | 29 | Details |
| Totals | --:-- | 1399.93€ | 203 | ||
<div class="flix-data-table-controls">
<div class="flix-data-table-wrapper flix-data-table-wrapper--scrollable" style="height: 300px;">
<table class="flix-data-table flix-data-table--sticky-header">
<caption>Trips: Page 1 of 5</caption>
<thead class="flix-data-table__header">
<tr class="flix-data-table__row">
<th class="flix-data-table__th flix-data-table__th--collapsed" scope="col" rowspan="2">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-all" value="all" />
<label class="flix-checkbox__label" for="example-table-checkbox-all">
<span class="flix-sr-only">Select all rows</span>
</label>
</div>
</th>
<th class="flix-data-table__th" scope="col" rowspan="2">
Name
<button aria-label="Sort rows by name" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-down"></flix-icon>
</button>
</th>
<th class="flix-data-table__th" scope="colgroup" colspan="3">
Availability
</th>
<th class="flix-data-table__th" scope="col" rowspan="2">
Options
</th>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="col">
Time
<button aria-label="Sort rows by time" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-up"></flix-icon>
</button>
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by price" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Price
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by seats" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Seats
</th>
</tr>
</thead>
<tbody class="flix-data-table__body">
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-0" value="0" />
<label class="flix-checkbox__label" for="example-table-checkbox-0">
<span class="flix-sr-only">Select row AB 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">AB 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-1" value="1" />
<label class="flix-checkbox__label" for="example-table-checkbox-1">
<span class="flix-sr-only">Select row BC 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">BC 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row flix-data-table__row--selected" aria-selected="true">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-2" value="2" checked />
<label class="flix-checkbox__label" for="example-table-checkbox-2">
<span class="flix-sr-only">Select row CD 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">CD 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-3" value="3" />
<label class="flix-checkbox__label" for="example-table-checkbox-3">
<span class="flix-sr-only">Select row DE 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">DE 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-4" value="4" />
<label class="flix-checkbox__label" for="example-table-checkbox-4">
<span class="flix-sr-only">Select row EF 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">EF 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row flix-data-table__row--selected" aria-selected="true">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-5" value="5" checked />
<label class="flix-checkbox__label" for="example-table-checkbox-5">
<span class="flix-sr-only">Select row FG 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">FG 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-6" value="6" />
<label class="flix-checkbox__label" for="example-table-checkbox-6">
<span class="flix-sr-only">Select row GH 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th" scope="row">GH 123</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
</tbody>
<tfoot class="flix-data-table__footer">
<tr class="flix-data-table__row">
<td class="flix-data-table__td"></td>
<th class="flix-data-table__td" scope="row">Totals</th>
<td class="flix-data-table__td">--:--</td>
<td class="flix-data-table__td flix-has-text-right">1399.93€</td>
<td class="flix-data-table__td flix-has-text-right">203</td>
<td class="flix-data-table__td"></td>
</tr>
</tfoot>
</table>
</div>
<nav class="flix-pager" aria-label="Data table pagination">
<ul class="flix-pager__list">
<li class="flix-pager__item">
<button class="flix-pager__link flix-pager__link--prev flix-pager__link--disabled" aria-disabled="true" disabled>
<span class="flix-sr-only">Previous page</span>
</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link" aria-current="page">1</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">2</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">3</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">4</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">5</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link flix-pager__link--next">
<span class="flix-sr-only">Next page</span>
</button>
</li>
</ul>
</nav>
</div>Sticky columns
To create sticky columns whole scrolling, add the --sticky modifier to a table cell (flix-data-table__th or flix-data-table__td), in addition to the flix-data-table-wrapper--scrollable modifier to the wrapper element.
Make sure to add the modifier to all cells in the same column, otherwise the effect will seem broken.
You can have sticky header and sticky column at the same time by combining both techniques.
| Name | COL_1 | COL_2 | COL_3 | COL_4 | COL_5 | COL_6 | COL_7 | COL_8 | COL_9 | COL_10 | Time | Price | Seats | Options |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| AB 123 | VALUE_1 | VALUE_2 | VALUE_3 | VALUE_4 | VALUE_5 | VALUE_6 | VALUE_7 | VALUE_8 | VALUE_9 | VALUE_10 | 07:05h | 22.99€ | 29 | Details |
| BC 123 | VALUE_1 | VALUE_2 | VALUE_3 | VALUE_4 | VALUE_5 | VALUE_6 | VALUE_7 | VALUE_8 | VALUE_9 | VALUE_10 | 07:05h | 22.99€ | 29 | Details |
| CD 123 | VALUE_1 | VALUE_2 | VALUE_3 | VALUE_4 | VALUE_5 | VALUE_6 | VALUE_7 | VALUE_8 | VALUE_9 | VALUE_10 | 07:05h | 22.99€ | 29 | Details |
| DE 123 | VALUE_1 | VALUE_2 | VALUE_3 | VALUE_4 | VALUE_5 | VALUE_6 | VALUE_7 | VALUE_8 | VALUE_9 | VALUE_10 | 07:05h | 22.99€ | 29 | Details |
| EF 123 | VALUE_1 | VALUE_2 | VALUE_3 | VALUE_4 | VALUE_5 | VALUE_6 | VALUE_7 | VALUE_8 | VALUE_9 | VALUE_10 | 07:05h | 22.99€ | 29 | Details |
| FG 123 | VALUE_1 | VALUE_2 | VALUE_3 | VALUE_4 | VALUE_5 | VALUE_6 | VALUE_7 | VALUE_8 | VALUE_9 | VALUE_10 | 07:05h | 22.99€ | 29 | Details |
| GH 123 | VALUE_1 | VALUE_2 | VALUE_3 | VALUE_4 | VALUE_5 | VALUE_6 | VALUE_7 | VALUE_8 | VALUE_9 | VALUE_10 | 07:05h | 22.99€ | 29 | Details |
| Totals | --:-- | 1399.93€ | 203 |
<div class="flix-data-table-controls">
<div class="flix-data-table-wrapper flix-data-table-wrapper--scrollable" style="height: 300px; min-width: auto;">
<table class="flix-data-table flix-data-table--sticky-header">
<caption>Trips: Page 1 of 5</caption>
<thead class="flix-data-table__header">
<tr class="flix-data-table__row">
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--divider-right" scope="col">
Name
<button aria-label="Sort rows by name" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-down"></flix-icon>
</button>
</th>
<th class="flix-data-table__th" scope="col">COL_1</th>
<th class="flix-data-table__th" scope="col">COL_2</th>
<th class="flix-data-table__th" scope="col">COL_3</th>
<th class="flix-data-table__th" scope="col">COL_4</th>
<th class="flix-data-table__th" scope="col">COL_5</th>
<th class="flix-data-table__th" scope="col">COL_6</th>
<th class="flix-data-table__th" scope="col">COL_7</th>
<th class="flix-data-table__th" scope="col">COL_8</th>
<th class="flix-data-table__th" scope="col">COL_9</th>
<th class="flix-data-table__th" scope="col">COL_10</th>
<th class="flix-data-table__th" scope="col">
Time
<button aria-label="Sort rows by time" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-up"></flix-icon>
</button>
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by price" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Price
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by seats" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Seats
</th>
<th class="flix-data-table__th flix-data-table__th--divider" scope="col">
Options
</th>
</tr>
</thead>
<tbody class="flix-data-table__body">
<tr class="flix-data-table__row">
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--divider-right" scope="row">AB 123</th>
<td class="flix-data-table__td">VALUE_1</th>
<td class="flix-data-table__td">VALUE_2</th>
<td class="flix-data-table__td">VALUE_3</th>
<td class="flix-data-table__td">VALUE_4</th>
<td class="flix-data-table__td">VALUE_5</th>
<td class="flix-data-table__td">VALUE_6</th>
<td class="flix-data-table__td">VALUE_7</th>
<td class="flix-data-table__td">VALUE_8</th>
<td class="flix-data-table__td">VALUE_9</th>
<td class="flix-data-table__td">VALUE_10</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td flix-data-table__td--divider"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--divider-right" scope="row">BC 123</th>
<td class="flix-data-table__td">VALUE_1</th>
<td class="flix-data-table__td">VALUE_2</th>
<td class="flix-data-table__td">VALUE_3</th>
<td class="flix-data-table__td">VALUE_4</th>
<td class="flix-data-table__td">VALUE_5</th>
<td class="flix-data-table__td">VALUE_6</th>
<td class="flix-data-table__td">VALUE_7</th>
<td class="flix-data-table__td">VALUE_8</th>
<td class="flix-data-table__td">VALUE_9</th>
<td class="flix-data-table__td">VALUE_10</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td flix-data-table__td--divider"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--divider-right" scope="row">CD 123</th>
<td class="flix-data-table__td">VALUE_1</th>
<td class="flix-data-table__td">VALUE_2</th>
<td class="flix-data-table__td">VALUE_3</th>
<td class="flix-data-table__td">VALUE_4</th>
<td class="flix-data-table__td">VALUE_5</th>
<td class="flix-data-table__td">VALUE_6</th>
<td class="flix-data-table__td">VALUE_7</th>
<td class="flix-data-table__td">VALUE_8</th>
<td class="flix-data-table__td">VALUE_9</th>
<td class="flix-data-table__td">VALUE_10</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td flix-data-table__td--divider"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--divider-right" scope="row">DE 123</th>
<td class="flix-data-table__td">VALUE_1</th>
<td class="flix-data-table__td">VALUE_2</th>
<td class="flix-data-table__td">VALUE_3</th>
<td class="flix-data-table__td">VALUE_4</th>
<td class="flix-data-table__td">VALUE_5</th>
<td class="flix-data-table__td">VALUE_6</th>
<td class="flix-data-table__td">VALUE_7</th>
<td class="flix-data-table__td">VALUE_8</th>
<td class="flix-data-table__td">VALUE_9</th>
<td class="flix-data-table__td">VALUE_10</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td flix-data-table__td--divider"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--divider-right" scope="row">EF 123</th>
<td class="flix-data-table__td">VALUE_1</th>
<td class="flix-data-table__td">VALUE_2</th>
<td class="flix-data-table__td">VALUE_3</th>
<td class="flix-data-table__td">VALUE_4</th>
<td class="flix-data-table__td">VALUE_5</th>
<td class="flix-data-table__td">VALUE_6</th>
<td class="flix-data-table__td">VALUE_7</th>
<td class="flix-data-table__td">VALUE_8</th>
<td class="flix-data-table__td">VALUE_9</th>
<td class="flix-data-table__td">VALUE_10</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td flix-data-table__td--divider"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--divider-right" scope="row">FG 123</th>
<td class="flix-data-table__td">VALUE_1</th>
<td class="flix-data-table__td">VALUE_2</th>
<td class="flix-data-table__td">VALUE_3</th>
<td class="flix-data-table__td">VALUE_4</th>
<td class="flix-data-table__td">VALUE_5</th>
<td class="flix-data-table__td">VALUE_6</th>
<td class="flix-data-table__td">VALUE_7</th>
<td class="flix-data-table__td">VALUE_8</th>
<td class="flix-data-table__td">VALUE_9</th>
<td class="flix-data-table__td">VALUE_10</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td flix-data-table__td--divider"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--divider-right" scope="row">GH 123</th>
<td class="flix-data-table__td">VALUE_1</th>
<td class="flix-data-table__td">VALUE_2</th>
<td class="flix-data-table__td">VALUE_3</th>
<td class="flix-data-table__td">VALUE_4</th>
<td class="flix-data-table__td">VALUE_5</th>
<td class="flix-data-table__td">VALUE_6</th>
<td class="flix-data-table__td">VALUE_7</th>
<td class="flix-data-table__td">VALUE_8</th>
<td class="flix-data-table__td">VALUE_9</th>
<td class="flix-data-table__td">VALUE_10</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td flix-data-table__td--divider"><a class="flix-link" href="#">Details</a></td>
</tr>
</tbody>
<tfoot class="flix-data-table__footer">
<tr class="flix-data-table__row">
<th class="flix-data-table__td flix-data-table__td--sticky flix-data-table__td--divider-right" scope="row">Totals</th>
<td class="flix-data-table__td"></td>
<td class="flix-data-table__td"></td>
<td class="flix-data-table__td"></td>
<td class="flix-data-table__td"></td>
<td class="flix-data-table__td"></td>
<td class="flix-data-table__td"></td>
<td class="flix-data-table__td"></td>
<td class="flix-data-table__td"></td>
<td class="flix-data-table__td"></td>
<td class="flix-data-table__td"></td>
<td class="flix-data-table__td">--:--</td>
<td class="flix-data-table__td flix-has-text-right">1399.93€</td>
<td class="flix-data-table__td flix-has-text-right">203</td>
<td class="flix-data-table__td flix-data-table__td--divider"></td>
</tr>
</tfoot>
</table>
</div>
<nav class="flix-pager" aria-label="Data table pagination">
<ul class="flix-pager__list">
<li class="flix-pager__item">
<button class="flix-pager__link flix-pager__link--prev flix-pager__link--disabled" aria-disabled="true" disabled>
<span class="flix-sr-only">Previous page</span>
</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link" aria-current="page">1</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">2</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">3</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">4</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">5</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link flix-pager__link--next">
<span class="flix-sr-only">Next page</span>
</button>
</li>
</ul>
</nav>
</div>Multiple sticky columns
In a special use case you may want to have multiple sticky columns next to each other. To achieve this, just add the --sticky modifier to all cells in the respective columns you want to make sticky.
All cells with --sticky modifier will have a divider on their right side by default. If you want to hide the divider for some of the sticky columns, you can add the --hide-sticky-divider modifier to the respective cells.
You will be required to add custom width and left inline styles to each sticky cell to ensure they are positioned correctly, relative to each other. These numbers will depend on your specific table layout and content.
| Name | COL_1 | COL_2 | COL_3 | COL_4 | COL_5 | COL_6 | COL_7 | COL_8 | Availability | Options | ||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Time | Price | Seats | ||||||||||
| AB 123 | VALUE_1 | VALUE_2 | VALUE_3 | VALUE_4 | VALUE_5 | VALUE_6 | VALUE_7 | VALUE_8 | 07:05h | 22.99€ | 29 | Details |
| BC 123 | VALUE_1 | VALUE_2 | VALUE_3 | VALUE_4 | VALUE_5 | VALUE_6 | VALUE_7 | VALUE_8 | 07:05h | 22.99€ | 29 | Details |
| CD 123 | VALUE_1 | VALUE_2 | VALUE_3 | VALUE_4 | VALUE_5 | VALUE_6 | VALUE_7 | VALUE_8 | 07:05h | 22.99€ | 29 | Details |
| DE 123 | VALUE_1 | VALUE_2 | VALUE_3 | VALUE_4 | VALUE_5 | VALUE_6 | VALUE_7 | VALUE_8 | 07:05h | 22.99€ | 29 | Details |
| EF 123 | VALUE_1 | VALUE_2 | VALUE_3 | VALUE_4 | VALUE_5 | VALUE_6 | VALUE_7 | VALUE_8 | 07:05h | 22.99€ | 29 | Details |
| FG 123 | VALUE_1 | VALUE_2 | VALUE_3 | VALUE_4 | VALUE_5 | VALUE_6 | VALUE_7 | VALUE_8 | 07:05h | 22.99€ | 29 | Details |
| GH 123 | VALUE_1 | VALUE_2 | VALUE_3 | VALUE_4 | VALUE_5 | VALUE_6 | VALUE_7 | VALUE_8 | 07:05h | 22.99€ | 29 | Details |
| Totals | --:-- | 1399.93€ | 203 | |||||||||
<div class="flix-data-table-controls">
<div class="flix-data-table-wrapper flix-data-table-wrapper--scrollable" style="height: 300px; min-width: auto;">
<table class="flix-data-table flix-data-table--sticky-header">
<caption>Trips: Page 1 of 5</caption>
<thead class="flix-data-table__header">
<tr class="flix-data-table__row">
<th class="flix-data-table__th flix-data-table__th--collapsed flix-data-table__th--sticky flix-data-table__th--hide-sticky-divider" scope="col" rowspan="2">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-all" value="all">
<label class="flix-checkbox__label" for="example-table-checkbox-all">
<span class="flix-sr-only">Select all rows</span>
</label>
</div>
</th>
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--hide-sticky-divider" scope="col" rowspan="2" style="width: 115px; left: 42px;">
ID
<button aria-label="Sort rows by name" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-down"></flix-icon>
</button>
</th>
<th class="flix-data-table__th flix-data-table__th--sticky" scope="col" rowspan="2" style="left: 155px;">
Name
<button aria-label="Sort rows by name" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-down"></flix-icon>
</button>
</th>
<th class="flix-data-table__th" scope="col" rowspan="2">COL_1</th>
<th class="flix-data-table__th" scope="col" rowspan="2">COL_2</th>
<th class="flix-data-table__th" scope="col" rowspan="2">COL_3</th>
<th class="flix-data-table__th" scope="col" rowspan="2">COL_4</th>
<th class="flix-data-table__th" scope="col" rowspan="2">COL_5</th>
<th class="flix-data-table__th" scope="col" rowspan="2">COL_6</th>
<th class="flix-data-table__th" scope="col" rowspan="2">COL_7</th>
<th class="flix-data-table__th" scope="col" rowspan="2">COL_8</th>
<th class="flix-data-table__th" scope="colgroup" colspan="3">
Availability
</th>
<th class="flix-data-table__th" scope="col" rowspan="2">
Options
</th>
</tr>
<tr class="flix-data-table__row">
<th class="flix-data-table__th" scope="col">
Time
<button aria-label="Sort rows by time" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-big-up"></flix-icon>
</button>
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by price" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Price
</th>
<th class="flix-data-table__th flix-has-text-right" scope="col">
<button aria-label="Sort rows by seats" type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--sm flix-data-table__sorter-btn">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="expand"></flix-icon>
</button>
Seats
</th>
</tr>
</thead>
<tbody class="flix-data-table__body">
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed flix-data-table__td--sticky flix-data-table__td--hide-sticky-divider">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-0" value="0">
<label class="flix-checkbox__label" for="example-table-checkbox-0">
<span class="flix-sr-only">Select row AB 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--hide-sticky-divider" scope="row" style="width: 115px; left: 42px;">#########</th>
<th class="flix-data-table__th flix-data-table__th--sticky" scope="row" style="left: 155px;">AB 123</th>
<td class="flix-data-table__td">VALUE_1</th>
<td class="flix-data-table__td">VALUE_2</th>
<td class="flix-data-table__td">VALUE_3</th>
<td class="flix-data-table__td">VALUE_4</th>
<td class="flix-data-table__td">VALUE_5</th>
<td class="flix-data-table__td">VALUE_6</th>
<td class="flix-data-table__td">VALUE_7</th>
<td class="flix-data-table__td">VALUE_8</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed flix-data-table__td--sticky flix-data-table__td--hide-sticky-divider">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-1" value="1">
<label class="flix-checkbox__label" for="example-table-checkbox-1">
<span class="flix-sr-only">Select row AB 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--hide-sticky-divider" scope="row" style="width: 115px; left: 42px;">#########</th>
<th class="flix-data-table__th flix-data-table__th--sticky" scope="row" style="left: 155px;">BC 123</th>
<td class="flix-data-table__td">VALUE_1</th>
<td class="flix-data-table__td">VALUE_2</th>
<td class="flix-data-table__td">VALUE_3</th>
<td class="flix-data-table__td">VALUE_4</th>
<td class="flix-data-table__td">VALUE_5</th>
<td class="flix-data-table__td">VALUE_6</th>
<td class="flix-data-table__td">VALUE_7</th>
<td class="flix-data-table__td">VALUE_8</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed flix-data-table__td--sticky flix-data-table__td--hide-sticky-divider">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-2" value="2">
<label class="flix-checkbox__label" for="example-table-checkbox-2">
<span class="flix-sr-only">Select row AB 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--hide-sticky-divider" scope="row" style="width: 115px; left: 42px;">#########</th>
<th class="flix-data-table__th flix-data-table__th--sticky" scope="row" style="left: 155px;">CD 123</th>
<td class="flix-data-table__td">VALUE_1</th>
<td class="flix-data-table__td">VALUE_2</th>
<td class="flix-data-table__td">VALUE_3</th>
<td class="flix-data-table__td">VALUE_4</th>
<td class="flix-data-table__td">VALUE_5</th>
<td class="flix-data-table__td">VALUE_6</th>
<td class="flix-data-table__td">VALUE_7</th>
<td class="flix-data-table__td">VALUE_8</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed flix-data-table__td--sticky flix-data-table__td--hide-sticky-divider">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-3" value="3">
<label class="flix-checkbox__label" for="example-table-checkbox-3">
<span class="flix-sr-only">Select row AB 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--hide-sticky-divider" scope="row" style="width: 115px; left: 42px;">#########</th>
<th class="flix-data-table__th flix-data-table__th--sticky" scope="row" style="left: 155px;">DE 123</th>
<td class="flix-data-table__td">VALUE_1</th>
<td class="flix-data-table__td">VALUE_2</th>
<td class="flix-data-table__td">VALUE_3</th>
<td class="flix-data-table__td">VALUE_4</th>
<td class="flix-data-table__td">VALUE_5</th>
<td class="flix-data-table__td">VALUE_6</th>
<td class="flix-data-table__td">VALUE_7</th>
<td class="flix-data-table__td">VALUE_8</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed flix-data-table__td--sticky flix-data-table__td--hide-sticky-divider">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-4" value="4">
<label class="flix-checkbox__label" for="example-table-checkbox-4">
<span class="flix-sr-only">Select row AB 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--hide-sticky-divider" scope="row" style="width: 115px; left: 42px;">#########</th>
<th class="flix-data-table__th flix-data-table__th--sticky" scope="row" style="left: 155px;">EF 123</th>
<td class="flix-data-table__td">VALUE_1</th>
<td class="flix-data-table__td">VALUE_2</th>
<td class="flix-data-table__td">VALUE_3</th>
<td class="flix-data-table__td">VALUE_4</th>
<td class="flix-data-table__td">VALUE_5</th>
<td class="flix-data-table__td">VALUE_6</th>
<td class="flix-data-table__td">VALUE_7</th>
<td class="flix-data-table__td">VALUE_8</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed flix-data-table__td--sticky flix-data-table__td--hide-sticky-divider">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-5" value="5">
<label class="flix-checkbox__label" for="example-table-checkbox-5">
<span class="flix-sr-only">Select row AB 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--hide-sticky-divider" scope="row" style="width: 115px; left: 42px;">#########</th>
<th class="flix-data-table__th flix-data-table__th--sticky" scope="row" style="left: 155px;">FG 123</th>
<td class="flix-data-table__td">VALUE_1</th>
<td class="flix-data-table__td">VALUE_2</th>
<td class="flix-data-table__td">VALUE_3</th>
<td class="flix-data-table__td">VALUE_4</th>
<td class="flix-data-table__td">VALUE_5</th>
<td class="flix-data-table__td">VALUE_6</th>
<td class="flix-data-table__td">VALUE_7</th>
<td class="flix-data-table__td">VALUE_8</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed flix-data-table__td--sticky flix-data-table__td--hide-sticky-divider">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-6" value="6">
<label class="flix-checkbox__label" for="example-table-checkbox-6">
<span class="flix-sr-only">Select row AB 123</span>
</label>
</div>
</td>
<th class="flix-data-table__th flix-data-table__th--sticky flix-data-table__th--hide-sticky-divider" scope="row" style="width: 115px; left: 42px;">#########</th>
<th class="flix-data-table__th flix-data-table__th--sticky" scope="row" style="left: 155px;">GH 123</th>
<td class="flix-data-table__td">VALUE_1</th>
<td class="flix-data-table__td">VALUE_2</th>
<td class="flix-data-table__td">VALUE_3</th>
<td class="flix-data-table__td">VALUE_4</th>
<td class="flix-data-table__td">VALUE_5</th>
<td class="flix-data-table__td">VALUE_6</th>
<td class="flix-data-table__td">VALUE_7</th>
<td class="flix-data-table__td">VALUE_8</th>
<td class="flix-data-table__td">07:05h</td>
<td class="flix-data-table__td flix-has-text-right">22.99€</td>
<td class="flix-data-table__td flix-has-text-right">29</td>
<td class="flix-data-table__td"><a class="flix-link" href="#">Details</a></td>
</tr>
</tbody>
<tfoot class="flix-data-table__footer">
<tr class="flix-data-table__row">
<td class="flix-data-table__td flix-data-table__td--collapsed flix-data-table__td--sticky flix-data-table__td--hide-sticky-divider">
<div class="flix-checkbox flix-checkbox--sm flix-checkbox--no-label">
<input class="flix-checkbox__input" type="checkbox" id="example-table-checkbox-7" value="7">
<label class="flix-checkbox__label" for="example-table-checkbox-7">
<span class="flix-sr-only">Select row AB 123</span>
</label>
</div>
</td>
<th class="flix-data-table__td flix-data-table__td--sticky" scope="row" style="left: 42px;" colspan="2">Totals</th>
<td class="flix-data-table__td" colspan="5"></td>
<td class="flix-data-table__td">--:--</td>
<td class="flix-data-table__td flix-has-text-right">1399.93€</td>
<td class="flix-data-table__td flix-has-text-right">203</td>
<td class="flix-data-table__td"></td>
</tr>
</tfoot>
</table>
</div>
</div>