Data View

This component is available since version 15.0.0.

ODataViewComponent

Directive: o-data-view

Component hierarchy

  • o-data-view
    • oDataViewTableColumns
    • oDataViewGridItem

Inherited inputs

  • from OServiceBaseComponent:
    • attr
    • columns
    • configure-service-args
    • controls
    • delete-method
    • detail-form-route
    • entity
    • filter-case-sensitive
    • fixed-header
    • insert-button
    • insert-form-route
    • insert-method
    • keys
    • pageable
    • paginated-query-method
    • pagination-controls
    • parent-keys
    • query-fallback-function
    • query-method
    • query-on-bind
    • query-on-init
    • query-rows
    • query-with-null-parent-keys
    • quick-filter
    • quick-filter-appearance
    • quick-filter-placeholder
    • recursive-detail
    • recursive-edit
    • recursive-insert
    • refresh-button
    • service
    • service-type
    • show-buttons-text
    • static-data
    • store-state
    • title
    • update-method

Inputs

Name Since Description Default

default-view

'table' | 'grid'

Default view rendered by the component.

table

delete-button

no | false | yes | true

Indicates whether or not to show a button for deleting data

yes

grid-config

GridConfig

Grid view configuration object.

insert-button

no | false | yes | true

Indicates whether or not to show a button for inserting data

yes

refresh-button

no | false | yes | true

Indicates whether or not to show a button for refreshing data

yes

table-config

TableConfig

Table view configuration object. Values defined here have precedence over the global table configuration injection token and the component defaults.

toggle-button

no | false | yes | true

Indicates whether or not to show the built-in view toggle. By default it is enabled, which is the standard way o-data-view provides view switching.

yes

toggle-floatable

no | false | yes | true

Indicates whether or not the view toggle is rendered as a floating control.

no

toggle-on-toolbar

no | false | yes | true

Indicates whether or not to render the view toggle inside the toolbar.

no

Directives

  • oDataViewGridItem
  • oDataViewTableColumns

GridConfig

Type: GridConfig

Represents the configuration object used by o-data-view to customize the embedded o-grid view. All options are equivalent to the o-grid inputs, so you can consult its API to understand the meaning of each property. 

 type GridConfig = { enabled?: CustomBoolean; visible?: CustomBoolean; cols?: number; gridItemHeight?: string | number; gutterSize?: string; insertButtonFloatable?: CustomBoolean; insertButtonPosition?: 'botton' | 'top'; pageSizeOptions?: any[]; orderable?: CustomBoolean; quickFilterColumns?: string; showFooter?: CustomBoolean; showPageSize?: CustomBoolean; sortColumn?: string; sortableColumns?: string; detailMode?: 'none' | 'click' | 'dblclick'; };

GridConfig {
  • cols?: number
  • detailMode?: 'none' | 'click' | 'dblclick'
  • enabled?: 'yes' | 'no' | 'true' | 'false'
  • gridItemHeight?: string | number
  • gutterSize?: string
  • insertButtonFloatable?: 'yes' | 'no' | 'true' | 'false'
  • insertButtonPosition?: 'botton' | 'top'
  • orderable?: 'yes' | 'no' | 'true' | 'false'
  • pageSizeOptions?: any[]
  • quickFilterColumns?: string
  • showFooter?: 'yes' | 'no' | 'true' | 'false'
  • showPageSize?: 'yes' | 'no' | 'true' | 'false'
  • sortColumn?: string
  • sortableColumns?: string
  • visible?: 'yes' | 'no' | 'true' | 'false'
}

TableConfig

Type: TableConfig

Represents the configuration object used by o-data-view to customize the embedded o-table view. All options are equivalent to the o-table inputs, so you can consult its API to understand the meaning of each property. 

 type TableConfig = { visible?: CustomBoolean; detailButtonInRow?: CustomBoolean; detailButtonInRowIcon?: string; editButtonInRow?: CustomBoolean; editButtonInRowIcon?: string; editFormRoute?: string; rowHeight?: 'small' | 'medium' | 'large'; autoAdjust?: CustomBoolean; autoAlignTitles?: CustomBoolean; collapseGroupedColumns?: CustomBoolean; columnsVisibilityButton?: CustomBoolean; defaultVisibleColumns?: string; disableSelectionFunction?: (item: any) => boolean; detailMode?: 'none' | 'click' | 'dblclick'; editionMode?: 'none' | 'click' | 'dblclick'; enabled?: CustomBoolean; exportButton?: CustomBoolean; exportServiceType?: string; filterColumnActiveByDefault?: CustomBoolean; groupable?: CustomBoolean; groupedColumns?: string; horizontalScroll?: CustomBoolean; keepSelectedItems?: CustomBoolean; multipleSort?: CustomBoolean; nonHidableColumns?: string; pageSizeOptions?: any[]; orderable?: CustomBoolean; quickFilterFunction?: QuickFilterFunction; resizable?: CustomBoolean; rowClass?: (rowData: any, rowIndex: number) => string | string[]; selectAllCheckbox?: CustomBoolean; selectAllCheckboxVisible?: CustomBoolean; selectionMode?: 'none' | 'single' | 'multiple'; showConfigurationOption?: CustomBoolean; showExpandableIconFunction?: Function; showFilterOption?: CustomBoolean; showPaginatorFirstLastButtons?: CustomBoolean; showReportOnDemandOption?: CustomBoolean; showChartsOnDemandOption?: CustomBoolean; showResetWidthOption?: CustomBoolean; sortColumns?: string; virtualScroll?: CustomBoolean; visibleColumns?: string; visibleExportDialogButtons?: string; selectionOnRowClick?: CustomBoolean; };

