Table

Display structured data in rows and columns. For sorting, search, and pagination use PrimusDataTable.

Preview · Table

Code

HTML · @primus/ui-core

<div class="table">
  <table>
    <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 { Table } from 'primus-react-ui';

const columns = [
  { key: 'name',   header: 'Tenant' },
  { key: 'plan',   header: 'Plan' },
  { key: 'status', header: 'Status' },
  { key: 'mrr',    header: 'MRR' },
];
const data = [
  { name: 'Acme Corp',  plan: 'Enterprise', status: 'Active', mrr: '$12,000' },
  { name: 'Globex Inc', plan: 'Pro',        status: 'Trial',  mrr: '$499' },
];

<Table columns={columns} data={data} striped />

Angular

<primus-data-table [columns]="columns" [data]="data"
  [searchable]="true" [paginated]="true" [pageSize]="10">
</primus-data-table>

Props

Prop	Type	Default	Description
columns	TableColumn[]	required	Column definitions
data	any[]	required	Row data
striped	boolean	false	Zebra rows
hoverable	boolean	true	Row hover

Version history

See the Changelog for version history and breaking changes.