# 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}

# 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}

# 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.	-
columns-mobile	[String]	Array of column id's to show in mobile breakpoint.	-
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.	-
disable-pagination	Boolean	Disable pagination	false

# Scoped Slot

For interacting with the datatable, we're exposing an object using Scoped slots (opens new window).

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.

← Card Date →