DataTable

Powerful data table with built-in sorting, filtering, and pagination using TanStack Table. Essential for dashboards and data display.

Installation

# Install @opencosmos/ui to use DataTable
pnpm add @opencosmos/ui

Preview

Loading preview...

Usage

Import

import { DataTable } from '@opencosmos/ui';

Example

<DataTable>
  Content
</DataTable>

Eject

Copy this component into your project for full customization

Accessibility

Built on TanStack Table with full accessibility support
Keyboard navigation through table cells
Sortable columns with keyboard activation
Pagination controls are keyboard accessible
Screen reader announces table structure and data

Code Examples

Basic Data Table

Data table with sorting and pagination

import { DataTable } from "@opencosmos/ui"
import { ColumnDef } from "@tanstack/react-table"

type Payment = {
  id: string
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
}

const columns: ColumnDef<Payment>[] = [
  {
    accessorKey: "status",
    header: "Status",
  },
  {
    accessorKey: "email",
    header: "Email",
  },
  {
    accessorKey: "amount",
    header: "Amount",
  },
]

const data: Payment[] = [
  {
    id: "1",
    amount: 100,
    status: "success",
    email: "user@example.com",
  },
  // ... more data
]

export function PaymentsTable() {
  return <DataTable columns={columns} data={data} />
}