Data View: filter, sort and page a loaded array
Derive a filtered, sorted page of records from data already loaded into the browser.
Derive a filtered, sorted page of records from data already loaded into the browser.
Before you begin
Section titled “Before you begin”- An App Connect page with the matching extension included and a known array of record objects.
Choose client or server processing deliberately
Section titled “Choose client or server processing deliberately”Data View can only filter records in its Data Source. Loading 20 records from a paged server query and filtering them here does not search the whole database. Use server filtering/paging when the complete data is not loaded or should not be sent to the browser.
Configure the view
Section titled “Configure the view”Give the component ID productView.
| Control or value | Meaning and use |
|---|---|
| Data Source | An array of record objects, for example products.data.products. The implementation clones records for its view. Prefer objects: its normalization removes $value/$index/$key, so primitive arrays are not a reliable record shape here. |
| Filter | A boolean expression evaluated for each record in that record’s scope. For an active field, use active == true. Page-scope values can be referenced to drive the filter. |
| Sort On / Sort Direction | Sort On is a direct property name such as price; choose ascending or descending. String fields use localeCompare, numeric fields use comparisons. A string price is not equivalent to a numeric price. |
| Page | A one-based page number. The runtime clamps an ordinary out-of-range page to the available ends. |
| Page Size | A positive number of records per page. Default 0 shows all matching records on one page. Use whole positive sizes for paged views. |
| Dynamic attributes | Sort On, Sort Direction, Page and Page Size can be bound to page state. Later binding changes can replace values set with actions. |
Bind the view rather than the original source
Section titled “Bind the view rather than the original source”Repeat productView.data for the current page. items is the number of filtered records before paging, pages is the page count (at least 1 even for an empty result), page is the current page, sort exposes on/dir, and has supplies first/prev/next/last availability. Use items == 0 for an empty-result message.
Navigate and sort the current collection
Section titled “Navigate and sort the current collection”First Page, Previous Page, Next Page, Last Page and Select Page navigate the filtered collection. Select Page takes a one-based Page. Sort takes a field name and direction; it does not automatically toggle direction when the same heading is clicked. Store/toggle the direction explicitly when building sortable headers.
Example: filter first, then sort and page
Section titled “Example: filter first, then sort and page”Use [{id:1,name:‘Notebook’,price:8,active:true},{id:2,name:‘Pencil’,price:2,active:true},{id:3,name:‘Folder’,price:5,active:false}]. Set Filter active == true, Sort On price, ascending and Page Size 1. The first page shows Pencil, Next shows Notebook, items is 2 and pages is 2. The inactive Folder never appears in this view.
Keep filters and data refreshes observable
Section titled “Keep filters and data refreshes observable”A narrower filter can clamp the current page to a smaller last page. If your desired behavior is always return to page 1, call First Page when the search/filter changes. The view does not write source records or enforce server permissions.
Use a complete page example
Section titled “Use a complete page example”Continue with the matching workflow to connect this component to the surrounding page.
Check your result
Section titled “Check your result”You can configure the component, use its exact output shape and verify selection, filtering or local editing with known example records.