PxDataTable

A responsive data table component built on native HTML <table>. Supports single/multiple row selection, expandable rows, skeleton loading states, striped rows, elegant empty states, and custom cell rendering via named slots.

Basic Usage

Demo

Name	Role	Status	Joined
Alice Johnson	Designer	Active	2023-01-15
Bob Smith	Engineer	Active	2022-07-20
Carol Williams	Product	Away	2023-03-08
David Brown	Engineer	Active	2021-11-30
Eva Martinez	Designer	Inactive	2024-01-01

Showing 1 to 5 of 5 items

Rows:102050

1 / 1

<script setup>
import { PxDataTable } from 'praxis-vue-ui'

const columns = [
  { field: 'name', header: 'Name' },
  { field: 'role', header: 'Role' },
  { field: 'status', header: 'Status' },
]

const items = [
  { id: 1, name: 'Alice Johnson', role: 'Designer', status: 'Active' },
  { id: 2, name: 'Bob Smith', role: 'Engineer', status: 'Active' },
]
</script>

<template>
  <PxDataTable :items="items" :columns="columns" />
</template>

Multiple Selection

Multiple Selection

	Name	Role	Status	Joined
	Alice Johnson	Designer	Active	2023-01-15
	Bob Smith	Engineer	Active	2022-07-20
	Carol Williams	Product	Away	2023-03-08
	David Brown	Engineer	Active	2021-11-30
	Eva Martinez	Designer	Inactive	2024-01-01

Showing 1 to 5 of 5 items

Rows:102050

1 / 1

Selected: None

<PxDataTable
  :items="items"
  :columns="columns"
  selection-mode="multiple"
  :selected-items="selectedItems"
  @selection-change="selectedItems = $event"
/>

Striped Rows & Skeleton Loading

Skeleton Loaders

Name	Role	Status	Joined

Showing 1 to 5 of 5 items

Rows:102050

1 / 1

<PxDataTable
  :items="items"
  :columns="columns"
  :striped-rows="true"
  :loading="true"
/>

Empty States (Icons)

Empty States

Name	Role	Status	Joined
No data found in your inbox

Name	Role	Status	Joined
No results match your search

<!-- Standard Empty State (Inbox Icon) -->
<PxDataTable
  :items="[]"
  :columns="columns"
  empty-message="No data found in your inbox"
/>

<!-- Search Empty State (Search Icon) -->
<PxDataTable
  :items="[]"
  :columns="columns"
  :is-searching="true"
  search-empty-message="No results match your search"
/>

Custom Cell Rendering

Use slotName on a column to render custom content in that cell:

<PxDataTable :items="items" :columns="columns">
  <template #status="{ data }">
    <span
      class="badge"
      :class="data.status === 'Active' ? 'badge-green' : 'badge-gray'"
    >
      {{ data.status }}
    </span>
  </template>
</PxDataTable>

Define slotName on the column definition:

const columns = [
  { field: 'name', header: 'Name' },
  { field: 'status', header: 'Status', slotName: 'status' },
]

Export to Excel & CSV

Exportable Table

Team Directory

5

	Name	Role	Status	Joined
	Alice Johnson	Designer	Active	2023-01-15
	Bob Smith	Engineer	Active	2022-07-20
	Carol Williams	Product	Away	2023-03-08
	David Brown	Engineer	Active	2021-11-30
	Eva Martinez	Designer	Inactive	2024-01-01

Showing 1 to 5 of 5 items

Rows:102050

1 / 1

<template>
  <PxDataTable
    :items="items"
    :columns="columns"
    title="Team Directory"
    :exportable="true"
    export-file-name="company-team"
    selection-mode="multiple"
    @export="(e) => console.log('Exported', e)"
  />
</template>

API Reference

Prop	Type	Default	Description
items	Record[]	() => []	—
loading	boolean	false	—
columns	ColumnDef[]	() => []	—
rows	number	10	—
rowsPerPageOptions	number[]	() => [10, 20, 50]	—
enableRowDblClick	boolean	false	—
selectionMode	"single" | "multiple"	undefined	—
selectedItems	Record[]	() => []	—
stripedRows	boolean	false	—
emptyMessage	string	"No data available"	—
searchEmptyMessage	string	"No results found"	—
isSearching	boolean	false	—
rowGroupMode	"subheader" | "rowspan"	undefined	—
groupRowsBy	string | string[]	undefined	—
sortMode	"single" | "multiple"	"single"	—
sortField	string	undefined	—
sortOrder	number	1	—
expanderCondition	TSFunctionType	undefined	—
paginated	boolean	true	—
exportable	boolean	false	—
exportFileName	string	"table-export"	—
exportFormats	TSParenthesizedType[]	() => ["csv", "excel"]	—
title	string	undefined	—

ColumnDef Interface

interface ColumnDef {
  field: string          // Property name from the row object
  header: string         // Column header text
  slotName?: string      // Named slot for custom cell rendering
  style?: string | Record<string, string>  // CSS styles for the column
  sortable?: boolean     // When true, enables column sorting on click
  frozen?: boolean       // Reserved (not implemented)
}

Exposed Methods

Access these methods via template ref:

const tableRef = ref<InstanceType<typeof PxDataTable> | null>(null)

// Export programmatically
tableRef.value?.exportCSV({ filename: 'custom-export', selectedOnly: false })
tableRef.value?.exportExcel({ filename: 'custom-export', selectedOnly: false })