Table

import {
  Table,
  TableBody,
  TableCell,
  TableHeader,
  TableHeaderCell,
  TableRow,
} from "@optiaxiom/react/unstable";
 
import { data } from "./data";
 
export function App() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHeaderCell>First Name</TableHeaderCell>
          <TableHeaderCell>Last Name</TableHeaderCell>
          <TableHeaderCell>Company</TableHeaderCell>
          <TableHeaderCell>Address</TableHeaderCell>
        </TableRow>
      </TableHeader>
 
      <TableBody>
        {data.map((row) => (
          <TableRow key={row.id}>
            <TableCell>{row.firstName}</TableCell>
            <TableCell>{row.lastName}</TableCell>
            <TableCell>{row.company}</TableCell>
            <TableCell>{row.address}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

export const data = [
  {
    address: "123 Broad St.",
    company: "Acme, Inc.",
    firstName: "Fred",
    id: "1",
    lastName: "Jackson",
  },
  {
    address: "123 Broad St.",
    company: "Acme, Inc.",
    firstName: "Sara",
    id: "2",
    lastName: "James",
  },
  {
    address: "456 Main St.",
    company: "XYZ, Inc.",
    firstName: "Ralph",
    id: "3",
    lastName: "Jefferson",
  },
  {
    address: "456 Main St.",
    company: "XYZ, Inc.",
    firstName: "Nancy",
    id: "4",
    lastName: "Jensen",
  },
];