DataTable

When to use

Use for tabular data with sorting, filtering, and pagination. Primarily an admin component that works best with useAdminTable composable.

When not to use

  • For simple lists, use v-for with cards
  • For public-facing pages, use custom layouts

Guidelines

  • Lazy loading: Always use the lazy prop for server-side pagination on large datasets.
  • Sortable columns: Make columns sortable when users need to find specific items.
  • Style via passthrough: Use the :pt prop, not inline styles or !important.

How it works

Product
Brand
Price
Status
Fat Matte LipstickNYX$12.99Published
Skin TintIlia$48Draft
Cloud PaintGlossier$20Published
Boy BrowGlossier$17Archived
Lash SlickGlossier$16Published

Edge cases

  • Use lazy prop for server-side pagination on large datasets
  • Style via :pt passthrough, not inline styles