Agent-Skills.md

Agent Skills: Nuxt Tables

Table components with column builder pattern and XTable. Use when creating data tables, defining columns with custom cells, implementing row actions, or building reusable table configurations.

vuenuxtdata-tablestable-componentscomponent-patterns
uiID: leeovery/claude-nuxt/nuxt-tables

Repository

leeovery/claude-nuxt
leeoveryLicense: MIT
1

Skill Files

Browse the full folder contents for nuxt-tables.

Download Skill

Loading file tree…

skills/nuxt-tables/SKILL.md

Skill Metadata

Name
nuxt-tables
Description
Table components with column builder pattern and XTable. Use when creating data tables, defining columns with custom cells, implementing row actions, or building reusable table configurations.

Nuxt Tables

Data tables with column builder pattern and XTable component.

Core Concepts

tables.md - Column builder, XTable, row actions

Column Builder Pattern

// app/tables/posts.ts
import { h } from 'vue'
import type { TableColumn } from '@tanstack/vue-table'

const statusColumn: TableColumn<Post> = {
  id: 'status',
  accessorKey: 'status',
  header: 'Status',
  cell: ({ row }) => h(UBadge, {
    color: row.getValue('status').color()
  }, () => row.getValue('status').text),
}

export const postsColumnBuilder = createColumnBuilder<Post>({
  ulid: ulidColumn,
  author: authorColumn,
  status: statusColumn,
  dates: datesColumn,
})

// Usage
const columns = postsColumnBuilder.all()
const columns = postsColumnBuilder.build(['ulid', 'status'])
const columns = postsColumnBuilder.except(['dates'])

XTable Usage

<XTable
  :data="posts"
  :columns="columns"
  :loading="isLoading"
  :fetching="isFetching"
  :row-actions="rowActions"
  row-id="ulid"
  @row-click="handleRowClick"
/>

Row Actions

const rowActions = computed(() => (row: Row<Post>) => [
  { label: 'View', to: `/posts/${row.original.ulid}` },
  { label: 'Edit', onSelect: () => openEdit(row.original) },
  { label: 'Delete', onSelect: () => handleDelete(row.original) },
])