Data Grid
<gstock-data-grid>
|
GstockDataGrid
API
Propiedades
| Nombre | Descripción | Reflects | Tipo | Por defecto |
|---|---|---|---|---|
columns
|
The columns configuration for the data grid. Each column defines how data should be displayed and behave. |
DataGridColumn[]
|
[]
|
|
data
|
The data rows to be displayed in the grid. Each row should have an ‘id’ property and keys matching column keys. |
DataGridRow[]
|
[]
|
|
size
|
The size variant of the data grid. Affects padding, font sizes, and overall spacing. |
|
'small' | 'medium' | 'large'
|
'medium'
|
striped
|
When true, alternating rows will have a different background color for better readability. |
|
boolean
|
false
|
bordered
|
When true, adds borders around the entire grid and between cells. |
|
boolean
|
false
|
hoverable
|
When true, rows will highlight when hovered over with the mouse. |
|
boolean
|
false
|
compact
|
When true, reduces padding and spacing for a more compact layout. |
|
boolean
|
false
|
selectable
|
When true, enables row selection functionality with checkboxes. |
|
boolean
|
false
|
multiSelect
multi-select
|
When true and selectable is enabled, allows multiple rows to be selected simultaneously. |
|
boolean
|
false
|
sortable
|
When true, enables column sorting functionality. Individual columns can override this with their sortable property. |
|
boolean
|
false
|
filterable
|
When true, enables column filtering functionality. Individual columns can override this with their filterable property. |
|
boolean
|
false
|
resizable
|
When true, enables column resizing functionality. Individual columns can override this with their resizable property. |
|
boolean
|
false
|
paginated
|
When true, enables pagination controls and limits the number of rows displayed per page. |
|
boolean
|
false
|
pageSize
page-size
|
The number of rows 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. - If set to 0 or not provided: Calculated automatically from data.length and pageSize (virtual pagination) - If set to a value > 0: Used for server-side pagination where data contains only current page items |
|
number
|
0
|
totalItems
total-items
|
The total number of items across all pages. - If set to 0 or not provided: Calculated automatically from data.length (virtual pagination) - If set to a value > 0: Used for server-side pagination where data contains only current page items |
|
number
|
0
|
loading
|
When true, displays a loading state with a progress indicator and hides the data grid content. |
|
boolean
|
false
|
loadingMessage
loading-message
|
The message to display while the grid is in a loading state. |
-
|
-
|
|
emptyMessage
empty-message
|
The message to display when the grid has no data to show. |
-
|
-
|
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Aprende más sobre atributos y propiedades .
Eventos
| Nombre | React Event | Descripción | Event Detail |
|---|---|---|---|
gstock-data-grid-sort-change-event
|
onGstockDataGridSortChangeEvent
|
Fired when the sort state changes. | - |
gstock-data-grid-filter-change-event
|
onGstockDataGridFilterChangeEvent
|
Fired when the filter state changes. | - |
gstock-data-grid-selection-change-event
|
onGstockDataGridSelectionChangeEvent
|
Fired when the selection state changes. | - |
gstock-data-grid-row-click-event
|
onGstockDataGridRowClickEvent
|
Fired when a row is clicked. | - |
gstock-data-grid-cell-click-event
|
onGstockDataGridCellClickEvent
|
Fired when a cell is clicked. | - |
gstock-data-grid-column-resize-event
|
onGstockDataGridColumnResizeEvent
|
Fired when a column is resized. | - |
gstock-page-change-event
|
onGstockPageChangeEvent
|
Fired when the page changes. | - |
Aprende más sobre eventos .
Slots
| Nombre | Descripción |
|---|---|
| (default) | The default slot for data grid content. |
toolbar
|
Toolbar content displayed above the grid. |
empty
|
Content displayed when the grid is empty. |
loading
|
Content displayed when the grid is loading. |
Aprende más sobre slots .
Propiedades personalizadas
| Nombre | Descripción | Default |
|---|---|---|
--background-color
|
Controls the grid background color. | |
--border-color
|
Controls the grid border color. | |
--border-width
|
Controls the grid border width. | |
--cell-padding
|
Controls the padding of grid cells. | |
--header-background
|
Controls the header background color. | |
--row-height
|
Controls the default row height. | |
--stripe-color
|
Controls the alternating row color. |
Aprende más sobre propiedades personalizadas .
Partes
| Nombre | Descripción |
|---|---|
container
|
The component’s container. |
toolbar
|
The toolbar container. |
grid-container
|
The scrollable container that wraps the grid. |
grid
|
The main grid container. |
header
|
The header row container. |
header-cell
|
Individual header cells. |
body
|
The body container. |
row
|
Individual row containers. |
cell
|
Individual cell containers. |
pagination
|
The pagination container. |
pagination-container
|
The pagination wrapper container. |
pagination-loading
|
The pagination loading indicator. |
selection-checkbox
|
Selection checkboxes. |
sort-button
|
Sort buttons in headers. |
empty-state
|
The empty state container. |
loading
|
The loading state container. |
resize-handle
|
Column resize handles. |
Aprende más sobre partes CSS .