3F Design v1.58.1

Datatable

Component name: <v-datatable>

A datatable is very similar to a <v-table>, except its content is fetched dynamically.

Preview

Please note that the example above uses a static resource, and does not show a visual difference when navigating.

You can open Developer Tools - Network to see how requests change with interaction.

Implementation

You must specify a v-slot attribute to reference the fetched data.

The url will receive querystring arguments mapped from page and pageSize

https://3f-design.dk/design@1.*/docs/data/v-datatable/repos.json?page={page}&page-size={pageSize}
1

API response

The response returned must be valid JSON and contain a total number and an items array.

The properties of each item are not fixed and can be referenced in the markup.

See the above Code and repos.JSON tabs under Implementation for an example.

Sorting

Implementation

The url will receive querystring arguments mapped from page, pageSize, sortBy and sortDesc.

https://3f-design.dk/design@1.*/docs/data/v-datatable/repos.json?page={page}&page-size={pageSize}&sort-by={sortBy}&sort-descending={sortDesc}
1

Parameter mapping

You can perform parameter mapping to specify which arguments your REST API needs.

The current property values are exposed in curly brackets.

{page} - The current page number

{pageSize} - Items per page

{limit} - Equal to pageSize

{offset} - Meant for offset based APIs, page * pageSize

{sortBy} - The column to sort by

{sortDesc} - Whether to sort descending (true) or ascending (false)

These can be mapped to a request URL, to fetch new content when the user chooses Previous or Next.

In the Github example below, a request URL would have 2 dynamic querystring arguments:

https://api.github.com/orgs/vuejs/repos?per_page=20&page=2

These are mapped in the query attribute as a JSON string:

<v-datatable ... 
  url="https://api.github.com/orgs/vuejs/repos?per_page={pageSize}&&page={page}">
1
2

If your data API expects an offset and limit instead, this can be specified as below:

<v-datatable ... 
  url="https://api.github.com/orgs/vuejs/repos?offset={offset}&&limit={limit}">
1
2

API

Name Type Description Default
columns [String] Columns to show, passed on to <v-table> -
page [Number] Which page of the data to show initially 1
page-size [Number] The initial amount of items per page 20
sort-by [String] Initial column to sort by -
sort-desc [Boolean] Initial sorting order true
url String URL of the data resource you want to fetch. The response must be valid JSON. -

Scoped Slot

For interacting with the datatable, we're exposing an object using Scoped slots.

This object contains the following:

Name Type Description
items Array An exposed array containing the fetched API items.
page Number Current page.
pageSize Number Amount of items per page
sortBy String Column to sort by
sortDesc Boolean Sorting order
total Number An exposed value containing the fetched API total.

Notice

All other properties that are not defined above, will be passed to the wrapped <v-table> as html attributes. This is especially useful for adding the class attribute.

← Date →