Tables | Pear

PTable

PTable is for static display tables. It keeps the markup semantic and lets Pico handle the table styling.

Basic

Pear component status
Component	Kind	Status
PButton	Action	Ready
PTable	Content	New
PFieldset	Forms	New

vue

<p-table
  caption="Pear component status"
  :columns="columns"
  :rows="rows"
  row-key="component"
/>

data.ts

import type { PTableColumn } from "@ontic/pear";

const columns: PTableColumn[] = [
  { key: "component", label: "Component", rowHeader: true },
  { key: "kind", label: "Kind" },
  { key: "status", label: "Status" },
];

const rows = [
  { component: "PButton", kind: "Action", status: "Ready" },
  { component: "PTable", kind: "Content", status: "New" },
  { component: "PFieldset", kind: "Forms", status: "New" },
];

Striped

Pear component status
Component	Kind	Status
PButton	Action	Ready
PTable	Content	New
PFieldset	Forms	New

vue

<p-table
  caption="Pear component status"
  :columns="columns"
  :rows="rows"
  row-key="component"
  striped
/>

data.ts

import type { PTableColumn } from "@ontic/pear";

const columns: PTableColumn[] = [
  { key: "component", label: "Component", rowHeader: true },
  { key: "kind", label: "Kind" },
  { key: "status", label: "Status" },
];

const rows = [
  { component: "PButton", kind: "Action", status: "Ready" },
  { component: "PTable", kind: "Content", status: "New" },
  { component: "PFieldset", kind: "Forms", status: "New" },
];

Cell Slots

Use #cell-{column.key} to customize any column. This example targets the status column.

Component	Kind	Status
PButton	Action	Ready
PTable	Content	New
PFieldset	Forms	New

vue

<p-table :columns="columns" :rows="rows" row-key="component">
  <template #cell-status="{ value }">
    <mark>{{ value }}</mark>
  </template>
</p-table>

data.ts

import type { PTableColumn } from "@ontic/pear";

const columns: PTableColumn[] = [
  { key: "component", label: "Component", rowHeader: true },
  { key: "kind", label: "Kind" },
  { key: "status", label: "Status" },
];

const rows = [
  { component: "PButton", kind: "Action", status: "Ready" },
  { component: "PTable", kind: "Content", status: "New" },
  { component: "PFieldset", kind: "Forms", status: "New" },
];

API

PTable Props

Name	Type	Default	Description
`columns`	`PTableColumn[]`	-	Column definitions.
`rows`	`PTableRow[]`	-	Rows to render.
`caption`	`string`	-	Optional table caption.
`striped`	`boolean`	false	Applies Pico's striped table style.
`scroll`	`boolean`	false	Wraps the table in a local horizontal scroller.
`rowKey`	`string \| function`	-	Stable key for each row.
`theme`	`'light' \| 'dark'`	-	Optional Pico data-theme value for the table.

PTable Slots

Name	Type	Default	Description
`header-{key}`	`slot`	-	Custom header content for a column.
`cell-{key}`	`slot`	-	Custom cell content for a column.
`footer`	`slot`	-	Optional tfoot rows.