Table

Tabular data display with base formatting and alignment.

Overview

The Table component is a core building block of the Byteion design system, providing a robust, accessibility-compliant interface for its specific UI capabilities.

Why this exists

Tables are the primary way to display and compare structured data. A well-designed table makes scanning, sorting, and acting on data efficient.

Mental model

A table is a grid of rows and columns for structured data. Headers define categories, rows are records, and cells are values. Actions are per-row.

When to use

• User, product, or order lists • Financial data and comparisons • Settings with multiple entries • Any structured data with 5+ rows

When not to use

• Do not use for layout — use CSS grid or flex • Avoid for non-tabular data — use cards or lists • Do not use for single-item display — use a detail view

Basic example

The following example demonstrates standard usage, fully compliant with Byteion's token-first approach.

#	Product	Category	Price	Stock	Status
1	MacBook Pro 14"	Laptops	$1,599.00	24	In Stock
2	iPhone 15 Pro	Smartphones	$1,099.00	18	In Stock
3	AirPods Pro	Accessories	$249.00	42	In Stock
4	iPad Air	Tablets	$599.00	12	Low Stock
5	Apple Watch Series 9	Wearables	$399.00	0	Out of Stock

User	Email	Role	Joined
JC Jane Cooper	jane@example.com	Admin	May 12, 2024
JS John Smith	john@example.com	Editor	May 10, 2024
EH Esther Howard	esther@example.com	Viewer	May 8, 2024
CW Cameron Williamson	cameron@example.com	Editor	May 5, 2024

Service	Plan	Price	Users	Storage
Cloud Storage	Basic	$5 /mo	1	10 GB
Cloud Storage	Pro	$15 /mo	5	100 GB
Cloud Storage	Business	$49 /mo	20	1 TB

Project	Owner	Status
Atlas	Jane Cooper	Active
Helios	John Smith	Active
Phoenix	Esther Howard	Pending
Orion	Cameron Williamson	Inactive

Task	Assignee	Due Date
Design landing page	Jane Cooper	May 20, 2024
Build UI components	John Smith	May 22, 2024
Setup database	Esther Howard	May 25, 2024
Testing & QA	Cameron Williamson	May 28, 2024

Invoice	Customer	Amount	Status
No records found There is no data to display right now.

Invoice	Customer	Amount	Status
INV-1001	Acme Corp.	$1,250.00	Paid
INV-1002	Globex Inc.	$2,540.00	Pending
INV-1003	Soylent Corp.	$980.00	Paid

import { Table, TableHead, TableBody, TableRow, TableHeaderCell, TableCell, Badge } from '@byteion/react';

const rows = [
  { id: 1, name: 'Ada Lovelace',   role: 'Engineer',   status: 'active' },
  { id: 2, name: 'Linus Torvalds', role: 'Maintainer', status: 'active' },
  { id: 3, name: 'Grace Hopper',   role: 'Admiral',    status: 'invited' },
];

