Data Tables Beta

Web toolkit version v10.12.1

Examples

Regular

Col 1Col 2Col 3Col 4
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4

Loose

Col 1Col 2Col 3Col 4
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4

Tight

Col 1Col 2Col 3Col 4
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4

Extra tight

Col 1Col 2Col 3Col 4
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4

Clickable rows and cells

Col 1Col 2Col 3Col 4
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
(Row clickable)Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2 (Clickable)Row 4, Col 3Row 4, Col 4

Selected rows

Col 1Col 2Col 3Col 4
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
(Row selected)Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4

Expanding rows

Col 1Col 2Col 3Col 4
Category
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4
Category
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4
Category
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4

Additional meta (Pagination etc)

1-50 of 5695 items

1 item selected

Col 1Col 2Col 3Col 4
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4

1-50 of 5695 items

1 item selected

Items per page:

Additional meta (Different Pagination option)

1-50 of 5695 items

Col 1Col 2Col 3Col 4
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4

1-50 of 5695 items

Items per page:

Page:

of 114

Sortable data tables

Col 1Col 2Col 3Col 4
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4

Code

Data tables

Col 1Col 2Col 3Col 4
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4

Clickable rows and cells

Add the data-table__clickable class to a tr or td element.

Col 1Col 2Col 3Col 4
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4

Selected rows

Add the data-table__selected class to a tr element.

Col 1Col 2Col 3Col 4
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4

Expanding rows

Wrap each set of rows in its own tbody element.

Each tbody element includes the header row as the first row element, with a class of data-table__collapsable-header (See example).

To expand the collapsable group, add the class name of data-table__collapsable-header--open to the collapsable header tr element.

Col 1Col 2Col 3Col 4
Category 1
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4
Category 2
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4

Additional meta

The additional meta boxes are div elements that are positioned before and/or after the table element.

1-50 of 5695 items

1 item selected

Items per page:

Page:

of 114

Sortable

Add the class of data-table__sortable to the relevant th element.

The modifier classes for the state changes are data-table__sortable--sorted-up and data-table__sortable--sorted-down.

Col 1Col 2Col 3Col 4
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4