Table

A flexible table component for displaying structured data with customizable columns and styling options.

Basic Usage

Name Email Role
John Doe [email protected] Admin
Jane Smith [email protected] User
Bob Johnson [email protected] Editor
dart
1
2
3
4
5
6
7
8
9
10
11
12
DTable<Map<String, String>>(
  columns: [
    DTableColumn(key: 'name', label: 'Name'),
    DTableColumn(key: 'email', label: 'Email'),
    DTableColumn(key: 'role', label: 'Role'),
  ],
  data: [
    {'name': 'John Doe', 'email': '[email protected]', 'role': 'Admin'},
    {'name': 'Jane Smith', 'email': '[email protected]', 'role': 'User'},
    {'name': 'Bob Johnson', 'email': '[email protected]', 'role': 'Editor'},
  ],
)

Striped

Name Email Role
John Doe [email protected] Admin
Jane Smith [email protected] User
Bob Johnson [email protected] Editor
dart
1
2
3
4
5
DTable<Map<String, String>>(
  columns: [...],
  data: [...],
  striped: true,
)

Bordered

Name Email Role
John Doe [email protected] Admin
Jane Smith [email protected] User
Bob Johnson [email protected] Editor
dart
1
2
3
4
5
DTable<Map<String, String>>(
  columns: [...],
  data: [...],
  bordered: true,
)

Hoverable

Name Email Role
John Doe [email protected] Admin
Jane Smith [email protected] User
Bob Johnson [email protected] Editor
dart
1
2
3
4
5
DTable<Map<String, String>>(
  columns: [...],
  data: [...],
  hoverable: true, // Enabled by default
)

Custom Cell Rendering

Name Email Role Actions
John Doe [email protected] Admin
Jane Smith [email protected] User
Bob Johnson [email protected] Editor
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
DTable<Map<String, String>>(
  columns: [
    DTableColumn(key: 'name', label: 'Name'),
    DTableColumn(key: 'email', label: 'Email'),
    DTableColumn<Map<String, String>>(
      key: 'role',
      label: 'Role',
      render: (item) => DBadge(
        label: item['role'] ?? '',
        color: item['role'] == 'Admin'
          ? DBadgeColor.primary
          : DBadgeColor.secondary,
      ),
    ),
    DTableColumn<Map<String, String>>(
      key: 'actions',
      label: 'Actions',
      render: (item) => div(classes: 'flex gap-2', [
        DButton(label: 'Edit', size: DButtonSize.xs, variant: DButtonVariant.ghost),
        DButton(label: 'Delete', size: DButtonSize.xs, variant: DButtonVariant.ghost, color: DButtonColor.error),
      ]),
    ),
  ],
  data: [...],
)

Empty State

Name Email Role

No data available
dart
1
2
3
4
5
6
7
8
DTable<Map<String, String>>(
  columns: [...],
  data: [],
  emptyState: div(classes: 'text-center py-8', [
    DIcon(name: DIconNames.database, size: DIconSize.lg, color: 'text-zinc-500'),
    p(classes: 'mt-2 text-zinc-500', [Component.text('No data available')]),
  ]),
)

Column Styling

ID Name Email Role
1 John Doe [email protected] Admin
2 Jane Smith [email protected] User
3 Bob Johnson [email protected] Editor
dart
1
2
3
4
5
6
7
8
9
DTable<Map<String, String>>(
  columns: [
    DTableColumn(key: 'id', label: 'ID', className: 'w-16'),
    DTableColumn(key: 'name', label: 'Name', className: 'font-medium'),
    DTableColumn(key: 'email', label: 'Email'),
    DTableColumn(key: 'role', label: 'Role', className: 'text-right'),
  ],
  data: [...],
)

Complete Example

# User Role
1
Admin
2

Jane Smith

[email protected]

 User
3

Bob Johnson

[email protected]

 Editor
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
DTable<Map<String, String>>(
  columns: [
    DTableColumn(key: 'id', label: '#', className: 'w-12'),
    DTableColumn<Map<String, String>>(
      key: 'name',
      label: 'User',
      render: (item) => div(classes: 'flex items-center gap-3', [
        DAvatar(src: 'https://i.pravatar.cc/40?u=${item['id']}', size: DAvatarSize.sm),
        div([
          p(className: 'font-medium', [Component.text(item['name'] ?? '')]),
          p(classes: 'text-sm text-gray-500', [Component.text(item['email'] ?? '')]),
        ]),
      ]),
    ),
    DTableColumn<Map<String, String>>(
      key: 'role',
      label: 'Role',
      render: (item) => DBadge(
        label: item['role'] ?? '',
        variant: DBadgeVariant.soft,
      ),
    ),
    DTableColumn<Map<String, String>>(
      key: 'actions',
      label: '',
      render: (item) => DButton(label: 'View', size: DButtonSize.xs),
    ),
  ],
  data: [...],
  striped: true,
  hoverable: true,
)

API Reference

DTable

Prop Type Default Description
columns List<DTableColumn<T>> required Column definitions
data List<T> required Data rows to display
rowKey String Function(T)? null Function to get unique row key
striped bool false Alternate row background colors
hoverable bool true Highlight row on hover
bordered bool false Add border around table
emptyState Component? null Content shown when data is empty

DTableColumn

Prop Type Default Description
key String required Data property key
label String required Column header text
render Component Function(T)? null Custom cell renderer
className String? null CSS classes for column cells