Data display components help you present information in an organized, accessible, and visually appealing way. These components are essential for dashboards, data-heavy applications, and content management systems.

Overview

ShellUI provides a comprehensive set of data display components that handle everything from simple tables to complex data visualization, all built with performance and accessibility in mind.

Available Components

Table

Structured data presentation in rows and columns

Badge

Status indicators and labels

Avatar

User profile images and initials

Alert

Status messages and notifications

Toast

Non-intrusive notifications

Skeleton

Loading state placeholders

Progress

Progress indicators and bars

Loading

Loading spinners and indicators

Data Display Principles

Performance First

Components are optimized for large datasets with efficient rendering and virtualization options.

Accessibility

All components include proper ARIA labels, keyboard navigation, and screen reader support.

Responsive Design

Tables and data components adapt to different screen sizes with mobile-friendly layouts.

Type Safety

Full C# type safety with generic support for complex data structures.

Getting Started

# Add data display components
shellui add table badge avatar alert toast

Common Patterns

Basic Table

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

User Profile Cards

<div class="flex items-center space-x-4">
  <Avatar Src="@user.AvatarUrl" Fallback="@GetInitials(user.Name)" />
  <div>
    <h3 class="font-medium">@user.Name</h3>
    <p class="text-sm text-muted-foreground">@user.Email</p>
  </div>
  <Badge Variant="BadgeVariant.Secondary">@user.Role</Badge>
</div>

Status Messages

<Alert Title="Success!" Variant="AlertVariant.Default">
  Your changes have been saved successfully.
</Alert>

Advanced Usage

DataTable

<DataTable TItem="User" Items="@users" Columns="@columns" PageSize="10" />

@code {
    private List<User> users = new()
    {
        new("Ada Lovelace", "ada@example.com", "Active"),
        new("Alan Turing", "alan@example.com", "Invited"),
    };

    private List<DataTableColumn<User>> columns = new()
    {
        new() { Header = "Name", PropertyName = "Name", CellTemplate = u => @<span>@u.Name</span> },
        new() { Header = "Email", PropertyName = "Email", CellTemplate = u => @<span>@u.Email</span> },
        new() { Header = "Status", PropertyName = "Status", Sortable = false, CellTemplate = u => @<Badge>@u.Status</Badge> },
    };

    record User(string Name, string Email, string Status);
}

Columns are sortable by default, and ShowFilters, ShowPagination and ShowSelection control the toolbar. shellui add data-table also installs the models and the System.Linq.Dynamic.Core package.

Loading States

@if (loading)
{
  <div class="space-y-4">
    <Skeleton Class="h-4 w-[250px]" />
    <Skeleton Class="h-4 w-[200px]" />
    <Skeleton Class="h-4 w-[300px]" />
  </div>
}
else
{
  <!-- Your content -->
}

Data Display Components