Data View React component
A collection view that switches between a card grid and a list, with every item gliding to its new place; a sort menu reorders them with the same motion, and a pager steps through pages.
When to use the Data View component
Use Data View for browsable collections where people choose how to look at them: product catalogs, course libraries, templates, listings. The grid is for browsing by picture; the list is for comparing details.
Keep the page size small enough that one page fits on screen, and use onItemClick to open an item's detail page.
Installation
Add the Data View component to your project with the shadcn CLI. It lands in components/data-view.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/data-view.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<DataView /> accepts 14 props, all optional.
| Prop | Type | Default |
|---|---|---|
| items | { id: string; title: string; subtitle?: string; image?: string; price?: number; rating?: number; badge?: string }[] | DEFAULT_ITEMS |
| title | string | "Training plans" |
| layout | "grid" | "list" | — |
| defaultLayout | "grid" | "list" | "grid" |
| onLayoutChange | (layout: "grid" | "list") => void | — |
| sortOptions Sort choices offered in the header. Pass [] to hide the menu. | ("featured" | "price-asc" | "price-desc" | "rating" | "title")[] | ["featured", "price-asc", "price-desc", "rating"] |
| defaultSort | "featured" | "price-asc" | "price-desc" | "rating" | "title" | "featured" |
| pageSize Items per page; 0 shows them all. | number | 6 |
| columns Grid columns on wide screens. | 2 | 3 | 4 | 3 |
| currency | string | "USD" |
| locale | string | "en-US" |
| onItemClick | (item: DataViewItem) => void | — |
- items{ id: string; title: string; subtitle?: string; image?: string; price?: number; rating?: number; badge?: string }[]Default: DEFAULT_ITEMS
- titlestringDefault: "Training plans"
- layout"grid" | "list"
- defaultLayout"grid" | "list"Default: "grid"
- onLayoutChange(layout: "grid" | "list") => void
- sortOptions
Sort choices offered in the header. Pass [] to hide the menu.
("featured" | "price-asc" | "price-desc" | "rating" | "title")[]Default: ["featured", "price-asc", "price-desc", "rating"] - defaultSort"featured" | "price-asc" | "price-desc" | "rating" | "title"Default: "featured"
- pageSize
Items per page; 0 shows them all.
numberDefault: 6 - columns
Grid columns on wide screens.
2 | 3 | 4Default: 3 - currencystringDefault: "USD"
- localestringDefault: "en-US"
- onItemClick(item: DataViewItem) => void
Show all 14 propsShow fewer
| theme | "dark" | "light" | "dark" |
| className | string | — |
- theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- What happens when you switch views?
- Every item animates from its card into a row (or back): the image shrinks into a thumbnail and the text slides beside it, so people don't lose their place.
- How does sorting work?
- Pick an option in the header menu and the items reorder by price, rating or name, gliding to their new positions. Use sortOptions to choose which options appear.
- Can I control the layout from outside?
- Yes. Pass layout and onLayoutChange to control it, for example to remember each visitor's choice.
