# 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 for page and pageSize

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

# 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

# Parameter mapping

You must perform parameter mapping if your REST API needs different argument names.

The current property values are exposed as currentPage and currentPageSize.

These must 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 ... 
  query="{ per_page: currentPageSize, page: currentPage }"
  url="https://api.github.com/orgs/vuejs/repos">

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

<v-datatable ... 
  query="{ offset: currentPage * pageSize, limit: pageSize }"
  url="https://api.github.com/orgs/vuejs/repos">

# API