Preview

Name	Role	Status
Jane Doe	Designer	Active
Carlos Mendes	Engineer	Active
Aisha Khan	PM	Invited
Liam Walker	Engineer	Active

Code

<%- include('modules/ui/AdvancedDataTable', {
  columns: [
    { key: 'name',   header: 'Name' },
    { key: 'role',   header: 'Role' },
    { key: 'status', header: 'Status' }
  ],
  rows: [
    { name: 'Jane Doe',      role: 'Designer', status: 'Active' },
    { name: 'Carlos Mendes', role: 'Engineer', status: 'Active' },
    { name: 'Aisha Khan',    role: 'PM',       status: 'Invited' }
  ]
}) %>

Preview

2 of 4 rows selected

Name	Role	Status
Jane Doe	Designer	Active
Carlos Mendes	Engineer	Active
Aisha Khan	PM	Invited
Liam Walker	Engineer	Active

Code

<%- include('modules/ui/AdvancedDataTable', {
  selectable: true,
  columns: [...],
  rows: [...]
}) %>

Preview

Name	Role	Status
Jane Doe	Designer	Active
Carlos Mendes	Engineer	Active
Aisha Khan	PM	Invited
Liam Walker	Engineer	Active

Code

<%- include('modules/ui/AdvancedDataTable', {
  columns: [...],
  rows: [
    { name: 'Jane Doe', role: 'Designer', status: 'Active',
      _expanded: 'Joined in 2023. Platform working group.' },
    { name: 'Carlos Mendes', role: 'Engineer', status: 'Active' }
  ]
}) %>

Preview

Name	Role	Status
Jane Doe 1	Designer	Active
Carlos Mendes 2	Engineer	Active
Aisha Khan 3	PM	Invited
Liam Walker 4	Engineer	Active
Jane Doe 5	Designer	Active
Carlos Mendes 6	Engineer	Active
Aisha Khan 7	PM	Invited
Liam Walker 8	Engineer	Active

Code

<%- include('modules/ui/AdvancedDataTable', {
  selectable: true,
  stickyHeader: true,
  columns: [...],
  rows: [...]
}) %>

AdvancedDataTable

Basic (no extras)

Selectable rows

Expandable rows

Selectable + sticky header