Data Table

Powerful table with sorting, filtering, and column visibility — TanStack Table (web) with platform equivalents.

Invoice	Customer	Amount ↑	Status
INV-004	John Doe	$95	failed
INV-002	Alex Kim	$120	pending
INV-001	Sarah Chen	$250	paid
INV-003	Mai Tran	$480	paid

Installation

npm

npx @galaxy-stack/nebula-cli@latest add data-table

Features

• ✅ TanStack Table core — headless, framework-agnostic logic
• ✅ Column sorting — click headers to toggle direction
• ✅ Filtering & pagination — built-in helpers
• ✅ Status badges — pair with Badge component

Usage

Vue

<script setup>
import { DataTable } from '@/components/ui/data-table'
import { columns } from './columns'
</script>

<template>
  <DataTable :columns="columns" :data="data" />
</template>

React

import { DataTable } from "@/components/ui/data-table"
import { columns } from "./columns"

<DataTable columns={columns} data={data} />

Platform Availability

Framework	Status
React	✅ Complete (@tanstack/react-table)
Vue	✅ Complete (@tanstack/vue-table)
Angular	✅ Complete
React Native	❌ Web only
Flutter	❌ Web only