About
A grid that sorts by several columns at once: the click order sets key priority, shown as a number in the header and as chips in the toolbar. From VibeUI — 1,600+ components with agent-ready install briefs at vibeui.club.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Priority Sort to your project and fits it to your theme.
Code
How Priority Sort is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Datagrid001 } from "@/components/ui/vibeui-datagrid-001"
export default function Demo() {
return <Datagrid001 {...{"caption":"Click a header to add the column to the sort, click again to flip it, a third click drops it","heading":"Warehouse catalogue","columnText":{"title":"Item","team":"Group","stock":"In stock","price":"Price","updated":"Updated"},"emptySortText":"No sorting applied","removeSortLabel":"Remove sorting by the «{column}» column","resetText":"Reset","scrollLabel":"Items table, scrolls sideways","currency":"$","rows":[{"title":"Ostro chair","team":"Furniture","stock":42,"price":18900,"updated":"12 March"},{"title":"Pillar lamp","team":"Lighting","stock":7,"price":6400,"updated":"11 March"},{"title":"Grano table","team":"Furniture","stock":42,"price":32500,"updated":"9 March"},{"title":"Rift shelf","team":"Storage","stock":18,"price":11200,"updated":"9 March"},{"title":"Dune rug","team":"Textiles","stock":7,"price":24700,"updated":"4 March"},{"title":"Nook floor lamp","team":"Lighting","stock":65,"price":8300,"updated":"1 March"}]}} />
}
More in Dashboards
View all
Dashboard with Collapsible Sidebar
2.4K
Sidebar
229
SaaS Template
2.4K
Financial Bento Grid
68
Chat template
597
Stats Bento
1.1K
Stats cards with links
39
Statistics Card 2
261
