Table

shellui add table

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>john@example.com</TableCell>
      <TableCell>Admin</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Jane Smith</TableCell>
      <TableCell>jane@example.com</TableCell>
      <TableCell>User</TableCell>
    </TableRow>
  </TableBody>
</Table>

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    @foreach (var user in users)
    {
      <TableRow>
        <TableCell>@user.Name</TableCell>
        <TableCell>@user.Email</TableCell>
        <TableCell>
          <Badge Variant="BadgeVariant.Secondary">@user.Role</Badge>
        </TableCell>
      </TableRow>
    }
  </TableBody>
</Table>

@code {
    private List<UserModel> users = new()
    {
        new() { Name = "Alice Johnson", Email = "alice@example.com", Role = "Admin" },
        new() { Name = "Bob Wilson",    Email = "bob@example.com",   Role = "User" }
    };

    private class UserModel
    {
        public string Name { get; set; } = "";
        public string Email { get; set; } = "";
        public string Role { get; set; } = "";
    }
}

<Table Class="w-full">
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
      <TableHead Class="text-right">Actions</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Alice Johnson</TableCell>
      <TableCell><Badge>Active</Badge></TableCell>
      <TableCell Class="text-right">
        <Button Variant="ButtonVariant.Outline" Size="ButtonSize.Sm">Edit</Button>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

<div class="overflow-x-auto">
  <Table>
    <!-- wide table content -->
  </Table>
</div>