Data Table

Enterprise data table with search, sorting, selection, and pagination.

Preview · Data Table

Code

HTML · @primus/ui-core

<div class="table">
  <table class="striped">
    <thead><tr><th aria-sort="ascending">Tenant</th><th>Plan</th><th>Status</th><th>MRR</th></tr></thead>
    <tbody>
      <tr><td>Acme Corp</td><td>Enterprise</td><td><span class="badge success">Active</span></td><td>$12,000</td></tr>
      <tr><td>Globex Inc</td><td>Pro</td><td><span class="badge warning">Trial</span></td><td>$499</td></tr>
      <tr><td>Initech</td><td>Starter</td><td><span class="badge danger">Suspended</span></td><td>—</td></tr>
    </tbody>
  </table>
</div>

React

import { PrimusDataTable } from 'primus-react-ui';

const columns = [
  { key: 'name', header: 'Tenant', sortable: true },
  { key: 'plan', header: 'Plan' },
  { key: 'status', header: 'Status' },
  { key: 'mrr', header: 'MRR' },
];

<PrimusDataTable columns={columns} data={rows} rowKey="id"
  selectable searchable paginated pageSize={10} />

Angular

<primus-data-table [columns]="columns" [data]="data"
  rowKey="id" [selectable]="true" [searchable]="true"
  [paginated]="true" [pageSize]="10"
  (onRowClick)="onRow($event)">
</primus-data-table>

Props

Prop	Type	Default	Description
data	T[]	required	Row data array
columns	Column<T>[]	required	Column definitions
rowKey	keyof T	'id'	Unique row key field
selectable	boolean	false	Show row selection checkboxes
selectedKeys	string[]	[]	Controlled selected row keys
searchable	boolean	true	Show search input above table
searchPlaceholder	string	'Search...'	Search input placeholder
paginated	boolean	false	Enable client-side pagination
pageSize	number	10	Rows per page when paginated
pageIndex	number	0	Controlled page index
loading	boolean	false	Show overlay spinner on the table
emptyMessage	string	'No results'	Message shown when data is empty
onRowClick / (onRowClick)	(row: T) => void	—	Fires when a row is clicked
onSelectionChange / (onSelectionChange)	(keys: string[]) => void	—	Fires when selection changes
onPageChange / (onPageChange)	(page: number) => void	—	Fires when page changes

TypeScript interfaces

interface Column<T> {
  key:       keyof T | string;              // Data key or unique identifier
  header:    string;                         // Column heading text
  sortable?: boolean;                        // Enable click-to-sort
  width?:    string;                         // Column width e.g. '120px' or '15%'
  align?:    'left' | 'center' | 'right';   // Cell text alignment
  render?:   (row: T) => React.ReactNode;   // Custom cell renderer (React)
  // Angular: use a template ref via [cellTemplate] input
}

// Example usage
interface Tenant {
  id:     string;
  name:   string;
  plan:   'starter' | 'pro' | 'enterprise';
  status: 'active' | 'trial' | 'suspended';
  mrr:    number;
}

const columns: Column<Tenant>[] = [
  { key: 'name',   header: 'Tenant', sortable: true },
  { key: 'plan',   header: 'Plan' },
  { key: 'status', header: 'Status',
    render: (row) => <Badge variant={row.status === 'active' ? 'success' : 'warning'}>{row.status}</Badge> },
  { key: 'mrr',    header: 'MRR', align: 'right',
    render: (row) => `$${row.mrr.toLocaleString()}` },
];

Version history

See the Changelog for version history and breaking changes.