Table

Data table with sorting, pagination, selection, loading, and error states.

Open in Storybook

Interactive Demo

John Doe

john@example.com

Active

Jane Smith

jane@example.com

Pending

Alex Brown

alex@example.com

Active

Sarah Wilson

sarah@example.com

Inactive

Usage

vue

<script setup>
import { Table } from '@yellowcard/b2b-design-system';

const columns = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'email', label: 'Email' },
  { key: 'status', label: 'Status' },
];

const rows = [
  { name: 'John Doe', email: 'john@example.com', status: 'Active' },
  { name: 'Jane Smith', email: 'jane@example.com', status: 'Pending' },
];
</script>

<template>
  <Table :columns="columns" :rows="rows" hoverable />
</template>

API Reference

Props

Prop	Type	Default	Description
`columns`*	`Column[]`	—	Column definitions with key, label, sortable
`rows`*	`object[]`	—	Row data array
`showHeader`	`boolean`	`true`	Show table header
`hoverable`	`boolean`	`false`	Highlight rows on hover
`selectable`	`boolean`	`false`	Enable row selection
`selectedRows`	`array`	—	Currently selected rows
`pagination`	`boolean`	`false`	Enable pagination
`currentPage`	`number`	—	Current page number
`rowsPerPage`	`number`	—	Rows per page
`totalItems`	`number`	—	Total item count for server pagination
`localSort`	`boolean`	`true`	Sort locally vs emit events
`sortBy`	`string`	—	Current sort column key
`sortOrder`	`'asc' \| 'desc'`	—	Sort direction
`loading`	`boolean`	`false`	Loading state
`error`	`boolean`	`false`	Error state
`emptyStateMessage`	`string`	—	Message when no rows
`compact`	`boolean`	`false`	Compact row spacing

Events

Event	Payload	Description
`update:currentPage`	`number`	Page changed
`update:selectedRows`	`object[]`	Selection changed
`sort`	`{ key: string, order: string }`	Sort requested
`row-click`	`object`	Row clicked

Table ​

Interactive Demo ​

Usage ​

API Reference ​

Props ​

Events ​