# Data Display

> Tables, badges, avatars, and data presentation components.

*Canonical: https://makerkit.dev/docs/tanstack-drizzle/ui-components/data-display*

---

Components for displaying data, user information, and status indicators.

## Table

Basic table for structured data.

```typescript
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@kit/ui/table';
```

```tsx
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>john@example.com</TableCell>
      <TableCell>Active</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

## Data Table

Advanced table with sorting, filtering, and pagination using TanStack Table.

```typescript
import { DataTable } from '@kit/ui/data-table';
```

```tsx
import { ColumnDef } from '@tanstack/react-table';

const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
  {
    accessorKey: 'status',
    header: 'Status',
  },
];

<DataTable
  data={users}
  columns={columns}
  pageIndex={0}
  pageSize={10}
  pageCount={totalPages}
/>
```

### With Pagination Callbacks

```tsx
<DataTable
  data={users}
  columns={columns}
  pageIndex={page}
  pageSize={10}
  pageCount={totalPages}
  onPaginationChange={(pagination) => {
    setPage(pagination.pageIndex);
  }}
/>
```

## Badge

Small label for status or categories.

```typescript
import { Badge } from '@kit/ui/badge';
```

```tsx
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>
```

## Avatar

User avatar with image and fallback.

```typescript
import { Avatar, AvatarImage, AvatarFallback } from '@kit/ui/avatar';
```

```tsx
<Avatar>
  <AvatarImage src="/avatar.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>
```

## Profile Avatar

Avatar component with automatic initials fallback.

```typescript
import { ProfileAvatar } from '@kit/ui/profile-avatar';
```

```tsx
{/* With image */}
<ProfileAvatar
  displayName="John Doe"
  pictureUrl="/avatar.jpg"
/>

{/* Initials fallback */}
<ProfileAvatar
  displayName="John Doe"
/>

{/* Single letter */}
<ProfileAvatar text="J" />
```

## Empty State

Placeholder for empty content areas.

```typescript
import { EmptyState, EmptyStateHeading, EmptyStateText, EmptyStateButton } from '@kit/ui/empty-state';
```

```tsx
<EmptyState>
  <EmptyStateHeading>No items found</EmptyStateHeading>
  <EmptyStateText>
    Get started by creating your first item.
  </EmptyStateText>
  <EmptyStateButton>Create Item</EmptyStateButton>
</EmptyState>
```

### With Icon

```tsx
import { EmptyMedia } from '@kit/ui/empty-state';
import { Inbox } from 'lucide-react';

<EmptyState>
  <EmptyMedia variant="icon">
    <Inbox />
  </EmptyMedia>
  <EmptyStateHeading>No messages</EmptyStateHeading>
  <EmptyStateText>Your inbox is empty.</EmptyStateText>
</EmptyState>
```

## Skeleton

Loading placeholder animation.

```typescript
import { Skeleton } from '@kit/ui/skeleton';
```

```tsx
{/* Text skeleton */}
<Skeleton className="h-4 w-48" />

{/* Avatar skeleton */}
<Skeleton className="h-12 w-12 rounded-full" />

{/* Card skeleton */}
<div className="space-y-2">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</div>
```

## Chart

Chart components using Recharts.

```typescript
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@kit/ui/chart';
```

```tsx
import { Bar, BarChart, XAxis, YAxis } from 'recharts';

const chartConfig = {
  value: {
    label: 'Value',
    color: 'hsl(var(--primary))',
  },
};

<ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <XAxis dataKey="name" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="value" fill="var(--color-value)" />
  </BarChart>
</ChartContainer>
```

---

**Next:** [Feedback & Loading →](./feedback-and-loading)