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

• Cells are editable when activated (click or by keyboard)
• Gender cells change color depending on the value
• Size column shows a bar on the left side whose height is relative to the value
• The last column display a cell with a button

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

• Surname is the only column to have tree states (ascend, descend and no sort).
• Surname and Name column sort on nested properties ("name.last" and "name.first")
• Date of birth is the only column to be sorted with the descending direction first.
• Sorted properties types are Number, String and Date

Filter

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

• Surname and Name filter on nested properties
• Date of birth filter on Date with the operator greater or equal to.
• Gender operates as a strict filter: "male" is included in "female" but you can filter by "male" only
• Size combines two clauses in a AND filter

CRUD

you can edit the data

• Remove an item by activating the remove button: this will trigger a refresh of the table so if you table is currently in a sorted/filtered/searched state, it will be updated accordingly
• Patch an item (inline editing). You can toggle the edit mode of a cell by clicking the cell or by pressing Enter when the cell is focused. The patch will not cause a refresh of the table (you could have used the update method of the crud module instead)

Accessibility

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

• Only one cell will be in the TAB sequence as any composite widget
• You can navigate from one cell to the other using the arrow keys
• If a cell has sub widgets which do not need arrow keys they will be focused instead of the cell (like the headers)
• Otherwise you will need to activate the cell by pressing Enter, afterward the key strokes will be trapped in the sub widget except Escape which will turn back to the cell navigation mode. For example, every data cell is editable.

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

• Flaco a whole view library which is itself very lightweight indeed. (not specific to smart table)
• smart-table-core library
• smart-table-crud extension module for the Remove/Edit features
• smart-table-keyboard module for the keyboard navigation following the grid pattern (not specific to smart-table)
• Some code to glue everything together. Note some of it consists in turning smart table into a Redux store and could worth its own module

Live example