TreeTable

Expandable rows on BlessTable

Rows that nest — a folder listing with sizes, a budget with sub-items — shown as a table with expandable rows. For a hierarchy without columns, use Tree.

It renders through Table, so columns, striping, row headers and cell slots all work the same. For a flat table, Table or DataTable.

Basic

Name	Kind	Size
src	dir	48 KB
components	dir	40 KB
index.ts	file	8 KB
docs	dir	120 KB
README.md	file	12 KB

expanded: [ "src" ]

<script setup lang="ts">
import { ref } from "vue";
import { BlessBadge, BlessTreeTable } from "blessing-ui";
type Row = { id: string; name: string; size: string; kind: "dir" | "file"; children?: Row[] };
const rows: Row[] = [
  {
    id: "src",
    name: "src",
    size: "48 KB",
    kind: "dir",
    children: [
      {
        id: "components",
        name: "components",
        size: "40 KB",
        kind: "dir",
        children: [
          { id: "tree", name: "BlessTree.vue", size: "4 KB", kind: "file" },
          { id: "table", name: "BlessTable.vue", size: "6 KB", kind: "file" },
        ],
      },
      { id: "index", name: "index.ts", size: "8 KB", kind: "file" },
    ],
  },
  {
    id: "docs",
    name: "docs",
    size: "120 KB",
    kind: "dir",
    children: [{ id: "md", name: "index.md", size: "2 KB", kind: "file" }],
  },
  { id: "readme", name: "README.md", size: "12 KB", kind: "file" },
];
const expanded = ref<string[]>(["src"]);
</script>

<template>
  <div class="col" style="max-width: 560px">
    <BlessTreeTable
      :rows
      :columns="[
        { key: 'name', label: 'Name', header: true },
        { key: 'kind', label: 'Kind' },
        { key: 'size', label: 'Size', align: 'right' },
      ]"
      row-key="id"
      v-model:expanded="expanded"
      striped
    >
      <template #cell-kind="{ value }"
        ><BlessBadge :color="value === 'dir' ? 'text' : 'info'">{{ value }}</BlessBadge></template
      >
    </BlessTreeTable>
    <small>expanded: {{ expanded }}</small>
  </div>
</template>

• The tree column (treeColumn, first by default) carries the indent and a toggle named by the row's value, which says whether it's open.
• v-model:expanded (or defaultExpanded) holds the open row ids; childrenKey names the children field.

Usage

import { BlessTreeTable } from "blessing-ui";

API

Props

Name	Type	Default	Description
columns*	BlessColumn<T>[]	—
rows*	T[]	—	rows with an optional `children` array of the same shape
rowKey*	keyof T & string	—
childrenKey	string	"children"
treeColumn	(keyof T & string)	—	column that carries the indent + toggle; default: first
caption	string	—
striped	boolean	—
defaultExpanded	(string | number)[]	[]	ids expanded initially
expanded	Id[]	—

Events

Name	Payload	Description
update:expanded	[value: Id[] | undefined]