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 response object.

The url will receive query string 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.

The items array that is returned on response.data can have any name, such as items, MyMessages or Beskeder.

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 query string 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 id 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 query string 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 [Object] Array of column objects, each having an id and text property. The value of id is used for the sortBy query string argument. The value of text is the column name rendered. -
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 id 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 Default
items Array DEPRECATED An exposed array containing the fetched API items -
data Object An object containing the fetched API JSON object, same as v-fetch -
page Number Current page -
pageSize Number Amount of items per page -
sortBy String Column id to sort by -
sortDesc Boolean Sorting order true
total Number An exposed value containing the fetched API total -
loading Boolean If the datatable is still retrieving results true
empty Boolean If the API response had no results false

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.