Table

A responsive table component for displaying tabular data.

Name	Email	Role	Status
John Doe	john@example.com	Admin	active
Jane Smith	jane@example.com	User	active
Bob Johnson	bob@example.com	User	inactive

Cài đặt

React

npx @galaxy-stack/nebula-cli add table

Vue

npx @galaxy-stack/nebula-cli add table

Angular

npx @galaxy-stack/nebula-cli add table

Usage

React

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
} from '@/components/table'

export default function TableDemo() {
  return (
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className="font-medium">INV001</TableCell>
          <TableCell>Paid</TableCell>
          <TableCell>Credit Card</TableCell>
          <TableCell className="text-right">$250.00</TableCell>
        </TableRow>
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell className="text-right">$2,500.00</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}

Vue

<script setup lang="ts">
import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
} from '@/components/table'
</script>

<template>
  <Table>
    <TableCaption>A list of your recent invoices.</TableCaption>
    <TableHeader>
      <TableRow>
        <TableHead>Invoice</TableHead>
        <TableHead>Status</TableHead>
        <TableHead>Method</TableHead>
        <TableHead class="text-right">Amount</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell class="font-medium">INV001</TableCell>
        <TableCell>Paid</TableCell>
        <TableCell>Credit Card</TableCell>
        <TableCell class="text-right">$250.00</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</template>

Angular

import { Component } from '@angular/core'
import {
  TableComponent,
  TableHeaderDirective,
  TableBodyDirective,
  TableRowDirective,
  TableHeadDirective,
  TableCellDirective,
  TableCaptionDirective,
} from '@/components/table'

@Component({
  selector: 'app-table-demo',
  standalone: true,
  imports: [
    TableComponent,
    TableHeaderDirective,
    TableBodyDirective,
    TableRowDirective,
    TableHeadDirective,
    TableCellDirective,
    TableCaptionDirective,
  ],
  template: `
    <ui-table>
      <caption uiTableCaption>A list of your recent invoices.</caption>
      <thead uiTableHeader>
        <tr uiTableRow>
          <th uiTableHead>Invoice</th>
          <th uiTableHead>Status</th>
          <th uiTableHead>Method</th>
          <th uiTableHead class="text-right">Amount</th>
        </tr>
      </thead>
      <tbody uiTableBody>
        <tr uiTableRow>
          <td uiTableCell class="font-medium">INV001</td>
          <td uiTableCell>Paid</td>
          <td uiTableCell>Credit Card</td>
          <td uiTableCell class="text-right">$250.00</td>
        </tr>
      </tbody>
    </ui-table>
  `
})
export class TableDemo {}

API Reference

Table Props

Prop	Type	Default	Mô tả	Frameworks
className	string	''	CSS class cho phần tử table	All
children	ReactNode	-	Nội dung composition của table	All

TableHeader Props

Prop	Type	Default	Mô tả	Frameworks
className	string	''	CSS class cho section header	All
children	ReactNode	-	Các hàng header	All

TableBody Props

Prop	Type	Default	Mô tả	Frameworks
className	string	''	CSS class cho section body	All
children	ReactNode	-	Các hàng body	All

TableFooter Props

Prop	Type	Default	Mô tả	Frameworks
className	string	''	CSS class cho section footer	All
children	ReactNode	-	Các hàng footer	All

TableRow Props

Prop	Type	Default	Mô tả	Frameworks
className	string	''	CSS class cho hàng	All
children	ReactNode	-	Các ô trong hàng	All

TableHead Props

Prop	Type	Default	Mô tả	Frameworks
className	string	''	CSS class cho ô header	All
children	ReactNode	-	Nội dung ô header	All

TableCell Props

Prop	Type	Default	Mô tả	Frameworks
className	string	''	CSS class cho ô	All
children	ReactNode	-	Nội dung ô	All

TableCaption Props

Prop	Type	Default	Mô tả	Frameworks
className	string	''	CSS class cho caption	All
children	ReactNode	-	Văn bản caption	All

Components

Table component bao gồm các sub-components:

• Table - Container wrapper chính với responsive
• TableHeader - Section header của table
• TableBody - Section body của table
• TableFooter - Section footer của table
• TableRow - Hàng của table với hiệu ứng hover
• TableHead - Ô header của table
• TableCell - Ô body của table
• TableCaption - Caption mô tả tùy chọn
• TableCaption - Table caption

Accessibility

• Uses semantic HTML table elements
• Proper heading structure with <thead> and <th>
• Caption provides context for screen readers

Tác giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)