Vitral 0.2
Data

OrganizationChart

A tree drawn as a chart, with nodes that fold and open, can be selected, and take a template per node type.

WAI-ARIA tested

Import

main.ts
import { OrganizationChart } from '@vitral/vue';

Selectable and collapsible

  • ALAna LimaCEO
    • BCBruno CostaCTO
      • Web
      • Mobile
    • CDCarla DiasCFO
      • Finance
    • Operations
Selected: none
<script setup lang="ts">import { Avatar, OrganizationChart, type OrganizationChartNode } from '@vitral/vue';import { ref } from 'vue'; const chart: OrganizationChartNode = {    key: 'ceo',    type: 'person',    data: { name: 'Ana Lima', title: 'CEO', initials: 'AL' },    children: [        {            key: 'cto',            type: 'person',            data: { name: 'Bruno Costa', title: 'CTO', initials: 'BC' },            children: [                { key: 'web', label: 'Web' },                { key: 'mobile', label: 'Mobile' }            ]        },        {            key: 'cfo',            type: 'person',            data: { name: 'Carla Dias', title: 'CFO', initials: 'CD' },            children: [{ key: 'finance', label: 'Finance' }]        },        { key: 'ops', label: 'Operations', collapsible: false }    ]}; const selection = ref<Record<string, boolean>>({});</script> <template>    <OrganizationChart v-model:selection-keys="selection" :value="chart" selection-mode="single" collapsible aria-label="Company">        <template #person="{ node }">            <div style="display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 7rem">                <Avatar :label="(node.data as { initials: string }).initials" shape="circle" />                <strong>{{ (node.data as { name: string }).name }}</strong>                <small style="color: var(--vt-text-muted-color)">{{ (node.data as { title: string }).title }}</small>            </div>        </template>    </OrganizationChart>    <small style="color: var(--vt-text-muted-color)">Selected: {{ Object.keys(selection).join(', ') || 'none' }}</small></template>

API

Read from packages/vue/src/components/OrganizationChart/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
valueOrganizationChartNodeThe top of the chart.
selectionMode'single' | 'multiple'—
collapsiblebooleanNodes can be folded away.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
node-selectnode: OrganizationChartNode—
node-unselectnode: OrganizationChartNode—
node-expandnode: OrganizationChartNode—
node-collapsenode: OrganizationChartNode—

Slots

NameSlot propsDescription
default(props: { node: OrganizationChartNode })A node's content; a slot named after a node's `type` wins.