Table

import {
  Table, TableHeader, TableBody, TableFooter,
  TableRow, TableHead, TableCell, TableCaption,
} from '@mihcm/ui/Table';
 
<Table>
  <TableCaption>A list of recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">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>
    <TableRow>
      <TableCell className="font-medium">INV002</TableCell>
      <TableCell>Pending</TableCell>
      <TableCell>PayPal</TableCell>
      <TableCell className="text-right">$150.00</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={3}>Total</TableCell>
      <TableCell className="text-right">$400.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>

import {
  Table, TableHeader, TableBody,
  TableRow, TableHead, TableCell,
} from '@mihcm/ui/Table';
 
const people = [
  { name: 'Aisha Kumari', role: 'Engineer', dept: 'Platform' },
  { name: 'Malik Chen', role: 'Designer', dept: 'Product' },
  { name: 'Sara Johansson', role: 'PM', dept: 'Growth' },
];
 
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Role</TableHead>
      <TableHead>Department</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {people.map((p, i) => (
      <TableRow key={p.name} className={i % 2 === 1 ? 'bg-muted/50' : ''}>
        <TableCell className="font-medium">{p.name}</TableCell>
        <TableCell>{p.role}</TableCell>
        <TableCell>{p.dept}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

<div className="max-h-[300px] overflow-auto rounded-md border">
  <Table>
    {/* ... many rows ... */}
  </Table>
</div>