Skip to main content

    Components

    Qwik M3 Table

    This component implements the Material Design 3 table with proper accessibility support. Tables allow displaying data in a structured grid format.

    Prop Controls

    Usage

    NameTitleEmailRoleStatus
    Lindsay WaltonFront-end Developerlindsay.walton@example.comMemberActive
    Courtney HenryDesignercourtney.henry@example.comAdminOffline
    Tom CookProduct Managertom.cook@example.comMemberActive
    
<Table.Root variant="surface" size="md">
  <Table.Header>
    <Table.Row>
      <Table.Head>Name</Table.Head>
      <Table.Head>Title</Table.Head>
      <Table.Head>Email</Table.Head>
      <Table.Head>Role</Table.Head>
      <Table.Head>Status</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    {people.map((person) => (
      <Table.Row key={person.id}>
        <Table.Cell>{person.name}</Table.Cell>
        <Table.Cell>{person.title}</Table.Cell>
        <Table.Cell>{person.email}</Table.Cell>
        <Table.Cell>{person.role}</Table.Cell>
        <Table.Cell>{person.status}</Table.Cell>
      </Table.Row>
    ))}
  </Table.Body>
</Table.Root>