List View

A table component for displaying multiple rows of data that have the same fields.

WARNING

This component has been deprecated and will be removed in a future version of Stash. Please use the Data View component instead.

Basic Usage

<ListView :items="basicItems">
  <template #list-header>
    <div>Product Name</div>
    <div>Brand</div>
    <div>Category</div>
  </template>
  <template #list-items="{ results }">
    <ListItem not-actionable v-for="product in results">
      <ListItemCell>
        <Field label="Product Name"> {{ product.name }} </Field>
      </ListItemCell>
      <ListItemCell>
        <Field label="Brand"> {{ product.brand.name}} </Field>
      </ListItemCell>
      <ListItemCell>
        <Field label="Category"> {{ product.category.name }} </Field>
      </ListItemCell>
    </ListItem>
  </template>
</ListView>

Bulk actions

<ListView :items="bulkActionsItems" disable-persistency is-selectable>
  <template #bulk-actions="{ selectedItems }">
    <button primary @click="alertSelected(selectedItems)">
      Alert Selected
    </button>
  </template>

  <template #list-header>
    <div>Product Name</div>
    <div>Brand</div>
    <div>Category</div>
  </template>

  <template #list-items="{ results, selectedItems, onSelect }">
    <ListItem
      v-for="product in results"
      is-selectable
      :key="product.id"
      :item="product"
      :selected="selectedItems.some((item) => item.id === product.id)"
      @select="onSelect($event)"
    >
      <ListItemCell>
        <Field label="Product Name"> {{ product.name }} </Field>
      </ListItemCell>
      <ListItemCell>
        <Field label="Brand"> {{ product.brand.name }} </Field>
      </ListItemCell>
      <ListItemCell>
        <Field label="Category"> {{ product.category.name }} </Field>
      </ListItemCell>
    </ListItem>
  </template>
</ListView>

Eyebrow

<ListView eyebrowItems disable-persistency>
  <template #eyebrow>
    <Module class="tw-mb-3">
      <ModuleContent> This white box exists in the Eyebrow Slot </ModuleContent>
    </Module>
  </template>

  <template #list-header>
    <div class="tw-col-span-4">Product Name</div>
    <div class="tw-col-span-2">Brand</div>
    <div class="tw-col-span-2">Category</div>
  </template>

  <template #list-items="{ results }">
    <ListItem not-actionable v-for="product in results">
      <ListItemCell class="tw-col-span-4">
        <Field label="Product Name"> {{ product.name }} </Field>
      </ListItemCell>
      <ListItemCell class="tw-col-span-2">
        <Field label="Brand"> {{ product.brand.name }} </Field>
      </ListItemCell>
      <ListItemCell class="tw-col-span-2">
        <Field label="Category"> {{ product.category.name }} </Field>
      </ListItemCell>
    </ListItem>
  </template>
</ListView>

Filter Drawer

<script setup>
const filterSchema = [
  {
    label: "Category",
    fieldToFilter: "category.id",
    type: "ll-select",
    attributes: {
      options: [...],
    },
  },
  {
    label: "Brand",
    fieldToFilter: "brand.id",
    type: "ll-select",
    attributes: {
      options: [...],
    },
  },
];
</script>

<template>
  <ListView
    disable-persistency
    show-filters-on-load
    :items="filterItems"
    :filterSchema="filterSchema"
  >
    <template #list-header>
      <div class="tw-col-span-4">Product Name</div>
      <div class="tw-col-span-2">Brand</div>
      <div class="tw-col-span-2">Category</div>
    </template>

    <template #list-items="{ results }">
      <ListItem not-actionable v-for="product in results">
        <ListItemCell class="tw-col-span-4">
          <Field label="Product Name">
            {{ product.name }}
          </Field>
        </ListItemCell>
        <ListItemCell class="tw-col-span-2">
          <Field label="Brand">
            {{ product.brand.name }}
          </Field>
        </ListItemCell>
        <ListItemCell class="tw-col-span-2">
          <Field label="Category">
            {{ product.category.name }}
          </Field>
        </ListItemCell>
      </ListItem>
    </template>
  </ListView>
</template>

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.

• <ListView />