ReddRadar
Agent skill
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.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/nuxt-tables
SKILL.md
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) },
])
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?