Basic table

Add the class .ox-table to any table to apply the basic styling. The wrapper .ox-table-wrapper will make sure a horizontal scrollbar is added once the screen isn't wide enough anymore to show all the data.

If there are too much rows to show all at once, you can add pagination.

Example
# Title Title Title Title Title
Title Data Data Data Data Data
Title Data Data Data Data Data
Title Data Data Data Data Data
Title Data Data Data Data Data
20 - 40 of 180 orders 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<div class="ox-table-wrapper">
	<table class="ox-table">
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col">Title</th>
				<th scope="col">Title</th>
				<th scope="col">Title</th>
				<th scope="col">Title</th>
				<th scope="col">Title</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">Title</th>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			...
		</tbody>
	</table>
</div>

<div class="ox-pagination-wrapper">
	<div class="ox-results-stats">
		<strong>20 - 40</strong> of 180 orders
	</div>
	<nav role="navigation" aria-label="Pagination">
		<ul class="ox-pagination">
			<li><a href="#" aria-label="Go to the previous page" class="ox-pagination__item ox-pagination__item--previous"></a></li>
			<li><a href="#" aria-label="Go to page 1" class="ox-pagination__item">1</a></li>
			<li><span aria-label="Current page, page 2" class="ox-pagination__item" aria-current="true">2</span></li>
			<li><a href="#" aria-label="Go to page 3" class="ox-pagination__item">3</a></li>
			<li><span>&hellip;</span></li>
			<li><a href="#" aria-label="Go to page 9" class="ox-pagination__item">9</a></li>
			<li><a href="#" aria-label="Go to the next page" class="ox-pagination__item ox-pagination__item--next"></a></li>
		</ul>
	</nav>
</div>

Condensed table

Add the modifier .ox-table--condensed to obtain a more compact table.

Example
# Title Title Title Title Title
Title Data Data Data Data Data
Title Data Data Data Data Data
Title Data Data Data Data Data 
1
2
3
4
5

<div class="ox-table-wrapper">
	<table class="ox-table ox-table--condensed">
		...
	</table>
</div>

Responsive table

Add the modifier .ox-table--responsive when you want to present your data in a responsive way. By default, the cells that would normally be layed out horizontally, will now be shown vertically.

You can use the modifier .ox-table__row--two-column or .ox-table__row--three-column when you need multiple columns within your table row. This can then be used with .ox-table__cell--fixed-start or .ox-table__cell--fixed-end to organise your cells. See the example for reference.

Example
ID Model Opco Owner Status
06454A
AG1N1E720727
GENIE GS-2646
Scissor Lift 		CZ01 mateco sarl (LU01) Unknown
II76000
sn6789
GENIE Z30-20N
Boom Telescopic 		HU01 mateco sarl (LU01) Unknown 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<div class="ox-table-wrapper">
	<table class="ox-table ox-table--responsive">
		<thead>
			<tr>
				<th scope="col" width="68"></th>
				<th scope="col">ID</th>
				<th scope="col">Model</th>
				<th scope="col">Opco</th>
				<th scope="col">Owner</th>
				<th scope="col">Status</th>
				<th scope="col" width="70"></th>
			</tr>
		</thead>
		<tbody>
			<tr class="ox-table__row--three-column">
				<td  class="ox-table__cell--fixed-start"><span class="ox-machine-icon ox-machine-icon--scissor-lift"></span></td>
				<td>
					<h5>06454A</h5>
					<small>AG1N1E720727</small>
				</td>
				<td>
					<h5>GENIE GS-2646</h5>
					<small>Scissor Lift</small>
				</td>
				<td>CZ01</td>
				<td>mateco sarl (LU01)</td>
				<td><span class="ox-badge">Unknown</span></td>
				<td class="ox-table__cell--fixed-end">
					<div class="ox-dropmenu-wrapper" id="dox-drop-menu-example" aria-haspopup="true" aria-expanded="false">
						<input type="checkbox" class="ox-dropmenu-toggle" id="toggle-dropmenu-row1">
						<label for="toggle-dropmenu-row1" class="ox-dropmenu__trigger ox-button ox-button--plain ox-button--icon-small" role="button" aria-label="Toggle dropmenu">
							<span class="ox-icon ox-icon--ellipsis-vertical"></span>
						</label>
						<div class="ox-dropmenu">
							<ul class="ox-dropmenu__list" tabindex="-1" role="menu" aria-label="Overflow" data-floating-menu-direction="bottom">
								<li class="ox-dropmenu__option" role="presentation">
									<a href="#" class="ox-dropmenu__option__button" role="menuitem">
										<span class="ox-dropmenu__option__icon ox-icon ox-icon--calendar"></span>
										View detail
									</a>
								</li>
								<li class="ox-dropmenu__option" role="presentation">
									<a href="#" class="ox-dropmenu__option__button" role="menuitem">
										<span class="ox-dropmenu__option__icon ox-icon ox-icon--edit"></span>
										Edit item
									</a>
								</li>
								<li class="ox-dropmenu__option ox-dropmenu__option--separator ox-dropmenu__option--error" role="presentation">
									<button type="button" class="ox-dropmenu__option__button" role="menuitem">
										<span class="ox-dropmenu__option__icon ox-icon ox-icon--close"></span>
										Delete item
									</button>
								</li>
							</ul>
						</div>
					</div>
				</td>
			</tr>
			...
		</tbody>
	</table>
</div>

Sorted table

There are two diffent ways you can sort the data in your tables:

  • Select: Sort the data by selecting an option in the select above the table.
  • Sortable header: Sort the data by clicking on the header of the column you want to sort, click again to toggle the sorting direction (ascending or descending).

Sort by select

