Data Table: Row Expansion

Expand rows to show detail content using the master-detail pattern.

Row Expansion

Click the chevron to expand a row and see order items. Rows with no items (like the cancelled order) cannot be expanded.

Setup

Add an expander column and provide detail content via the #expanded-row slot:

<script setup>
import { DataTable, createColumnHelper } from '@meldui/vue'

interface Order {
  id: string
  customer: string
  total: number
  items: { name: string; qty: number; price: number }[]
}

const helper = createColumnHelper<Order>()

const columns = [
  helper.expander(),  // Adds expand/collapse chevron
  helper.accessor('customer', { title: 'Customer' }),
  helper.accessor('total', { title: 'Total' }),
]
</script>

<template>
  <DataTable
    :columns="columns"
    :data="data"
    :page-count="pageCount"
    :on-server-side-change="handleChange"
    enable-row-expansion
    :get-row-can-expand="(row) => row.original.items.length > 0"
  >
    <template #expanded-row="{ row }">
      <div class="p-4">
        <h4 class="font-medium mb-2">Order Items</h4>
        <table class="w-full text-sm">
          <tr v-for="item in row.original.items" :key="item.name">
            <td>{{ item.name }}</td>
            <td>x{{ item.qty }}</td>
            <td class="text-right">${{ item.price }}</td>
          </tr>
        </table>
      </div>
    </template>
  </DataTable>
</template>

Props

Programmatic Control

const tableRef = ref()

// Expand/collapse all rows
tableRef.value?.toggleAllRowsExpanded(true)
tableRef.value?.toggleAllRowsExpanded(false)

// Reset expansion state
tableRef.value?.resetExpanded()