# ListView

The ListView loads all the data in a pre-defined structure for the vue-good-table. The Listview will load all the required metadata (filters, actions and columns) via the /metadata-call. After that call all data is loaded via the /search-call in the API.

Meta data structure (Example)

For example /api/customers/metadata GET

{
  "metadata": {
    "columns": [
      // All available columns for the data table
    ],
    "filters": [
      // All available filters that can be used for the data table
    ],
    "permissions": {
      // All available permissions
    },
    "actions": [
      // All available actions that can be used in the data table
    ]
  }
}

Data structure (Example)

For example /api/customers/search POST

{
  "total": 200,
  "totalWithFilter": 12,
  "data": [
    // All the available entities
  ]
}

Component documentation

All the props and slots are documented in the component

# Filters

# Supported types

At the moment there are four types supported: Select, DateRange, Text and Boolean.

# Filter values

Do you want to set values in the ListViewFilters? There are two ways to apply additional data to the component: via defaults-prop and filters -prop.

# `defaults`-prop

By passing down an array to the defaults-prop will set the default values on the ListViewFilters. It will be checked if the given filter is available in the /metadata call. If it is not in the list of filters, it will not be given to the /search call.

<template>
  <ListView :defaults="defaults" />
</template>

<script>
export default {
  setup() {
    const defaults = ref([
      {
        id: 'ByEntityStatus',
        value: true,
        type: 'BASE_SET'
      }
    ])
    return {
      defaults
    }
  }
}
</script>

Demo (opens new window)

WARNING

One limitation currently is that it hard (impossible?) to set a default in a Select, because each environment has a different id for an option. For example when you want to set "The Netherlands" as a default for a country selection. On each environment (test, accept or production) the id for The Netherlands is different.

# `filters`-prop

Sometimes you want to create separate pages on the same view. For example when you want a list inactive users. In that scenario you want to pass down a ByActiveStatus-filter with the value false. But in another page you would like to show the active users. In that scenario you would like to pass down a ByActiveStatus filter with the value of true.

In the event that you pass down an array to filters-prop, the filters inside that array will not be visible in the ListViewFilters. If you want to see them, but want to set a default: check the defaults-prop

<template>
  <ListView :filters="filters" />
</template>

<script>
export default {
  setup() {
    const filters = ref([
      {
        id: 'ByEntityStatus',
        value: true,
        type: 'BASE_SET'
      }
    ])
    return {
      filters
    }
  }
}
</script>

Demo (opens new window)

# Visibility

All filters in the /metadata call will automatically be visible in the ListViewFilters. There are some scenarios where the filter will not be visible:

Only supported types will be visible in the list
A filter without a type will be removed from the list
A filter that is applied via the filters-prop in the ListView will be removed from the list
A reserved filter id will be removed from the list
When the id is inside the excluded-filters-prop it will be removed from the list

# Excluded filters

You can remove items from the ListViewFilters by passing down an array with id's that you do not want to be visible. It is recommended to pass down the QuickSearch id in this array.

# Reserved filter-id's

The QuickSearch and ByRouteParam are reserved filter id's and will not be visible in the ListViewFilters.