Settings

Sidebar
Display
Profile Panel
👤

John Doe

Administrator
  • 📊 Dashboard
  • 📝 Forms
  • 📋 Tables
Commands
🚀
Go to Page
Navigate to a page
/go
🌓
Toggle Theme
Switch between light and dark mode
/theme
📐
Toggle Sidebar
Show or hide the sidebar
/sidebar
⚙️
Open Settings
Open the settings panel
/settings
Search In
📄
Pages
Search pages
:p
🧩
Components
Search component pages
:c
↑↓ Navigate
↵ Select
Tab Complete
Esc Close

Data tables with sorting, pagination, and various styling options.

Basic Table with Pagination

Page of 10
ActionsIDNameEmailRoleStatus
1John Doejohn.doe@example.comAdmin Active
2Jane Smithjane.smith@example.comUser Pending
3Bob Johnsonbob.johnson@example.comUser Active
4Alice Brownalice.brown@example.comModerator Inactive
5Charlie Wilsoncharlie.wilson@example.comUser Active
Page of 10

Striped Table

ProductCategoryPriceStockStatus
Laptop ProElectronics$1,299.9915 In Stock
Wireless MouseAccessories$29.990 Out of Stock
Office ChairFurniture$249.998 In Stock
USB CableAccessories$12.993 Low Stock

Table Size Variants

Table size variants synchronized with button/input sizes. Each variant provides enough space for buttons and inputs of the same size.

XS Size

Compact rows - fits button/input XS. Best for dense data grids. Use size="xs".

NamePositionOfficeAgeActions
Tiger NixonSystem ArchitectEdinburgh61
Garrett WintersAccountantTokyo63
Ashton CoxJunior Technical AuthorSan Francisco66

Default Size

Standard rows - fits button/input SM and default sizes. No size prop needed.

NamePositionOfficeAgeActions
Tiger NixonSystem ArchitectEdinburgh61
Garrett WintersAccountantTokyo63
Ashton CoxJunior Technical AuthorSan Francisco66

SM Size

Slightly wider horizontal padding than default. Use size="sm".

NamePositionOfficeAgeActions
Tiger NixonSystem ArchitectEdinburgh61
Garrett WintersAccountantTokyo63
Ashton CoxJunior Technical AuthorSan Francisco66

LG Size

Spacious rows - fits button/input LG. Good for forms in tables. Use size="lg".

NamePositionOfficeAgeActions
Tiger NixonSystem ArchitectEdinburgh61
Garrett WintersAccountantTokyo63
Ashton CoxJunior Technical AuthorSan Francisco66

XL Size

Extra spacious rows - fits button/input XL. Best for presentation tables. Use size="xl".

NamePositionOfficeAgeActions
Tiger NixonSystem ArchitectEdinburgh61
Garrett WintersAccountantTokyo63
Ashton CoxJunior Technical AuthorSan Francisco66

Size Reference

SizeProp ValuePaddingBest for
XSsize="xs"0.6rem 0.8remDense data grids, logs
Default(no prop)0.8rem 0.8remStandard tables
SMsize="sm"0.8rem 1remSlightly wider spacing
LGsize="lg"0.8rem 1.4remForms in tables
XLsize="xl"0.8rem 1.6remPresentation tables

Load More

Load More Positioning

Table with Left-aligned Load More

ProductPriceStockStatus
MacBook Pro$2,39912 Available
iPhone 15$9990 Out of Stock
iPad Air$5998 Available

Table with Center Load More

CustomerEmailOrdersTotal
John Smithjohn@example.com23$4,567.89
Sarah Johnsonsarah@example.com18$3,245.12
Mike Davismike@example.com31$6,789.45

Table with Right Load More (Loading State)

InvoiceDateAmountStatus
#INV-0012024-01-15$234.56 Paid
#INV-0022024-01-14$567.89 Pending
#INV-0032024-01-13$123.45 Paid

