Getting started

@vuetify/v0 ships createDataTable — sorting, filtering, pagination, selection, grouping — but no visual layer, and neither v0 nor classic Vuetify has ever shipped a built-in table-to-card responsive mode. v0-adaptive-table fills both gaps: one field configuration drives a desktop table and a mobile layout, without touching any of the logic already handled by createDataTable.

Install

pnpm add v0-adaptive-table @vuetify/v0

vue and @vuetify/v0 are peer dependencies — this package only adds the rendering layer on top of them.

Quick start

<script setup lang="ts">
import { createDataTable } from '@vuetify/v0'
import { AdaptiveTable } from 'v0-adaptive-table'
import type { AdaptiveField } from 'v0-adaptive-table'

interface Order extends Record<string, unknown> {
  id: string
  customer: string
  status: string
  total: number
  placedAt: string
}

const table = createDataTable<Order>()
table.onboard(orders.map(order => ({ id: order.id, value: order })))

const fields: AdaptiveField<Order>[] = [
  { key: 'customer', label: 'Customer', mobile: { role: 'title' } },
  { key: 'status', label: 'Status', type: 'chip', mobile: { role: 'subtitle' } },
  { key: 'total', label: 'Total', type: 'currency' },
  { key: 'placedAt', label: 'Placed on', type: 'date' },
]
</script>

<template>
  <AdaptiveTable :table="table" :fields="fields" item-key="id" />
</template>

Above the mobile breakpoint this renders a table with sortable headers. Below it, the same fields render as a mobile layout — the field tagged title becomes the heading, subtitle the secondary line, everything else falls into the body. See Mobile layout for the two layouts this can switch to.

Try it below — this is the exact code above, running:

Ada Lovelace

Paid

€128.50Jul 1, 2026

Alan Turing

Pending

€64.00Jul 3, 2026

Grace Hopper

Paid

€212.75Jul 5, 2026

Margaret Hamilton

Refunded

€45.00Jul 8, 2026

Styling

The component ships unstyled by default (semantic <table>/<article> markup with BEM-ish class names, no visual opinion). A ready-to-use Material-ish stylesheet is available as an opt-in import — the demo above uses it:

import 'v0-adaptive-table/style.css'

See Styling for the CSS variables it exposes and how to bring your own design system instead.

Next steps

• Field configuration — the full shape of AdaptiveField and what each option controls.
• Mobile layout — stacked cards vs. an expandable list, and when to reach for each.
• Extension points — slots for a fully custom cell or card render.