Admin List Page

A common shell for any "manage X" page: a page header, a search filter, a data table with per-row actions, and an empty state when the filter matches nothing. Combines PxHeader, PxListLayout, PxFilterBar, PxDataTable, PxDropdownMenu, PxBadge, and PxEmptyState.

Admin List Page

Team Members

Name	Role	Status
Alice Smith	Admin	Active
Bob Jones	Editor	Active
Carla Diaz	Viewer	Suspended

Showing 1 to 3 of 3 items

Rows:102050

1 / 1

<script setup>
import { ref, computed } from 'vue'
import { Pencil, Trash2, Ban } from '@lucide/vue'
import {
  PxHeader,
  PxListLayout,
  PxFilterBar,
  PxDataTable,
  PxDropdownMenu,
  PxBadge,
  PxEmptyState,
  PxToast,
  usePxToast,
} from 'praxis-vue-ui'

const search = ref('')

const allUsers = [
  { id: 1, name: 'Alice Smith', role: 'Admin', status: 'Active' },
  { id: 2, name: 'Bob Jones', role: 'Editor', status: 'Active' },
  { id: 3, name: 'Carla Diaz', role: 'Viewer', status: 'Suspended' },
]

const filteredUsers = computed(() =>
  allUsers.filter((u) => u.name.toLowerCase().includes(search.value.toLowerCase()))
)

// slotName on a column routes that cell through a named <template> slot below
const columns = [
  { field: 'name', header: 'Name' },
  { field: 'role', header: 'Role' },
  { field: 'status', header: 'Status', slotName: 'status' },
  { field: 'id', header: '', slotName: 'actions', style: { width: '48px' } },
]

const { showSuccess } = usePxToast()

const actionsFor = (user) => [
  { label: 'Edit', lucideIcon: Pencil, command: () => showSuccess('Edit', `Editing ${user.name}`) },
  { label: 'Suspend', lucideIcon: Ban, command: () => showSuccess('Suspended', `${user.name} was suspended`) },
  { label: 'Delete', lucideIcon: Trash2, command: () => showSuccess('Deleted', `${user.name} was removed`) },
]
</script>

<template>
  <PxHeader variant="list" title="Team Members" />

  <PxListLayout>
    <template #filter>
      <PxFilterBar>
        <input v-model="search" type="search" placeholder="Search by name..." />
      </PxFilterBar>
    </template>

    <!-- PxListLayout has no built-in empty state — toggle it yourself -->
    <PxEmptyState
      v-if="filteredUsers.length === 0"
      title="No members found"
      description="Try a different search term."
    />
    <PxDataTable v-else :items="filteredUsers" :columns="columns">
      <template #status="{ data }">
        <PxBadge :value="data.status" :severity="data.status === 'Active' ? 'success' : 'danger'" />
      </template>
      <template #actions="{ data }">
        <PxDropdownMenu :items="actionsFor(data)" />
      </template>
    </PxDataTable>
  </PxListLayout>

  <!-- Render once at the root of your app -->
  <PxToast />
</template>

Why this shape

• PxHeader lives outside PxListLayout — the layout only exposes tabs, filter, and a default content slot, not a header slot (see PxListLayout's slot table).
• The empty state is manual. PxDataTable doesn't render one automatically when items is empty, so switch between PxEmptyState and PxDataTable with v-if/v-else on your filtered list, as shown above.
• Row actions use slotName, not a dedicated actions prop — any column can point at a named slot, which is how both the status badge and the dropdown menu get into the table.