OcTable component

Description

The OcTable component represents a table with dynamically generated columns and rows.

There is also a simpler form of the table in the OcTableSimple component. It can't be generated dynamically and needs to be built manually.

Examples

Default

The most basic use case needs fields and data properties.

<template>
  <oc-table :fields="fields" :data="data" />
</template>

<script setup lang="ts">
import { FieldType } from '@opencloud-eu/design-system/helpers'

const fields: FieldType[] = [
  {
    name: 'fileName',
    title: 'Filename',
    alignH: 'left'
  },
  {
    name: 'size',
    title: 'Size',
    alignH: 'right'
  }
]

const data = [
  {
    id: '83558362-3fc6-4b96-a2e5-dba7435c4fae',
    fileName: 'textfile.txt',
    size: 50
  },
  {
    id: 'fbd793d3-c36c-4f92-bff6-dfeebaec8248',
    fileName: 'Some Folder',
    size: 9482
  },
  {
    id: '0e77c768-7ce9-4afe-a3e7-c9a1b0b42c94',
    fileName: 'image.png',
    size: 754
  }
]
</script>

Fields with slots

fields can also be defined as slots. Additionally, the table supports a slot or the footer.

<template>
  <oc-table :fields="fields" :data="data">
    <template #fileName="{ item }">
      <span>{{ item.fileName }}</span>
    </template>
    <template #size="{ item }">
      <span>{{ item.size }}</span>
    </template>
    <template #footer> Total: {{ data.length }} resources </template>
  </oc-table>
</template>

<script setup lang="ts">
import { FieldType } from '@opencloud-eu/design-system/helpers'

const fields: FieldType[] = [
  {
    name: 'fileName',
    title: 'Filename',
    type: 'slot',
    alignH: 'left'
  },
  {
    name: 'size',
    title: 'Size',
    type: 'slot',
    alignH: 'right'
  }
]

const data = [
  {
    id: '83558362-3fc6-4b96-a2e5-dba7435c4fae',
    fileName: 'textfile.txt',
    size: 50
  },
  {
    id: 'fbd793d3-c36c-4f92-bff6-dfeebaec8248',
    fileName: 'Some Folder',
    size: 9482
  },
  {
    id: '0e77c768-7ce9-4afe-a3e7-c9a1b0b42c94',
    fileName: 'image.png',
    size: 754
  }
]
</script>

Disabling and highlighting rows

Specific rows can be disabled or highlighted by referencing the rows by their respective item ids.

<template>
  <oc-table
    :fields="fields"
    :data="data"
    :highlighted="['83558362-3fc6-4b96-a2e5-dba7435c4fae']"
    :disabled="['fbd793d3-c36c-4f92-bff6-dfeebaec8248']"
  />
</template>

<script setup lang="ts">
import { FieldType } from '@opencloud-eu/design-system/helpers'

const fields: FieldType[] = [
  {
    name: 'fileName',
    title: 'Filename',
    alignH: 'left'
  },
  {
    name: 'size',
    title: 'Size',
    alignH: 'right'
  }
]

const data = [
  {
    id: '83558362-3fc6-4b96-a2e5-dba7435c4fae',
    fileName: 'Highlighted textfile.txt',
    size: 50
  },
  {
    id: 'fbd793d3-c36c-4f92-bff6-dfeebaec8248',
    fileName: 'Disabled Folder',
    size: 9482
  },
  {
    id: '0e77c768-7ce9-4afe-a3e7-c9a1b0b42c94',
    fileName: 'image.png',
    size: 754
  }
]
</script>

Properties

Emits

Slots