Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Data View
A flexible data presentation component that renders items in list or grid layout with a toolbar toggle. Provides built-in global search filtering, column-based sorting, pagination, and infinite scroll. Define item rendering via typed render fragments and declare column metadata via BbDataViewColumn.
Default
A
BbDataView in list-only mode. Provide a ListTemplate render fragment to define how each item renders. Declare columns with BbDataViewColumn inside Fields to enable sorting and filtering via the built-in toolbar.
Loading example…
List & Grid Toggle
When both
BbDataViewListTemplate and BbDataViewGridTemplate slot components are provided inside Fields, the toolbar automatically shows a layout toggle button, allowing users to switch between list and grid views.
Loading example…
Infinite Scroll
Set
EnableInfiniteScroll with a ScrollHeight to create a fixed-height scrollable container that automatically loads more items as the user scrolls to the bottom, using an IntersectionObserver sentinel. Omit ScrollHeight and use ShowLoadMoreButton instead for an explicit button-based trigger.
Loading example…
On-Demand Data Loading
Supply an
ItemsProvider instead of Data for server-side data loading. The view calls the delegate whenever pagination, sort, or search state changes, passing a DataViewRequest with StartIndex, Count, SortField, SortDirection, and SearchText — the provider returns the matching page plus a total count. A loading overlay is shown while the request is in flight, and superseded requests are cancelled. Provide either Data or ItemsProvider, not both.
Loading example…
Custom Toolbar Actions
Use the
ToolbarActions slot to add custom content to the right side of the toolbar — for example, Add, Export, or Filter buttons. The slot is only visible when ShowToolbar is true (the default).
Loading example…
Auto-Fill Grid
Set
GridColumnMinWidth to use CSS repeat(auto-fill, minmax(value, 1fr)) instead of fixed breakpoint columns. The grid automatically adjusts the number of columns based on available width.
Loading example…