PxListLayout

A card wrapper for list pages. It exposes tabs and filter slots that render above the card, and a default slot for the main content (typically a data table) that renders inside it.

Usage

Demo

Projects

Main content area (e.g. a PxDataTable)

<script setup>
import { PxListLayout, PxHeader, PxFilterBar, PxDataTable } from 'praxis-vue-ui'

const items = [{ id: 1, name: 'John Doe' }]
const columns = [{ field: 'name', header: 'Name' }]
</script>

<template>
  <!-- PxHeader lives outside PxListLayout — there's no "header" slot -->
  <PxHeader variant="list" title="Projects" />

  <PxListLayout>
    <template #filter>
      <PxFilterBar>
        <input type="search" placeholder="Search..." />
      </PxFilterBar>
    </template>

    <!-- default (unnamed) slot: the card's main content -->
    <PxDataTable :items="items" :columns="columns" />
  </PxListLayout>
</template>

Props

Prop	Type	Default	Description
class	string | null	'px-4'	Custom class applied to the wrapper around the default slot.
noCard	boolean	false	When true, renders the default slot without the card background/border/shadow.

Slots

Slot	Description
tabs	Rendered above everything else — typically a PxTabs for switching between list views.
filter	Rendered below tabs, above the card — typically a PxFilterBar.
default	The main content, rendered inside the card (unless noCard is set) — typically a PxDataTable.