Data Display Components

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

DataTable

Advanced table with sorting and filtering

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>
    <AvatarImage src="@user.AvatarUrl" />
    <AvatarFallback>@GetInitials(user.Name)</AvatarFallback>
  </Avatar>
  <div>
    <h3 class="font-medium">@user.Name</h3>
    <p class="text-sm text-muted-foreground">@user.Email</p>
  </div>
  <Badge Variant="secondary">@user.Role</Badge>
</div>

Status Messages

<Alert>
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>

Advanced Usage

Sortable DataTable

<DataTable Items="@users" Sortable="true" Filterable="true">
  <Column Title="Name" Field="Name" Sortable="true" />
  <Column Title="Email" Field="Email" Sortable="true" />
  <Column Title="Status" Field="Status" Sortable="true">
    <Badge Variant="@GetStatusVariant(context.Status)">@context.Status</Badge>
  </Column>
</DataTable>

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 -->
}