TableConfig {
  • autoAdjust?: 'yes' | 'no' | 'true' | 'false'
  • autoAlignTitles?: 'yes' | 'no' | 'true' | 'false'
  • collapseGroupedColumns?: 'yes' | 'no' | 'true' | 'false'
  • columnsVisibilityButton?: 'yes' | 'no' | 'true' | 'false'
  • defaultVisibleColumns?: string
  • detailButtonInRow?: 'yes' | 'no' | 'true' | 'false'
  • detailButtonInRowIcon?: string
  • detailMode?: 'none' | 'click' | 'dblclick'
  • disableSelectionFunction?: (item: any) => boolean
  • editButtonInRow?: 'yes' | 'no' | 'true' | 'false'
  • editButtonInRowIcon?: string
  • editFormRoute?: string
  • editionMode?: 'none' | 'click' | 'dblclick'
  • enabled?: 'yes' | 'no' | 'true' | 'false'
  • exportButton?: 'yes' | 'no' | 'true' | 'false'
  • exportServiceType?: string
  • filterColumnActiveByDefault?: 'yes' | 'no' | 'true' | 'false'
  • groupable?: 'yes' | 'no' | 'true' | 'false'
  • groupedColumns?: string
  • horizontalScroll?: 'yes' | 'no' | 'true' | 'false'
  • keepSelectedItems?: 'yes' | 'no' | 'true' | 'false'
  • multipleSort?: 'yes' | 'no' | 'true' | 'false'
  • nonHidableColumns?: string
  • orderable?: 'yes' | 'no' | 'true' | 'false'
  • pageSizeOptions?: any[]
  • quickFilterFunction?: QuickFilterFunction
  • resizable?: 'yes' | 'no' | 'true' | 'false'
  • rowClass?: (rowData: any, rowIndex: number) => string | string[]
  • rowHeight?: 'small' | 'medium' | 'large'
  • selectAllCheckbox?: 'yes' | 'no' | 'true' | 'false'
  • selectAllCheckboxVisible?: 'yes' | 'no' | 'true' | 'false'
  • selectionMode?: 'none' | 'single' | 'multiple'
  • selectionOnRowClick?: 'yes' | 'no' | 'true' | 'false'
  • showChartsOnDemandOption?: 'yes' | 'no' | 'true' | 'false'
  • showConfigurationOption?: 'yes' | 'no' | 'true' | 'false'
  • showExpandableIconFunction?: Function
  • showFilterOption?: 'yes' | 'no' | 'true' | 'false'
  • showPaginatorFirstLastButtons?: 'yes' | 'no' | 'true' | 'false'
  • showReportOnDemandOption?: 'yes' | 'no' | 'true' | 'false'
  • showResetWidthOption?: 'yes' | 'no' | 'true' | 'false'
  • sortColumns?: string
  • virtualScroll?: 'yes' | 'no' | 'true' | 'false'
  • visible?: 'yes' | 'no' | 'true' | 'false'
  • visibleColumns?: string
  • visibleExportDialogButtons?: string
}

Table configuration

Directive: table-config

Inherited inputs

  • from OTableComponent:
    • autoAdjust
    • autoAlignTitles
    • collapseGroupedColumns
    • columnsVisibilityButton
    • defaultVisibleColumns
    • deleteButton
    • detailButtonInRow
    • detailButtonInRowIcon
    • detailMode
    • disableSelectionFunction
    • editButtonInRow
    • editButtonInRowIcon
    • editFormRoute
    • editionMode
    • enabled
    • exportButton
    • exportServiceType
    • filterColumnActiveByDefault
    • groupable
    • groupedColumns
    • horizontalScroll
    • keepSelectedItems
    • multipleSort
    • nonHidableColumns
    • orderable
    • pageSizeOptions
    • quickFilterFunction
    • resizable
    • rowClass
    • rowHeight
    • selectAllCheckbox
    • selectAllCheckboxVisible
    • selectionMode
    • selectionOnRowClick
    • showChartsOnDemandOption
    • showConfigurationOption
    • showExpandableIconFunction
    • showFilterOption
    • showPaginatorFirstLastButtons
    • showReportOnDemandOption
    • showResetWidthOption
    • sortColumns
    • virtualScroll
    • visible
    • visibleColumns
    • visibleExportDialogButtons

Grid configuration

Directive: grid-config

Inherited inputs

  • from OGridComponent:
    • cols
    • detailMode
    • enabled
    • gridItemHeight
    • gutterSize
    • insertButtonFloatable
    • insertButtonPosition
    • orderable
    • pageSizeOptions
    • quickFilterColumns
    • showFooter
    • showPageSize
    • sortColumn
    • sortableColumns
    • visible