Previous Sortable Table Next Pricing Table

Data Grid

Feature-rich grid with pagination, filtering, and inline edit.

This page is a scaffold for the Data Grid component. Build the live markup, Alpine.js interactions, and DaisyUI/Tailwind classes here, then replace this placeholder block with the real preview + code snippet.

Planned variants & states to implement:

  • Virtual scroll (large datasets)
  • Column resize
  • Column reorder
  • Row selection (checkbox)
  • Inline cell edit
  • Pagination controls
  • Export CSV / Excel
5

Basic Table

Simple HTML table with styled rows, headers, and zebra striping.

Responsive Table

Horizontally scrollable table for small viewports.

Sortable Table

Column-sortable table with ascending/descending toggle.

Pricing Table

Side-by-side plan comparison table with feature rows.

Comparison Table

Product or plan feature matrix with check/cross indicators.
Previous Sortable Table Next Pricing Table