Pager

Pager Positioning Examples

Left-aligned Pager

Page of 10

Center-aligned Pager (Default)

Page of 10

Right-aligned Pager

Page of 10

Alternative Pager Icon Sets

Double/Single Angles (Default)

Page of 10

Triangular Arrows

Page of 10
Page of 10

Simple Arrows

Page of 10
Page of 10

Mathematical Double Arrows

Page of 10
Page of 10

Panel Tables

Tables with card-like visual containment using the TableContainer with isPanel prop. Use when tables need to stand alongside cards without being wrapped in one.

Panel Tables

Basic Panel Table (no header)

ProductSKUPriceStock
Wireless KeyboardWK-2024$79.9945
USB-C HubHUB-7P$49.99120
Monitor StandMS-ADJ$129.9928

Panel Table with Header

Use the title and headerActions props to add a header.

Recent Orders
Order IDCustomerDateTotalStatus
#ORD-1001Alice Johnson2024-01-28$234.50 Shipped
#ORD-1002Bob Williams2024-01-27$89.00 Processing
#ORD-1003Carol Davis2024-01-27$567.25 Delivered
#ORD-1004David Miller2024-01-26$145.00 Cancelled

Panel Tables in Grid (75/25 split)

Panel tables work inside grid layout just like cards.

Activity Log (75%)
TimeUserAction
10:45 AMadminUpdated product pricing
10:32 AMjohn.doeCreated new order #1005
10:15 AMadminApproved refund request
Stats (25%)
MetricValue
Orders156
Revenue$12.4k
Refunds3

Table Cards

The TableCard component is a card specifically designed for tables. It includes header, body (for the table), footer, and color variants like regular cards.

Basic Table Card with Header Actions

Recent Orders

Order IDCustomerDateAmountStatus
#1001John Smith2024-01-28$250.00 Completed
#1002Jane Doe2024-01-27$180.00 Pending
#1003Bob Wilson2024-01-26$320.00 Completed
Showing 3 of 156 orders

Color Variants

Table cards support the same color variants as regular cards: variant="primary", variant="success", variant="warning", variant="danger", and theme colors color={1-9}.

Primary Table Card

UserRoleStatus
AliceAdminActive
BobEditorActive

Success Table Card

TaskCompleted
Database backup10:00 AM
Cache cleared10:15 AM

Warning Table Card

AlertTime
High CPU usage2 min ago
Low disk space5 min ago

Danger Table Card

ErrorCount
Connection timeout23
Auth failure7

Plain Table Cards

Use isPlain prop to remove the card visual styling (border, shadow, background) while keeping grid behavior. Tables work side by side with proper gaps.

Sales by Region

RegionQ1Q2Q3
North$45,000$52,000$48,000
South$38,000$41,000$44,000
East$62,000$58,000$65,000

Top Products

ProductUnitsRevenue
Widget Pro1,245$124,500
Gadget Plus892$89,200
Tool Master567$56,700

Bordered Tables

Use the isBordered prop to add full cell borders on all sides.

Bordered Table

ItemQuantityPriceTotal
Widget A10$25.00$250.00
Widget B5$45.00$225.00
Widget C8$30.00$240.00

Bordered + Striped

DepartmentEmployeesBudget
Engineering45$2.5M
Marketing22$1.2M
Sales38$1.8M
HR12$0.6M

Plain Table with Pagers

Showing 1-10 of 156
IDCustomerOrder DateStatusTotal
#1001John Smith2026-01-15 Completed$245.00
#1002Jane Doe2026-01-16 Pending$189.50
#1003Bob Wilson2026-01-17 Completed$312.75
#1004Alice Brown2026-01-18 Cancelled$78.00
#1005Charlie Davis2026-01-19 Completed$456.25
Page of 16

Real-World Example: Order Detail Layout

Cards and panel tables side by side - all with consistent visual treatment.

Customer Information