export default function TableDemo() {
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeaderCell>Name</TableHeaderCell>
          <TableHeaderCell>Role</TableHeaderCell>
          <TableHeaderCell>Status</TableHeaderCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {rows.map((r) => (
          <TableRow key={r.id}>
            <TableCell>{r.name}</TableCell>
            <TableCell>{r.role}</TableCell>
            <TableCell>
              <Badge tone={r.status === 'active' ? 'success' : 'warning'}>{r.status}</Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

<script setup lang="ts">
import { Table, TableHead, TableBody, TableRow, TableHeaderCell, TableCell, Badge } from '@byteion/vue';

const rows = [
  { id: 1, name: 'Ada Lovelace',   role: 'Engineer',   status: 'active' },
  { id: 2, name: 'Linus Torvalds', role: 'Maintainer', status: 'active' },
  { id: 3, name: 'Grace Hopper',   role: 'Admiral',    status: 'invited' },
];
</script>

<template>
  <Table>
    <TableHead>
      <TableRow>
        <TableHeaderCell>Name</TableHeaderCell>
        <TableHeaderCell>Role</TableHeaderCell>
        <TableHeaderCell>Status</TableHeaderCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow v-for="r in rows" :key="r.id">
        <TableCell>{{ r.name }}</TableCell>
        <TableCell>{{ r.role }}</TableCell>
        <TableCell>
          <Badge :tone="r.status === 'active' ? 'success' : 'warning'">{{ r.status }}</Badge>
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
</template>

Variants

Each variant communicates a different meaning. Choose based on priority, not aesthetics.

Single default variant.

Sizes

Size should match the importance and context of the component.

md — md size.

States

This component reacts seamlessly to the following interaction and data states:

default — Resting appearance before interaction.
hover — Pointer is over the element — visual feedback via color or shadow.
focus — Keyboard or tab focus — shows ring indicator for accessibility.
active — Currently selected or in use.
disabled — Non-interactive — grayed out, cursor not-allowed.

Anatomy

• Header row — column labels, sortable • Body rows — data records • Cells — individual values • Row actions — edit, delete, view • Footer — pagination or summary

Usage guidelines

Left-align text, right-align numbers.
Use zebra striping for readability.
Collapse row actions into a dropdown if more than 2.

Do and Don't

Do

Align text left, numbers right.
Use striped rows for long tables.
Collapse excess row actions.

Don't

Do not use for layout.
Do not wrap long text without truncation.
Do not show more than 2 row actions inline.

Accessibility

Uses <table>, <thead>, <tbody>. Sortable headers use aria-sort.

Role:table

Customization

Border and hover-row colors follow table tokens.

Compose with React cva()

Use the exportedcva() +cn() utilities to compose your own variant on top of the Byteion tokens.

import { cva, cn, type VariantProps } from '@byteion/react';

const myTable = cva('base classes…', {
 variants: {
  accent: { soft:'border-primary-200', loud:'border-primary-500' },
 },
 defaultVariants: { accent:'soft' },
});

type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof myTable>;

Compose with Vue cva()

Use the exportedcva() +cn() utilities inside standard Vue setup blocks.

<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { cva, type VariantProps } from '@byteion/vue';

interface Props { accent?:'soft' |'loud' }
const props = withDefaults(defineProps<Props>(), { accent:'soft' });
const attrs = useAttrs();

const myTable = cva('base classes…', {
  variants: { accent: { soft:'border-primary-200', loud:'border-primary-500' } },
});

const cls = computed(() => myTable({ accent: props.accent, class: attrs.class as string | undefined }));
</script>

Runtime events

Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.

HTML / JS events

No HTML runtime events are declared by this adapter.

React callbacks

No React callback events are declared by this adapter.

Vue emits

No Vue emitted events are declared by this adapter.

Remote / AJAX

This component does not implement Byteion JS remote loading. Use normal HTML form submission, framework state, or your application data layer around it.

API Reference

Static HTML. Sorting and pagination controlled by server or JS.

HTML Data Attributes

No custom data attributes required.

React Props · TableProps

Extracted directly fromreact/src/components/Table.tsx.

export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
  /** Alternate-row background. */
  striped?: boolean;
  /** Per-cell borders. */
  bordered?: boolean;
  /** Wrap the table in a horizontal-scroll container with a rounded border. */
  wrapped?: boolean;
}

Vue Props · TableProps

Extracted directly fromvue/src/components/Table.vue.

export interface TableProps {
  striped?: boolean;
  bordered?: boolean;
  wrapped?: boolean;
}

Developer tips

• Keep display-only tables simple — move advanced behavior to DataTable. • Keep sort, filter, and pagination state close to the data query. • Preserve filters and sorting when users navigate between pages of results. • Convert backend values into display-ready values before rendering cells (format dates, currency, enums). • Avoid rendering hundreds of rows at once — use Pagination or DataTable with server-side paging. • Keep row actions consistent across similar tables in the same product area. • Use Empty State and Skeleton inside the table wrapper when data is loading or absent.

Common mistakes

Using tables for page layout — use Grid or Flex.
Not using <th scope="col"> — screen readers cannot associate cells with headers.
Not right-aligning numeric, currency, and percentage values.
Showing too many row actions inline — collapse into a dropdown when there are more than two.
Hiding important data on small screens without a detail view or responsive fallback.
Using basic Table when the screen needs sorting, filtering, pagination, and selection — use DataTable.
Forgetting empty, loading, and error states around the table surface.
Losing filter or sort state when paginating.
Using raw colors or arbitrary borders instead of Byteion tokens.

Production usage tips

Test with empty data, loading state (Skeleton rows), error state, one row, many rows, and long cell values.
Test horizontal scroll on small screens — the wrapped default handles this, but verify with wide datasets.
Test dark mode and branded themes — semantic tokens handle this automatically.
Test row actions with keyboard navigation — every icon button must be focusable and activatable.
For Laravel or server-rendered apps, use normal links or forms for row actions and query parameters for sorting and pagination.
For React or Vue SPAs, keep table state in component state, a store, or router query parameters.
For large datasets, use server-side pagination with Pagination or DataTable.
Keep Table, Pagination, Dropdown, Button, Badge, Empty State, and Skeleton visually aligned across the same product surface.

Premium examples

Advanced patterns available in Byteion Pro:

• Table with inline editing • Table with column resize and reorder • Table with sticky header and frozen columns • Table inside a Card with Pagination • Table with row action dropdown • Table with loading skeleton • Table with empty state • Server-rendered Laravel table • Responsive ecommerce orders table

DataTable — advanced table with sorting, filtering, pagination, selection
Card — container for tables with header and footer
Pagination — page controls below large tables
Dropdown — row action menus
Button — row action buttons
Badge — status indicators in cells
Empty State — empty data placeholder
Skeleton — loading placeholder rows
Checkbox — row selection

Unlock Premium Patterns

Get access to copy-paste ready Pro blocks, SaaS templates, and advanced data-tables built with this component.

Explore Pro Components