usage-example.vue

<template>
  <JkTable
    :columns="columns"
    :items="sortedComponents"
    row-height="48px"
    @current-change="onCurrentChange"
    @sort="onSort"
  >
    <template #cell:type="{ item }">
      <TypeIcon :type="item.type" />
    </template>
    <template #cell:preview="{ item }">
      <Preview :component="item" />
    </template>
    <template #cell:links="{ item }">
      <Link :links="item.links" />
    </template>
    <template #cell:tags="{ item }">
      <Tags :tags="item.tags" />
    </template>
    <template #cell:diagnostics="{ item }">
      <Diagnostics
        v-if="item.diagnostics"
        :diagnostics="item.diagnostics"
      />
    </template>
    <template #cell:actions="{ item }">
      <JkButton />
    </template>
  </JkTable>
</template>

<script>
const columns = computed(() => [
  {
    label: this.$t('cm.table_label.type').toString(),
    justify: 'center',
    slotName: 'type',
    width: 'auto'
  },
  {
    label: this.$t('cm.table_label.id').toString(),
    property: 'id',
    fontFamily: 'monospace',
    width: 'auto'
  },
  {
    label: this.$t('cm.table_label.display_name').toString(),
    property: 'displayName'
  },
  {
    label: this.$t('cm.table_label.preview').toString(),
    slotName: 'preview',
    width: '3fr'
  },
  {
    label: this.$t('cm.table_label.description').toString(),
    property: 'description',
    width: '2fr'
  },
  {
    label: this.$t('cm.table_label.links').toString(),
    slotName: 'links',
    width: 'auto'
  },
  {
    label: this.$t('cm.table_label.tags').toString(),
    slotName: 'tags',
    width: 'auto'
  },
  {
    label: this.$t('cm.table_label.diagnostics').toString(),
    slotName: 'diagnostics',
    width: 'auto'
  },
  {
    label: this.$t('cm.table_label.actions').toString(),
    slotName: 'actions',
    width: 'auto'
  }
])
</script>