oa/documentation/flex-table/v-flex-table-media-documentation.md

Media columns

Displaying medias in cells can be improved with media in addition to grow property on columns. Check the markup for more details about usage.

<script setup lang="ts">
const data = [
  {
    id: 0,
    username: 'Erik K.',
    position: 'Product Manager',
    picture: '/images/avatars/svg/vuero-1.svg',
    badge: '/images/icons/flags/united-states-of-america.svg',
    location: 'Las Vegas, NV',
    industry: 'Software',
    status: 'Active',
    contacts: [
      {
        id: 0,
        picture: 'https://media.cssninja.io/content/avatars/25.jpg',
        initials: 'AC',
        color: 'info',
      },
      // and more contacts ...
    ],
  },
  // and more data ...
]

const columns = {
  username: {
    label: 'User (media)',
    grow: true,
    media: true,
  },
  position: 'Position',
  status: {
    label: 'Status',
  },
  contacts: {
    label: 'Contacts',
    align: 'end',
    format: value => value.map((r: any) => r.initials).join(', '),
  },
}
</script>

<template>
  <VFlexTable
    rounded
    :data="data"
    :columns="columns"
  >
    <template #body-cell="{ row, column, value }">
      <template v-if="column.key === 'username'">
        <VAvatar
          size="medium"
          :picture="row.picture"
          :badge="row.badge"
        />
        <div>
          <span class="item-name">{{ row?.name }}</span>
          <span class="item-meta">
            <strong>{{ value }}</strong>
          </span>
        </div>
      </template>

      <VAvatarStack
        v-else-if="column.key === 'contacts'"
        class="is-pushed-mobile"
        size="small"
        :avatars="row.contacts"
        :title="value"
        :limit="3"
      />
    </template>
  </VFlexTable>
</template>