All you have to do for this way of sorting, is to add a form group with the modifier ox-form__group--inline and insert the needed label and select.

Example
# Title Title Title Title Title
Title Data Data Data Data Data
Title Data Data Data Data Data 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<div class="ox-text--right">
	<form class="ox-form__group ox-form__group--inline" action="#sorted">
		<label for="selection" class="ox-form__label">Sort by</label>
		<select id="sort-by" class="ox-form__field ox-form__field--small">
			<option value="creation-date">Creation date</option>
			<option value="customer-name">Customer name</option>
			<option value="machine-numer">Machine number</option>
			<option value="rental-period">Rental period</option>
		</select>
	</form>
</div>
<div class="ox-table-wrapper">
	<table class="ox-table">
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col">Title</th>
				<th scope="col">Title</th>
				<th scope="col">Title</th>
				<th scope="col">Title</th>
				<th scope="col">Title</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">Title</th>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			...
		</tbody>
	</table>
</div>

Sortable header

If it's possible to sort you're table by column, wrap the header inside a little form with the class ox-sortable-header. The title of your header will be the submit button with the class ox-sortable-header__trigger. You can specify the column that's sorted by, by adding an extra modifier to the submit button. This can be ox-sortable-header__trigger--sort-asc or ox-sortable-header__trigger--sort-desc depending on how you're sorting.

Example
#
Title
Title Data Data Data Data Data
Title Data Data Data Data Data 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<div class="ox-table-wrapper">
	<table class="ox-table">
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col">
					<form class="ox-sortable-header" action="#sorted">
						<input type="hidden" name="title1" value="ASC" />
						<button type="submit" class="ox-sortable-header__trigger">Title</button>
					</form>
				</th>
				<th scope="col">
					<div class="ox-sortable-header">
						<a href="#" class="ox-sortable-header__trigger">Title</a>
					</div>
				</th>
				<th scope="col">
					<form class="ox-sortable-header" action="#sorted">
						<input type="hidden" name="title3" value="ASC" />
						<button type="submit" class="ox-sortable-header__trigger">Title</button>
					</form>
				</th>
				<th scope="col">
					<form class="ox-sortable-header" action="#sorted">
						<input type="hidden" name="title2" value="ASC" />
						<button type="submit" class="ox-sortable-header__trigger ox-sortable-header__trigger--sort-desc">Title</button>
					</form>
				</th>
				<th scope="col">
					<div >
						<a href="#" class="ox-sortable-header__trigger">Title</a>
					</div>
				</th>
			</tr>
		</thead>
		...
	</table>
</div>

Sticky columns

When displaying a large amount of information in a table (which results in horziontal scrollbars) it can be useful to have one or multiple columns to stick to the side of the table in order to maintain an overview while scrolling. To get this effect add the class ox-table--sticky-cols followed by ox-table--#-sticky-cols where the # defines the amount of sticky columns (currently we've set a maximum of 4 sticky columns).

Add width and left property dynamically.

To make this work you'll have to add the width and left property dynamically to every th and td that's sticky (left value should be the same as the width of the previous column - see example below).

Example
Ref. Number Brand Model Category Power type Capacity Working height Year of manucature Hour meter reading Country City
AF1767 Genie 45/25J RT Articulating boom lifts Diesel 227 kg 16.05 m 2006 116 h Spain Tarragona
27120011 Haulotte HA12 IP Articulating boom lifts Electric 230 kg 12m 2006 / Poland /
21120197 JLG 3246ES Scissor lifts Electric 320 kg 11.6 m 2008 / Germany /
16181013 Denka lift DK7MK22 Trailer mounted boom lifts Other 200 kg 18 m 2003 / Germany /
20 - 40 of 180 orders 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<div class="ox-table-wrapper">
	<table class="ox-table ox-table--sticky-cols ox-table--3-sticky-cols">
		<thead>
			<tr>
				<th scope="col" width="124">Ref. Number</th>
				<th scope="col" width="92" style="left: 124px">Brand</th>
				<th scope="col" width="99" style="left: 216px">Model</th>
				<th scope="col">Category</th>
				<th scope="col">Power type</th>
				<th scope="col">Capacity</th>
				<th scope="col">Working height</th>
				<th scope="col">Year of manucature</th>
				<th scope="col">Hour meter reading</th>
				<th scope="col">Country</th>
				<th scope="col">City</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row" >AF1767</th>
				<td style="left:124px">Genie</td>
				<td style="left: 216px">45/25J RT</td>
				<td>Articulating boom lifts</td>
				<td>Diesel</td>
				<td>227 kg</td>
				<td>16.05 m</td>
				<td>2006</td>
				<td>116 h</td>
				<td>Spain</td>
				<td>Tarragona</td>
			</tr>
			...
		</tbody>
	</table>
</div>

<div class="ox-pagination-wrapper">
	<div class="ox-results-stats">
		<strong>20 - 40</strong> of 180 orders
	</div>
	<nav role="navigation" aria-label="Pagination">
		<ul class="ox-pagination">
			<li><a href="#" aria-label="Go to the previous page" class="ox-pagination__item ox-pagination__item--previous"></a></li>
			<li><a href="#" aria-label="Go to page 1" class="ox-pagination__item">1</a></li>
			<li><span aria-label="Current page, page 2" class="ox-pagination__item" aria-current="true">2</span></li>
			<li><a href="#" aria-label="Go to page 3" class="ox-pagination__item">3</a></li>
			<li><span>&hellip;</span></li>
			<li><a href="#" aria-label="Go to page 9" class="ox-pagination__item">9</a></li>
			<li><a href="#" aria-label="Go to the next page" class="ox-pagination__item ox-pagination__item--next"></a></li>
		</ul>
	</nav>
</div>