Table

Tables are used to display sets of data. They can be fully customized with actions, filters, and more. This is a basic implementation for the MVP.

Props

Prop	Type	Description
headers	Array<string>	An array of strings for the table headers.
data	Array<object>	An array of objects where each object represents a row.
keys	Array<string>	An array of keys to access the data in each row object, corresponding to the headers.

Example

Basic Table

A simple table for displaying structured data. It's responsive and includes hover states for better user experience.

Invoice	Customer	Date	Amount	Status
INV-007	Acme Inc.	2023-10-25	$1,250.00	Paid
INV-006	Stark Industries	2023-10-22	$3,500.00	Pending
INV-005	Wayne Enterprises	2023-09-15	$800.00	Overdue
INV-004	Cyberdyne Systems	2023-09-01	$5,000.00	Paid

import Table from '@/components/Table';
import Badge from '@/components/Badge';

const invoices = [
  {
    invoice: 'INV-007',
    customer: 'Acme Inc.',
    date: '2023-10-25',
    amount: '$1,250.00',
    status: <Badge variant="success">Paid</Badge>,
  },
  // ... more data
];

const headers = ['Invoice', 'Customer', 'Date', 'Amount', 'Status'];
const keys = ['invoice', 'customer', 'date', 'amount', 'status'];

export default function MyComponent() {
  return (
    <Table 
      headers={headers} 
      data={invoices} 
      keys={keys} 
    />
  );
}