Tables

Example

Integrates the DataTables plugin into WET providing searching, sorting, filtering, pagination and other advanced features for tables.

Basic Example

<table class="wb-tables table">

Options Example

The DataTables API is fully accessible through the data-wb-tables attribute using a JSON array.

<table class="wb-tables table table-striped table-hover" data-wb-tables='{ "ordering" : false }'>

Pagination Example

Changing the number of entries to show in a table or having a small amount of rows will adjust pagination accordingly. If all of the rows fit on one page only, then the pagination will not be visible.

With top pagination example

Adding the pagination at the top of the table and keeping it at the bottom by using the following configuration: data-wb-tables='{"ordering" : false, "dom":"<\u0027top\u0027pfil>rt<\u0027bottom\u0027p><\u0027clear\u0027>"}'

Filtering Examples

Find the plugin for the action you need:

• Date Range, Drop-Down List and Checkbox Filters
• Number Range Filters (Integers, floats, currency, etc)
• Other Filters

Provisional - Filtering interface emphasis

The following style is an experiment led by the Digital Transformation Office with the objective of enhancing the visibility of the table filtering interface when the user scrolls the page.

Source code

<table class="wb-tables table filterEmphasis provisional">
	...
</table>