OpenCloud Design System

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.

vue
<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.

vue
<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.

vue
<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 ​