Table
The table contains a list of items with the limit and pagination elements on the bottom.
Item title | State | Category | Date | |||
---|---|---|---|---|---|---|
Item title | State | Item title | 01 January 1999 | |||
Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. | State | Item title | 01 January 1999 | |||
Sub header | ||||||
Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. | State | Item title | 01 January 1999 | |||
Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. | State | Item title | 01 January 1999 | |||
Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. | State | Item title | 01 January 1999 |
<!-- Table -->
<div class="k-table-container">
<div class="k-table">
<table class="k-js-responsive-table">
<thead>
<tr>
<th width="1%" class="k-table-data--form"><input class="k-js-grid-checkall" type="checkbox" /></th>
<th width="1%" data-toggle="true" class="k-table-data--toggle"></th>
<th width="1%" class="k-table-data--icon"></th>
<th class="k-sort-desc"><a href="#">Item title</a></th>
<th width="5%" data-hide="phone,tablet"><a href="#">State</a></th>
<th width="15%" data-hide="phone"><a href="#">Category</a></th>
<th width="5%" data-hide="phone,tablet,desktop"><a href="#">Date</a></th>
</tr>
</thead>
<tbody>
<tr>
<td width="1%" class="k-table-data--form"><input class="k-js-grid-checkbox" type="checkbox" /></td>
<td class="k-table-data--toggle"></td>
<td class="k-table-data--icon"><span class="k-icon-document-default" aria-hidden="true"></span></td>
<td class="k-table-data--ellipsis">
<a href="#">Item title</a>
</td>
<td><span class="k-table__item--state k-table__item--state-expired">State</span></td>
<td class="k-table-data--ellipsis">
<a href="#">Item title</a>
</td>
<td class="k-table-data--nowrap">01 January 1999</td>
</tr>
<tr>
<td width="1%" class="k-table-data--form"><input class="k-js-grid-checkbox" type="checkbox" /></td>
<td class="k-table-data--toggle"></td>
<td class="k-table-data--icon"><span class="k-icon-document-default" aria-hidden="true"></span></td>
<td class="k-table-data--ellipsis">
<a href="#">Curabitur blandit tempus porttitor.</a>
<small>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</small>
</td>
<td><span class="k-table__item--state k-table__item--state-expired">State</span></td>
<td class="k-table-data--ellipsis">
<a href="#">Item title</a>
</td>
<td class="k-table-data--nowrap">01 January 1999</td>
</tr>
<tr class="k-table__sub-header">
<th colspan="7">
Sub header
</th>
</tr>
<tr>
<td width="1%" class="k-table-data--form"><input class="k-js-grid-checkbox" type="checkbox" /></td>
<td class="k-table-data--toggle"></td>
<td class="k-table-data--icon"><span class="k-icon-document-default" aria-hidden="true"></span></td>
<td class="k-table-data--ellipsis">
<a href="#">Curabitur blandit tempus porttitor.</a>
<small>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</small>
</td>
<td><span class="k-table__item--state k-table__item--state-expired">State</span></td>
<td class="k-table-data--ellipsis">
<a href="#">Item title</a>
</td>
<td class="k-table-data--nowrap">01 January 1999</td>
</tr>
<tr>
<td width="1%" class="k-table-data--form"><input class="k-js-grid-checkbox" type="checkbox" /></td>
<td class="k-table-data--toggle"></td>
<td class="k-table-data--icon"><span class="k-icon-document-default" aria-hidden="true"></span></td>
<td class="k-table-data--ellipsis">
<a href="#">Curabitur blandit tempus porttitor.</a>
<small>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</small>
</td>
<td><span class="k-table__item--state k-table__item--state-expired">State</span></td>
<td class="k-table-data--ellipsis">
<a href="#">Item title</a>
</td>
<td class="k-table-data--nowrap">01 January 1999</td>
</tr>
<tr>
<td width="1%" class="k-table-data--form"><input class="k-js-grid-checkbox" type="checkbox" /></td>
<td class="k-table-data--toggle"></td>
<td class="k-table-data--icon"><span class="k-icon-document-default" aria-hidden="true"></span></td>
<td class="k-table-data--ellipsis">
<a href="#">Curabitur blandit tempus porttitor.</a>
<small>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</small>
</td>
<td><span class="k-table__item--state k-table__item--state-expired">State</span></td>
<td class="k-table-data--ellipsis">
<a href="#">Item title</a>
</td>
<td class="k-table-data--nowrap">01 January 1999</td>
</tr>
</tbody>
</table>
</div>
<div class="k-table-pagination">
<div class="k-pagination">
<div class="k-pagination__limit">
<select class="k-form-control">
<option value="5">5</option>
<option value="10" selected>10</option>
<option value="15">15</option>
</select>
</div>
<ul class="k-pagination__pages">
<li class="k-is-active">
<span>1</span>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
</div>
</div>
</div>
Table pagination
Put right below .k-table
container and inside .k-table-container
container
<div class="k-table-pagination">
<div class="k-pagination">
<div class="k-pagination__limit">
<select class="k-form-control">
<option value="5">5</option>
<option value="10" selected>10</option>
<option value="15">15</option>
</select>
</div>
<ul class="k-pagination__pages">
<li class="k-is-active">
<span>1</span>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
</div>
</div>
Item title
<td class="k-table-data--ellipsis">
<a href="#">Item title</a>
</td>
Item subtitle
Use the small
element for subtitle
Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. |
<div class="k-table-container">
<div class="k-table">
<table>
<tbody>
<tr>
<td class="k-table-data--ellipsis">
<a href="#">Curabitur blandit tempus porttitor.</a>
<small>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</small>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Table cell settings
Different available table cell settings
.k-table-data--right | .k-table-data--center | .k-table-data--nowrap |
.k-table-data--wrap | .k-table-data--icon | .k-table-data--form |
.k-table-data--toggle | .k-table-data--ellipsis | .k-table-data--multiline |
<div class="k-table-container">
<div class="k-table">
<table>
<tbody>
<tr>
<td class="k-table-data--right">
.k-table-data--right
</td>
<td class="k-table-data--center">
.k-table-data--center
</td>
<td class="k-table-data--nowrap">
.k-table-data--nowrap
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="k-table-container">
<div class="k-table">
<table>
<tbody>
<tr>
<td class="k-table-data--wrap">
.k-table-data--wrap
</td>
<td class="k-table-data--icon">
.k-table-data--icon
</td>
<td class="k-table-data--form">
.k-table-data--form
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="k-table-container">
<div class="k-table">
<table>
<tbody>
<tr>
<td class="k-table-data--toggle">
.k-table-data--toggle
</td>
<td class="k-table-data--ellipsis">
<a>.k-table-data--ellipsis</a>
</td>
<td class="k-table-data--multiline">
.k-table-data--multiline
</td>
</tr>
</tbody>
</table>
</div>
</div>
Table item states
Pending |
Expired |
Unpublished |
Published |
<div class="k-table-container">
<div class="k-table">
<table>
<tbody>
<tr>
<td>
<span class="k-table__item--state k-table__item--state-pending">Pending</span>
</td>
</tr>
<tr>
<td>
<span class="k-table__item--state k-table__item--state-expired">Expired</span>
</td>
</tr>
<tr>
<td>
<span class="k-table__item--state k-table__item--state-unpublished">Unpublished</span>
</td>
</tr>
<tr>
<td>
<span class="k-table__item--state k-table__item--state-published">Published</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Table sub header
Add sub headers in between rows
Column 1 | Column 2 | Column 3 |
Sub header | ||
---|---|---|
Column 1 | Column 2 | Column 3 |
<div class="k-table-container">
<div class="k-table">
<table>
<tbody>
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
<td>
Column 3
</td>
</tr>
<tr class="k-table__sub-header">
<th colspan="3">
Sub header
</th>
</tr>
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
<td>
Column 3
</td>
</tr>
</tbody>
</table>
</div>
</div>
Table levels
A table displaying multiple levels
Heading | |
---|---|
Level 1 | |
Level 2 | |
Level 3 | |
Level 1 | |
Level 1 |
<div class="k-table-container">
<div class="k-table">
<table>
<thead>
<tr>
<th width="1%"><input type="checkbox" /></th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td class="k-table__item-level k-table__item-level1">Level 1</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td class="k-table__item-level k-table__item-level2">Level 2</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td class="k-table__item-level k-table__item-level3">Level 3</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td class="k-table__item-level k-table__item-level1">Level 1</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td class="k-table__item-level k-table__item-level1">Level 1</td>
</tr>
</tbody>
</table>
</div>
</div>
Selected rows
When rows are selected they are highlighted
Item | Item | Item |
Item | Item | Item |
Item | Item | Item |
<div class="k-table-container">
<div class="k-table">
<table>
<tbody>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr class="k-is-selected">
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
</tbody>
</table>
</div>
</div>
Positioner
For drag and drop sorting
Title | |
Title |
<div class="k-table-container">
<div class="k-table">
<table>
<tbody>
<tr>
<td>
<span class="k-positioner"></span>
</td>
<td>
Title
</td>
</tr>
<tr>
<td>
<span class="k-positioner"></span>
</td>
<td>
Title
</td>
</tr>
</tbody>
</table>
</div>
</div>
Table heading sorting
Title | Title | Title |
---|
<div class="k-table-container">
<div class="k-table">
<table>
<thead>
<tr>
<th>Title</th>
<th>
<a href="#">
Title
<span class="k-icon-sort-ascending" aria-hidden="true">
<span class="k-visually-hidden">Sort column</span>
</span></a>
</th>
<th>Title</th>
</tr>
</thead>
</table>
</div>
</div>
Responsive table
- Add the
.k-js-responsive-table
class to the<table>
- Use
[data-hide="phone/tablet/desktop"]
on<th>
to hide cell on different screen sizes - Set
[data-toggle="true"]
and add a.k-table-data--toggle
class to an empty cell
Move icon | Title | Category | Downloads | ||
---|---|---|---|---|---|
Title | Category | 12 |
<div class="k-table-container">
<div class="k-table">
<table class="k-js-responsive-table">
<thead>
<tr>
<th width="1%" data-hide="phone">
<span class="k-icon-move" aria-hidden="true"></span>
<span class="k-visually-hidden">Move icon</span>
</th>
<th width="1%" class="k-table-data--form">
<input type="checkbox" />
</th>
<th data-toggle="true" class="k-table-data--toggle"></th>
<th>
Title
</th>
<th data-hide="phone,tablet">
Category
</th>
<th data-hide="phone,tablet,desktop">
Downloads
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="k-positioner"></span>
</td>
<td class="k-table-data--form">
<input type="checkbox" />
</td>
<td class="k-table-data--toggle"></td>
<td class="k-table-data--ellipsis">
<a href="javascript:void(0)">Title</a>
</td>
<td>
Category
</td>
<td>
12
</td>
</tr>
</tbody>
</table>
</div>
</div>
Fixed thead
The thead will stay on top when scrolling the tables and when the table is taller than the viewport.
Shark alert: Using (relatively new) CSS position: sticky instead of JS for performance. Because of this the thead might not stick on your browser. See compatibility.
Heading | Heading |
---|---|
Content | Content |
Content | Content |
Content | Content |
Content | Content |
Content | Content |
Content | Content |
<div class="k-flex-wrapper" style="height:150px"> <!-- <- this `<div>` is for demonstration purpose only -->
<div class="k-table-container">
<div class="k-table">
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Auto opening
On small screens, links found in the <tbody>
, and their parent <td>
including their siblings, will open either .k-sidebar-right
or .k-subcontent
, depending on which of the two columns is present.
To stop this, add the k-js-click-to-select
class to the <table>
element to restore selecting the table row on click. This also restores the original click event to the link.