Table

A flexible data table component for displaying structured data with support for sorting, selection, responsive design, and interactive rows.

Import#

import { Table } from "asheeui";

Usage#

"use client";

import { type ColumnDef, Table } from "asheeui";

interface User {
	name: string;
	age: number;
	email: string;
}

const columns: ColumnDef<User>[] = [
	{ header: "Name", cell: (row) => row.name },
	{ header: "Age", cell: (row) => row.age },
	{ header: "Email", cell: (row) => row.email },
];

const data: User[] = [
	{ name: "John Doe", age: 30, email: "john@example.com" },
	{ name: "Jane Smith", age: 25, email: "jane@example.com" },
];

export default function Basic() {
	return <Table columns={columns} data={data} />;
}

Examples#

Variant#

Size#

Radius#

With row selection#

Row selection color#

With interactive rows#

With custom row key accessor#

Empty state#

Custom empty message#

With custom cell rendering#

Custom styling#

With grid classes#

Props#

* Falls back through Global Configuration if not set. See below.

ColumnDef#

Global Configuration#

Table reads defaults from four places, in this order of precedence:

1. Instance prop: set directly on <Table />
2. Component config: components.table in your ashee.config
3. Theme default: defaultColor / defaultRadius in your ashee.config
4. Built-in fallback: component's internal default values

Component config#

// ashee.config.ts
import type { ExternalConfig } from "asheeui";

export const config: ExternalConfig = {
  components: {
    table: {
      size: "md",
      variant: "grid",
      color: "primary",
      radius: "md",
    },
  },
};

Built-in fallbacks#

{
  size: "md",
  variant: "grid",
  color: "primary",
  radius: "md",
}

Accessibility#

• Uses semantic <table>, <thead>, and <tbody> elements
• Header cells use scope="col"
• Interactive rows are keyboard accessible with Enter and Space keys
• Uses aria-selected for selected rows
• Implements focus-visible rings for keyboard navigation
• TabIndex management for interactive rows
• Empty state is conveyed properly to screen readers

Notes#

• Variant: grid adds borders between cells, striped alternates row backgrounds, bordered adds borders around the table, ghost removes all borders.
• Interactive Rows: When isClickable is true or click handlers are provided, rows become interactive with hover effects and keyboard support.
• Row Selection: Use selectedRowKey to highlight a specific row. The row's color is determined by the color prop.
• Empty State: The emptyMessage prop allows customization of the content displayed when data is empty.
• Row Key Accessor: For better performance with dynamic data, provide a rowKeyAccessor function to generate unique row keys.
• Sticky Header: The table header is sticky by default for better scrolling UX.