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"
  :counts="[10, 25, 50]"
  :count="10"
  :pages="totalPages"
  :current-page="page"
  :total="totalRows"
  @change="handleTableChange"
/>

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 },
    ],
  };
}

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.
countChange	Number	Emits when page size changes.
pageChange	Number	Emits when page changes.
checkedRow	Array	Emits selected row keys.
selectedRow	Number | null	Emits on row expansion.
<actionEvent>	Object	Custom action events emitted from action menu items.

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).