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

            
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 pagination Put right below `.k-table` container and inside `.k-table-container` container

            
## Item title ## Item subtitle Use the `small` element for subtitle
Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

            
Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
## 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

            
.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
## Table item states
Pending
Expired
Unpublished
Published

            
Pending
Expired
Unpublished
Published
## Table sub header Add sub headers in between rows
Column 1 Column 2 Column 3
Sub header
Column 1 Column 2 Column 3

            
Column 1 Column 2 Column 3
Sub header
Column 1 Column 2 Column 3
## Table levels A table displaying multiple levels
Heading
Level 1
Level 2
Level 3
Level 1
Level 1

            
Heading
Level 1
Level 2
Level 3
Level 1
Level 1
## Selected rows When rows are selected they are highlighted
Item Item Item
Item Item Item
Item Item Item

            
Item Item Item
Item Item Item
Item Item Item
## Positioner For drag and drop sorting
Title
Title

            
Title
Title
## Table heading sorting ## Responsive table * Add the `.k-js-responsive-table` class to the `` * Use `[data-hide="phone/tablet/desktop"]` on ``, and their parent `
` 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

            
Move icon Title Category Downloads
Title Category 12
## 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](http://caniuse.com/#feat=css-sticky).
Heading Heading
Content Content
Content Content
Content Content
Content Content
Content Content
Content Content

            
Heading Heading
Content Content
Content Content
Content Content
Content Content
Content Content
Content Content
## Auto opening On small screens, links found in the `
` 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 `` 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. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.