Table

A table component for displaying tabular data with sorting support.

Installation

npm install fuyukaki-ui

Usage

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from 'fuyukaki-ui'

function App() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Item 1</TableCell>
          <TableCell>Active</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

Basic Example

A list of recent invoices.
Invoice
Status
Method
Amount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00

With Selection

Name
Email
Role
John Doejohn@example.comAdmin
Jane Smithjane@example.comUser
Bob Johnsonbob@example.comUser

Props

ComponentPropType
Tablevariant'default' | 'striped'
Tablesize'sm' | 'md' | 'lg'
TableRowselectedboolean
TableHeadsortableboolean
TableHeadsortDirection'asc' | 'desc' | undefined
TableHeadonSort() => void