Data View
Displays collections in switchable list or grid layouts with built-in search, sort, grouping, pagination, selection, and keyboard navigation.
Basic
A searchable user list. Declare DataViewColumn inside Fields to wire up the search input and sort dropdown automatically.
Alice Johnson
Senior Engineer
Bob Martinez
Product Manager
Carol Chen
UX Designer
David Kim
Backend Engineer
Eva Rossi
Data Scientist
List / Grid Switcher
Provide both ListTemplate and GridTemplate — the layout toggle appears automatically in the toolbar.
Mechanical Keyboard
Peripherals
4K Monitor
Displays
USB-C Hub
Accessories
Webcam Pro
Peripherals
Desk Lamp
Office
Noise Cancelling Headphones
Audio
Single Selection
Click an item to select it; click again to deselect. Keyboard: ↑ ↓ to navigate, Space or Enter to toggle.
Mechanical Keyboard
Peripherals
4K Monitor
Displays
USB-C Hub
Accessories
Webcam Pro
Peripherals
Desk Lamp
Office
Noise Cancelling Headphones
Audio
Mouse Pad XL
Accessories
Laptop Stand
Accessories
Ethernet Cable 3m
Networking
Power Strip
Accessories
Multiple Selection
Click items to toggle selection. The count badge and Clear button use the ToolbarActions slot, which renders on the right next to the layout toggle.
Mechanical Keyboard
Peripherals
4K Monitor
Displays
USB-C Hub
Accessories
Webcam Pro
Peripherals
Desk Lamp
Office
Noise Cancelling Headphones
Audio
Mouse Pad XL
Accessories
Laptop Stand
Accessories
Ethernet Cable 3m
Networking
Power Strip
Accessories
Check Variant
CircleCheck (default) always reserves indicator space. Check hides it when unselected (mobile-style). None removes it entirely — toggle list/grid to compare both layouts.
Check (mobile-style)
None — drive feedback through your template
Grouping
Pass GroupBy to visually bucket items by a field. GroupHeaderTemplate customises the header; falls back to the key's ToString().
Infinite Scroll (Server-Side)
Use ItemsProvider for virtualized infinite scroll backed by a server or large in-memory dataset. The component renders only visible rows via Virtualize, hiding the pagination bar. Adjust ItemHeight to match your template's actual row height. VirtualizeOverscanCount controls how many extra rows are rendered beyond the visible viewport to reduce blank flicker during fast scrolling.
Virtualize (Client-Side)
Set Virtualize=true to keep all data in memory but only render visible DOM nodes. Search and sort still run client-side. Useful for large in-memory lists (500–20k items) where you don't want pagination.
Infinite GridView Columns
Set GridColumnMinWidth to any CSS length (e.g. 160px, 10rem) or a bare Tailwind spacing key (e.g. 40). The component automatically fills the container width with as many columns as fit — no fixed column count needed. Resize the window to see the column count adapt.
Mechanical Keyboard
Peripherals
$149.994K Monitor
Displays
$399.00USB-C Hub
Accessories
$49.95Webcam Pro
Peripherals
$89.00Desk Lamp
Office
$35.50Noise Cancelling Headphones
Audio
$249.99Mouse Pad XL
Accessories
$19.99Laptop Stand
Accessories
$42.00Ethernet Cable 3m
Networking
$8.99Power Strip
Accessories
$25.00Cable Organizer
Accessories
$12.50Portable SSD 1TB
Storage
$79.99Search & Sort
Declare multiple DataViewColumn entries. Filterable columns feed the search input; Sortable ones populate the sort dropdown.
Mechanical Keyboard
Peripherals
4K Monitor
Displays
USB-C Hub
Accessories
Webcam Pro
Peripherals
Desk Lamp
Office
Noise Cancelling Headphones
Audio
Mouse Pad XL
Accessories
Laptop Stand
Accessories
Ethernet Cable 3m
Networking
Power Strip
Accessories
Toolbar with Custom Actions
ToolbarActions renders on the right of the toolbar — after search/sort, before the layout toggle. Ideal for Export and Add buttons.
Mechanical Keyboard
Peripherals
4K Monitor
Displays
USB-C Hub
Accessories
Webcam Pro
Peripherals
Desk Lamp
Office
Noise Cancelling Headphones
Audio
Pagination
Set PageSize to enable paging. PageSizes controls the available options in the size selector.
Products (12 total)
Loading State
Shown while data is being fetched.
Empty State
Custom content when there are no items.
No products found
Try adjusting your filters or adding new items.
API Reference
DataView component parameters.
| Prop | Type | Default | Description |
|---|---|---|---|
| Items | IEnumerable<TItem>? | null | Data source. |
| Layout | DataViewLayout | List | Initial layout mode: List or Grid. |
| PageSize | int | 0 | Initial items per page. 0 = all items, no pagination. |
| PageSizes | int[] | [10,25,50,100] | Page-size options shown in the selector. |
| GridColumns | int | 3 | Column count in Grid layout (1–6). |
| GridColumnMinWidth | string? | null | Min tile width for auto-fill grid columns. Accepts any CSS length (e.g. "160px", "10rem") or a Tailwind spacing key (e.g. "40"). null/empty = disabled; falls back to GridColumns. |
| ShowToolbar | bool | true | Whether the toolbar is visible. |
| ToolbarActions | RenderFragment? | null | Custom content on the right of the toolbar (after search/sort, before the layout toggle). |
| Fields | RenderFragment? | null | DataViewColumn declarations that enable toolbar search and sort. |
| GroupBy | Func<TItem, object>? | null | Groups items by the returned key. |
| GroupHeaderTemplate | RenderFragment<object>? | null | Custom group header. Defaults to the key's ToString(). |
| ItemKey | Func<TItem, object>? | null | Function to extract a unique key per item for diffing. |
| Loading | bool | false | Shows a loading spinner. |
| LoadingText | string | "Loading…" | Text shown in loading state. |
| EmptyText | string | "No items" | Fallback text when empty and EmptyTemplate is null. |
| ShowPagination | bool | true | Whether to render the pagination bar (requires PageSize > 0). |
| SelectionMode | DataViewSelectionMode | None | None, Single, or Multiple item selection. |
| SelectedItem | TItem? | null | Selected item in Single mode (two-way bindable). |
| SelectedItems | IReadOnlyList<TItem>? | null | Selected items in Multiple mode (two-way bindable). |
| CheckVariant | DataViewCheckVariant | CircleCheck | CircleCheck, Check (invisible when unselected), or None. |
| ListTemplate | RenderFragment<TItem>? | null | List-specific item template. Provide with GridTemplate to enable the toggle. |
| GridTemplate | RenderFragment<TItem>? | null | Grid-specific item template. Provide with ListTemplate to enable the toggle. |
| ItemTemplate | RenderFragment<TItem>? | null | Shared template for both layouts when layout-specific templates are not set. |
| EmptyTemplate | RenderFragment? | null | Custom empty-state content. |
| Header | RenderFragment? | null | Optional header rendered above the toolbar and items. |
| ItemsProvider | ItemsProviderDelegate? | null | Server-side data callback for infinite-scroll virtualization. When set, Items is ignored. |
| Virtualize | bool | false | When true, renders client-side Items via |
| ItemHeight | float | 72 | Per-item height in px passed to the virtualizer as ItemSize. Required when Virtualize=true or ItemsProvider is set. |
| Height | string | "500px" | CSS height of the scroll container. Required when Virtualize=true or ItemsProvider is set. |
| VirtualizeOverscanCount | int | 3 | Extra items rendered beyond the visible viewport to reduce blank flicker during fast scrolling. |