Table

A responsive table component.

Import

import { Table } from '@akitectio/aki-ui'

Basic Usage

InvoiceStatusMethodAmount
INV001
Paid
Credit Card
$250.00
INV002
Pending
PayPal
$150.00
INV003
Unpaid
Bank Transfer
$350.00
INV004
Paid
Credit Card
$450.00
INV005
Paid
PayPal
$550.00
const invoices = [
  {
    invoice: "INV001",
    paymentStatus: "Paid",
    totalAmount: "$250.00",
    paymentMethod: "Credit Card",
  },
  // ... more data
];

<div className="rounded-md border">
  <Table>
    <thead>
      <tr className="border-b">
        <th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
          Invoice
        </th>
        <th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
          Status
        </th>
        <th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
          Method
        </th>
        <th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
          Amount
        </th>
      </tr>
    </thead>
    <tbody>
      {invoices.map((invoice) => (
        <tr key={invoice.invoice} className="border-b">
          <td className="p-4 align-middle">
            <div className="font-medium">{invoice.invoice}</div>
          </td>
          <td className="p-4 align-middle">
            <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium">
              {invoice.paymentStatus}
            </div>
          </td>
          <td className="p-4 align-middle">
            {invoice.paymentMethod}
          </td>
          <td className="p-4 align-middle">
            <div className="font-medium">{invoice.totalAmount}</div>
          </td>
        </tr>
      ))}
    </tbody>
  </Table>
</div>

Simple Table

NameAgeRole
John Doe30Developer
Jane Smith25Designer
Bob Johnson35Manager
<Table>
  <thead>
    <tr>
      <th className="text-left p-2">Name</th>
      <th className="text-left p-2">Age</th>
      <th className="text-left p-2">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td className="p-2">John Doe</td>
      <td className="p-2">30</td>
      <td className="p-2">Developer</td>
    </tr>
    <tr>
      <td className="p-2">Jane Smith</td>
      <td className="p-2">25</td>
      <td className="p-2">Designer</td>
    </tr>
    <tr>
      <td className="p-2">Bob Johnson</td>
      <td className="p-2">35</td>
      <td className="p-2">Manager</td>
    </tr>
  </tbody>
</Table>