Name John Smith
Email john.smith@example.com
Phone +1 (555) 123-4567
Customer Since March 2021

Delivery Details

Address 123 Main Street, Apt 4B
City New York, NY 10001
Delivery Method Express Shipping
Est. Delivery Jan 30, 2024
Order Items
ProductSKUQtyUnit PriceTotal
Wireless Bluetooth HeadphonesWBH-PRO-BK1$149.99$149.99
USB-C Charging Cable (2m)USB-C-2M2$19.99$39.98
Carrying CaseCASE-HP-011$29.99$29.99
Subtotal$219.96
Shipping$12.99
Tax$18.70
Total$251.65

Scrollable Tables

Use the isScrollable prop on TableCard to enable horizontal scrolling for wide tables.

Wide Data Table

IDFirst NameLast NameEmailPhoneAddressCityStateCountryPostal CodeCreatedUpdatedStatus
1JohnDoejohn.doe@example.com+1-555-0101123 Main StreetNew YorkNYUSA100012024-01-012024-01-15 Active
2JaneSmithjane.smith@example.com+1-555-0102456 Oak AvenueLos AngelesCAUSA900012024-01-022024-01-14 Active
3BobJohnsonbob.johnson@example.com+1-555-0103789 Pine RoadChicagoILUSA606012024-01-032024-01-13 Pending

Theme Color Variants

Use the color prop with values 1-9 for theme-based colors.

Color 1

ItemValue
Example123

Color 2

ItemValue
Example456

Color 3

ItemValue
Example789

Color 4

ItemValue
Example101

Color 5

ItemValue
Example202

Color 6

ItemValue
Example303

CSS Classes Reference

Tables

  • pa-table-container - Scrollable table wrapper with border
  • pa-table-container--panel - Card-like containment with shadow and margin
  • pa-table-container__header - Header row for panel tables
  • pa-table-container__title - Title text in header
  • pa-table-container__actions - Actions container in header
  • pa-table - Base table class
  • pa-table--striped - Zebra striping on rows
  • pa-table--bordered - Full cell borders on all sides
  • pa-table--xs - Extra small padding
  • pa-table--sm - Small padding
  • pa-table--lg - Large padding
  • pa-table--xl - Extra large padding
  • pa-table--responsive - Stacks into cards on mobile
  • pa-table--responsive-grid - CSS grid layout on mobile
  • .col-auto - Auto-width column (shrinks to content)

Pager

  • pa-pager - Pagination container (default: centered)
  • pa-pager--left - Left-aligned
  • pa-pager--center - Center-aligned
  • pa-pager--right - Right-aligned
  • pa-pager__container - Inner wrapper (flex)
  • pa-pager__controls - Navigation buttons
  • pa-pager__info - Page input and text
  • pa-pager__input - Page number input
  • pa-pager__text - "/ X pages" text

Load More

  • pa-load-more - Load more container (default: centered)
  • pa-load-more--left - Left-aligned
  • pa-load-more--center - Center-aligned
  • pa-load-more--right - Right-aligned
  • pa-load-more__button - The button element
  • pa-load-more__button--loading - Loading state
  • pa-load-more__spinner - Spinner element
  • pa-load-more__text - Button text
  • pa-load-more__count - Count display (e.g., "3 of 150")

Table Card

  • pa-table-card - Card container for tables
  • pa-table-card--plain - Removes card styling (no border, shadow, background)
  • pa-table-card--primary, --success, --warning, --danger - Semantic color variants
  • pa-table-card--color-1 through --color-9 - Theme colors
  • pa-table-card__header - Header with title and actions
  • pa-table-card__body - Body container for table
  • pa-table-card__body--scrollable - Enables horizontal scroll
  • pa-table-card__footer - Footer for pagination/summary

© 2025 Svelte Pure Admin - Powered by @keenmate/pure-admin-core

App version: 1.8.0

Keyboard Shortcuts

No shortcuts registered.