H
UI by hampton.io
Back to Components
Display

Data Grid

Spreadsheet style grid with selectable cells, editing, and resizable columns.

PropsUsage ExampleVariations
Workspace
Owner
Plan
Seats
Status
Northwind
L. Wolfe
Pro
12
Active
Atlas
J. Park
Team
7
Active
Quasar
M. Kim
Starter
3
Trial
Orbit
A. Singh
Enterprise
24
Active
Keystone
R. Diaz
Team
9
Paused

Dependencies

  • clsx
  • tailwind-merge

Files

  • components/ui/data-grid.tsx

Installation

Using shadcn CLI

npx shadcn add data-grid --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge

Related Display Components

Activity Timeline

Vertical activity feed with icon, title, description, timestamp, and connector line.

Animated Counter

Counts up to a target value with Framer Motion easing, optional prefix and suffix, and locale formatting.

Calendar Grid

Monthly calendar grid with events and navigation.

Circular Progress

Progress ring with animated stroke and optional value label, built with SVG and Framer Motion.

Comparison Bar

Side by side comparison bars with labels, values, and percentage split.

Comparison Table

Feature comparison table for plans or tiers with boolean checkmarks.