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…