This is the simplest table setup.
This example consumes data from jsonplaceholder.typicode.com/todos
A collection of todo items is directly passed to the [items] prop.
A [paginatorConfig] object is passed.
[sortByColumns] is set to allow sorting only by the "id" and "title" columns.
A handler is bound to (pageChange) to load new items on page click.
Datatable with custom templates for header and body
This example consumes data from reqres.in/api/users
sq-datatable is used as a container.
This example does not use any of the default properties of the datatable.
No automatic paganation available, since the presentation depends entirely on the author.
The sq-datatable-header and sq-datatable-body directives are used for content projection,
respectively for the datatable columns and rows.
{{col}}
{{item[prop]}}
Custom datatable using sq-datatable-row and sq-datatable-column
This example consumes data from reqres.in/api/unknown
sq-datatable is used as a container.
This example does not use any of the default properties of the datatable.
No automatic paganation available, since the presentation depends entirely on the author.
The sq-datatable-header and sq-datatable-body directives are used for content projection,
respectively for the datatable columns and rows.
Each column (th) is represented by a sq-datatable-column component which
exposes custom properties to bind name, event handlers and information if the row data can be
sorted by that column.
Each row (tr) is represented by a sq-datatable-row component which
exposes custom properties to bind row data.