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

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

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

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>

Need Help?

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

Support

Developers

Community

Company

© 2018 Joomlatools | Built with love by Timble