Table

Table

PTable renders data rows based on a column configuration. It supports sorting, pagination, grouped data, row actions, and selectable rows.

Demo

Usage

<PTable
  :columns="columns"
  :data="rows"
  :actions="actions"
  :counts="[10, 25, 50]"
  :count="10"
  :pages="totalPages"
  :current-page="page"
  :total="totalRows"
  @change="handleTableChange"
  @page-change="page = $event"
  @checked-row="checkedRows = $event"
  @action="handleTableAction"
/>

data() {
  return {
    columns: [
      { title: 'Name', name: 'name', type: 'text', sortable: true },
      { title: 'Status', name: 'status', type: 'text' },
      { title: 'Selected', type: 'checkbox', key: (row) => row.id },
    ],
    actions: [
      { title: 'Edit', event: 'edit' },
      { title: 'Archive', event: 'archive', type: 'warning' },
    ],
  };
}

Props

Prop	Type	Default	Notes
columns	Array	[]	Required column configuration.
data	Array | Object	—	Required list of row objects.
actions	Array | Object	[]	Action menu items for type: 'action' columns.
grouping	Array | Object	[]	Group header config (name, type, subset).
disableSorting	Boolean	false	Disables sorting.
sortOrder	String	''	asc or desc for controlled sorting.
sortBy	String	''	Column key for controlled sorting.
counts	Array	[]	Options for PCount.
count	Number	0	Selected count value.
pages	Number	0	Total number of pages.
currentPage	Number	0	Current page (1-based).
total	Number	0	Total number of rows.
checkedRows	Array	[]	Selected row keys for checkbox columns.
rowClass	Function	() => ''	Row class builder.
rowStyle	Function	() => ''	Row style builder.
tableClass	Function	() => ''	Extra table classes.
loading	Boolean	false	Shows table skeleton.
skeletonRows	Number	10	Number of skeleton rows.

Events

Event	Payload	Description
change	{ sort, count, currentPage }	Emits on sort/page/count changes.
count-change	Number	Emits when page size changes.
page-change	Number	Emits when page changes.
checked-row	Array	Emits selected row keys.
selected-row	Number | null	Emits on row expansion.
action	{ event, row, action }	Emits when an action item is clicked.

Slots

Slot	Description
<column.name>	Slot for custom cell rendering (type: 'slot').
extended	Expanded row content.
<grouping.name>	Slot used when grouping type is slot.

Column config

Columns are objects with title, name, and type. Supported type values:

• text, number, link, slot, checkbox, action

Optional properties include sortable, sortBy, align, hidden, hover, link, target, key (for checkbox).

Action handling

Define action menu items with an event key, then handle all action clicks through one listener:

<PTable
  :columns="columns"
  :data="rows"
  :actions="actions"
  @action="handleTableAction"
/>

methods: {
  handleTableAction({ event, row, action }) {
    if (event === 'edit') {
      this.editRow(row);
      return;
    }
    if (event === 'archive') {
      this.archiveRow(row);
    }
  },
}