Data View
<gstock-data-view>
|
GstockDataView
API
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
viewMode
view-mode
|
The current view mode. ‘list’ renders a data grid (table), ‘grid’ renders data cards. |
|
'list' | 'grid'
|
'list'
|
data
|
The data rows to be displayed. Each row should have an ‘id’ property. |
DataGridRow[]
|
[]
|
|
size
|
The size variant. Affects padding, font sizes, and overall spacing. |
|
'small' | 'medium' | 'large'
|
'medium'
|
selectable
|
When true, enables selection functionality. |
|
boolean
|
false
|
multiSelect
multi-select
|
When true and selectable is enabled, allows multiple items to be selected simultaneously. |
|
boolean
|
false
|
isRowSelectable
|
Optional predicate forwarded to the list view to disable selection for specific rows (e.g. rows in a transitional state). Forwarded to GstockDataGrid. |
(row: DataGridRow) => boolean | undefined
|
-
|
|
sortable
|
When true, enables sorting functionality. In list mode, forwarded to the data grid. In grid mode, sorting is applied by the data view itself. |
|
boolean
|
false
|
filterable
|
When true, enables filtering functionality. In list mode, forwarded to the data grid. In grid mode, filtering is applied by the data view itself. |
|
boolean
|
false
|
paginated
|
When true, enables pagination controls. |
|
boolean
|
false
|
pageSize
page-size
|
The number of items to display per page when pagination is enabled. |
|
number
|
25
|
currentPage
current-page
|
The current page number (1-based) when pagination is enabled. |
|
number
|
1
|
totalPages
total-pages
|
The total number of pages available for server-side pagination. |
|
number
|
0
|
totalItems
total-items
|
The total number of items across all pages for server-side pagination. |
|
number
|
0
|
showPageSizeSelector
show-page-size-selector
|
When true, displays a selector for changing the page size. |
|
boolean
|
false
|
loading
|
When true, displays a loading state. |
|
boolean
|
false
|
loadingMessage
loading-message
|
The message to display while in a loading state. |
string
|
''
|
|
emptyMessage
empty-message
|
The message to display when there is no data. |
string
|
''
|
|
columns
|
The columns configuration for the list view. |
DataGridColumn[]
|
[]
|
|
striped
|
When true, alternating rows will have a different background color (list mode only). |
|
boolean
|
false
|
bordered
|
When true, adds borders around the grid and between cells (list mode only). |
|
boolean
|
false
|
hoverable
|
When true, rows will highlight on hover (list mode only). |
|
boolean
|
false
|
compact
|
When true, reduces padding and spacing (list mode only). |
|
boolean
|
false
|
resizable
|
When true, enables column resizing (list mode only). |
|
boolean
|
false
|
expandable
|
When true, enables row expansion (list mode only). |
|
boolean
|
false
|
expandedContentRenderer
|
Function to render expanded row content (list mode only). |
ExpandedContentRenderer | undefined
|
-
|
|
expandOnRowClick
expand-on-row-click
|
When true, allows expanding/collapsing rows by clicking anywhere on the row (list mode only). |
|
boolean
|
false
|
noHeader
no-header
|
When true, hides the header row (list mode only). |
|
boolean
|
false
|
cardRenderer
|
Function to render the content of each card (grid mode only). |
CardRenderer | undefined
|
-
|
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties .
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
gstock-data-grid-sort-change-event
|
onGstockDataGridSortChangeEvent
|
Fired when the sort state changes (proxied from list view or from programmatic API). | - |
gstock-data-grid-filter-change-event
|
onGstockDataGridFilterChangeEvent
|
Fired when the filter state changes (proxied from list view or from programmatic API). | - |
gstock-data-grid-selection-change-event
|
onGstockDataGridSelectionChangeEvent
|
Fired when the selection state changes (proxied from active child). | - |
gstock-data-grid-row-click-event
|
onGstockDataGridRowClickEvent
|
Fired when a row is clicked (list mode only, proxied). | - |
gstock-data-cards-card-click-event
|
onGstockDataCardsCardClickEvent
|
Fired when a card is clicked (grid mode only, proxied). | - |
gstock-page-change-event
|
onGstockPageChangeEvent
|
Fired when the page changes (proxied from active child). | - |
gstock-page-size-change-event
|
onGstockPageSizeChangeEvent
|
Fired when the page size changes (proxied from active child). | - |
Learn more about events .
Slots
| Name | Description |
|---|---|
toolbar
|
Toolbar content displayed above the active view. |
footer
|
Content displayed below the active view (e.g. totals, summaries). |
Learn more about slots .
CSS Parts
| Name | Description |
|---|---|
container
|
The component’s outermost container. |
toolbar
|
The toolbar container. |
data-grid
|
The gstock-data-grid child element (list mode). |
data-cards
|
The gstock-data-cards child element (grid mode). |
footer
|
The footer container below the active view. |
Learn more about CSS parts .