Grid

This component is available since version 3.1.0.

OGridComponent

Directive: o-grid

Component hierarchy

• o-grid
  • o-grid-item

Inherited inputs

• from OServiceBaseComponent:
  • attr
  • columns
  • entity
  • keys
  • pageable
  • paginated-query-method
  • parent-keys
  • query-fallback-function
  • query-method
  • query-on-bind
  • query-on-init
  • query-rows
  • query-with-null-parent-keys
  • service
  • service-type
  • static-data
  • store-state
• from OServiceComponent:
  • controls
  • detail-form-route
  • detail-mode
  • enabled
  • page-size-options
  • pagination-controls
  • quick-filter
  • quick-filter-appearance
  • quick-filter-placeholder
  • recursive-detail
  • title
  • visible

Inputs

Name	Since	Description	Default
cols number		Number of items to display on a page. By default set to 32.	By default, the number of columns will be automatically determined based mediaQuery of Flex Layout. See more here.
fixed-header no | false | yes | true		Indicates whether or not to have a fixed header and footer when the content is greather than its own height	no
grid-item-height string | number		Set internal representation of row height from the user-provided value (see attribute rowHeight of MatGridList).	1:1
gutter-size string		The amount of space between o-grid-items. This will be something like ‘10px’ or ‘1em’.	1px
insert-button no | false | yes | true		Indicates whether or not to show a button for inserting data	false
insert-button-floatable no | false | yes | true		Indicates whether or not the insert button is floatable.	yes
insert-button-position 'bottom' | 'top'		Indicates the insert button is attached at the top or at the bottom of the grid when the button is floatable.	bottom
orderable no | false | yes | true		Whether or not the sort select is shown in the toolbar.	no
page-size-options array		Page size options separated by ‘;’.	8;16;24;32;64
pagination-controls no | false | yes | true		Indicates whether or not to show the pagination controls	no
quick-filter-columns string		Columns used by the quick filter. Separated by ‘;’	columns attribute value
refresh-button no | false | yes | true		Indicates whether or not to show a button for refreshing data	yes
show-buttons-text no | false | yes | true		Indicates whether or not to show text in header buttons	no
show-footer no | false | yes | true		Indicates whether or not to show the footer	true
show-page-size no | false | yes | true		Whether or not to hide the page size selector.	no
sort-column string		Sorting default column.
sortable-columns string		Sorting columns separated by ‘;’.

Outputs

Name	Since	Description
onClick		Event triggered when a row is clicked
onDataLoaded		Event triggered when the data is updated
onDoubleClick		Event triggered when a row is double clicked
onPaginatedDataLoaded		Event triggered when the paginated data is updated

Grid item

Directive: o-grid-item

Inputs

Name	Since	Description
colspan number		Amount of columns that the grid tile takes up.
rowspan number		Amount of rows that the grid tile takes up.