Table

import { Table } from '@bedrock-ui/core';

Default

const rows = [
  { firstName: 'John', lastName: 'Smith', email: 'john.smith@example.com', status: 'Active' },
  { firstName: 'Jane', lastName: 'Jones', email: 'jane.jones@example.com', status: 'Inactive' },
  { firstName: 'Phil', lastName: 'Wolf', email: 'phil.wolf@example.com', status: 'Inactive' },
  { firstName: 'Derek', lastName: 'Rose', email: 'derek.rose@example.com', status: 'Active' },
];

<Table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    {rows.map((row, index) => (
      <tr key={index}>
        <td>{row.firstName}</td>
        <td>{row.lastName}</td>
        <td>{row.email}</td>
        <td>{row.status}</td>
      </tr>
    ))}
  </tbody>
</Table>

First Name	Last Name	Email	Status
John	Smith	john.smith@example.com	Active
Jane	Jones	jane.jones@example.com	Inactive
Phil	Wolf	phil.wolf@example.com	Inactive
Derek	Rose	derek.rose@example.com	Active

Fixed

const rows = [
  { firstName: 'John', lastName: 'Smith', email: 'john.smith@example.com', status: 'Active' },
  { firstName: 'Jane', lastName: 'Jones', email: 'jane.jones@example.com', status: 'Inactive' },
  { firstName: 'Phil', lastName: 'Wolf', email: 'phil.wolf@example.com', status: 'Inactive' },
  { firstName: 'Derek', lastName: 'Rose', email: 'derek.rose@example.com', status: 'Active' },
];

<Table fixed>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    {rows.map((row, index) => (
      <tr key={index}>
        <td>{row.firstName}</td>
        <td>{row.lastName}</td>
        <td>{row.email}</td>
        <td>{row.status}</td>
      </tr>
    ))}
  </tbody>
</Table>

First Name	Last Name	Email	Status
John	Smith	john.smith@example.com	Active
Jane	Jones	jane.jones@example.com	Inactive
Phil	Wolf	phil.wolf@example.com	Inactive
Derek	Rose	derek.rose@example.com	Active