Table

The table contains a list of items with the limit and pagination elements on the bottom.

<!-- Table -->
<div class="k-table-container">
    <div class="k-table">
        <table class="k-js-fixed-table-header 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

<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

<div class="k-table-container">
    <div class="k-table">
        <table>
            <tbody>
                <tr>
                    <td class="k-table-data--right">
                        Content
                    </td>
                     <td class="k-table-data--center">
                        Content
                     </td>
                     <td class="k-table-data--nowrap">
                         Content
                     </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="k-table-container">
    <div class="k-table">
        <table>
            <tbody>
                <tr>
                     <td class="k-table-data--wrap">
                        Content
                     </td>
                     <td class="k-table-data--icon">
                        Content
                     </td>
                     <td class="k-table-data--form">
                        Content
                     </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="k-table-container">    
    <div class="k-table">
        <table>
            <tbody>
                <tr>
                     <td class="k-table-data--toggle">
                        Content
                     </td>
                     <td class="k-table-data--ellipsis">
                        Content
                     </td>
                     <td class="k-table-data--multiline">
                        Content
                     </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Table item states

<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

<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

<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

<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

<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

<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
<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="#">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.

<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>

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.

Join 23000+ others and subscribe to our newsletter!