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-tableclass 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--toggleclass 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.
Need Help? Let our developers personally assist you. Business or Agency subscribers can ask development related questions in our Support Center.