Skip to content

A table component built with Smart table

This is an advanced example of a table component using smart-table and other libraries.

Data

The data set is made of 25000 items.

Some properties are nested and have different types (String, Number, Date, Enum).

The degree of entropy varies from one property to the other: the most chaotic property being the date of birth.

Template

Some cells have em elaborated templates

Search

The top input provides a full text search scoped to the surname and name columns and is case sensitive.

Sort

Every column can be ordered with the following particularities

Filter

Every column can expand a filter pop up menu withe the following particularities

CRUD

you can edit the data

Accessibility

The table is accessible by keyboard more or less as specified by the WAI Aria guide

Pagination

The footer contains a summary of the data set, buttons to navigate from one page to the other and a select input to change the page size

Bundle

The whole (unoptimized) bundle weights less than 9kb including the view framework ... difficult to beat ! If you can, I'll buy you a mojito next time you visit Cuba. It is made of

Live example