Skip to main content
Skip table of contents

Advanced Tables

Advanced tables allow you to add advanced interaction controls to your HTML tables, such as pagination, sortable columns, and search.

Prerequisites for using advanced tables

  1. The HTML table needs a header definition (<thead>...</thead>) and a body definition (<tbody>...</tbody>).

  2. The number of columns in the header area must match the number of columns in the body area.

Example:

Example Template

Activation

To be able to use the additional functions the table must be marked with the style class "ed-table".

HTML
<table class="ed-table">...</table>

Available Components

Components are activated by adding special values to the style class. Components can also be combined with each other:

Pagination

"ed-table-pagination" adds a paging option at the end of the table with a default value of 10 results per page.

HTML
<table class="ed-table ed-table-pagination">...</table>
Pagination Example

Advanced Pagination Selector

"ed-table-pagination-selector" additionally places a dropdown menu above the table that allows to select the amount of results per page. Thus, instead of the default 10 results, 25, 50 or 100 results per page can be displayed.

HTML
<table class="ed-table ed-table-pagination-selector">...</table>
Pagination with Selector Example

Custom Page Size

"ed-table-pagination-CUSTOM_PAGE_SIZE" allows you define your own page size. E.g., this example will display 25 results per page:

HTML
<table class="ed-table ed-table-pagination-25">...</table>

Sortable Columns

"ed-table-sortable" adds a sorting option for columns.

HTML
<table class="ed-table ed-table-sortable">...</table>
Sortable Columns Example

"ed-table-search" adds a search function above the table.

HTML
<table class="ed-table ed-table-search">...</table>
Search Example

Info

"ed-table-info" provides extended information about the search results below the table.

HTML
<table class="ed-table ed-table-info">...</table>
Extended Information Example

Example table with custom pagination, search, sortable column and info:

HTML
<table class="ed-table ed-table-pagination-5 ed-table-search ed-table-sortable ed-table-info">
    <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>E-Mail</th>
        </tr>
    </thead>
    <tbody>
      {{#.}}
        <tr>
          <td>{{id}}</td>
          <td>{{fullName}}</td>
          <td><a href="mailto:{{email}}">{{email}}</a></td>
        </tr>
      {{/.}}
    </tbody>
</table>
Visual Result of Example

Export options

"ed-table-export" provides a button with export options for CSV, JSON and excel.

CODE
<table class="ed-table ed-table-export">...</table>
Export Button Example

Table Extensibility support

"ed-table-data-provider" enables the Table Extensibility support.

CODE
<table class="ed-table ed-table-data-provider">...</table>
Table Extensibility Example

Styling Options

class="hover" highlights a row while the cursor is hovering over it.

CODE
<table class="ed-table ed-table-pagination hover">...</table>
Hover Styling Effect

class="row-border" adds visual separators between the rows while class="cell-border" adds a strong delineation between individual cells.

CODE
<table class="ed-table ed-table-pagination row-border">...</table>
CODE
<table class="ed-table ed-table-pagination cell-border">...</table>
Cell Boarder Styling Effect

class="stripe" shades alternate rows.

CODE
<table class="ed-table ed-table-pagination stripe">...</table>
Strip Styling Effect

class="compact" reduces the white-space in the default styling. This also increases the information density on screen.

HTML
<table class="ed-table ed-table-pagination compact">...</table>
Compact Styling Effect

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.