Data view

This component is available since version 15.0.0.

Introduction

The o-data-view component is used to display the same dataset using two different visualizations:

• Table view, based on o-table
• Grid view, based on o-grid

The component provides a single entry point for data binding and common UI configuration (title, toolbar controls, quick filter, pagination, etc.), while allowing you to define custom templates for both the table columns and the grid items.

Data binding

The o-data-view component supports data binding and you can command the component to display data either from local or remote data storage.

The data array can be provided in two ways:

• Provide an array of objects to the static-data attribute.
• Configure the component to query the data from a service using service and entity attributes.

Passing function calls directly to static-data (e.g. [static-data]="getData()") is a bad practice that causes continuous re-evaluation and leads to malfunctioning behavior in components such as o-list, o-table, o-grid and o-tree. Always pass a static reference instead (e.g. [static-data]="data").

Configuration objects

The o-data-view component provides two configuration inputs to group view-specific options:

• table-config: table-specific configuration (selection, grouping, export, scrolling, edit/detail behavior, etc.). See all of its properties here
• grid-config: grid-specific configuration (layout, footer, orderable, quick filter columns, etc.). See all of its properties here

This allows you to keep the main component declaration clean and move advanced settings into configuration objects.

Global table configuration (Injection token)

Besides configuring the table behavior through table-config, some default table options can be defined globally by providing the O_TABLE_GLOBAL_CONFIG injection token.

The final value for a given option is resolved using the following precedence order:

1. table-config input value (highest priority)
2. O_TABLE_GLOBAL_CONFIG injection token value
3. Component default value (lowest priority)

This is especially useful when you want to enforce consistent table behavior across the application (e.g. default row height, default edition mode), while still allowing each o-data-view / o-table instance to override those defaults through table-config.

Example

import { NgModule } from '@angular/core';
import { O_TABLE_GLOBAL_CONFIG, OTableGlobalConfig } from 'ontimize-web-ngx';

const TABLE_GLOBAL_CONFIG: OTableGlobalConfig = {
  autoAdjust: true,
  autoAlignTitles: false,
  filterColumnActiveByDefault: false,
  editionMode: 'dblclick',
  detailMode: 'click',
  rowHeight: 'medium'
};

@NgModule({
  providers: [
    { provide: O_TABLE_GLOBAL_CONFIG, useValue: TABLE_GLOBAL_CONFIG }
  ]
})
export class AppModule {}

For a full description of the token and its supported properties, see the official OTableComponent documentation.

Templates

The o-data-view component uses content projection to allow you to customize what is rendered in each view.

For that reason, ng-template definitions are required in the following cases:

• Grid view: you must provide a grid item template, otherwise the grid has no content to render.
• Table view: you can optionally provide a table columns template to define columns and attach table extensions (filters, aggregates, context menu, paginator, etc.).

Table columns template

To configure the table (columns and extensions), define an ng-template with the oDataViewTableColumns directive and place any table-related definitions inside it.

This is the recommended approach to:

• define o-table-column elements
• add table extensions such as:
  • o-table-columns-filter
  • o-table-column-aggregate
  • o-table-context-menu
  • o-table-paginator
  • and any other table configuration components

Grid item template

To render items in grid mode, define an ng-template with the oDataViewGridItem directive.

Each rendered item receives the current record as template context using let-item, allowing you to build card-based layouts or any custom UI.

In grid mode, the oDataViewGridItem template is required to display content. In table mode, the oDataViewTableColumns template is recommended when you need to define columns or attach table extensions (filters, aggregates, context menus, paginator, etc.).

Basic example

<o-data-view service="packs" entity="packs" keys="id" columns="id;name;location;price;duration;score" [table-config]="tableCfg" [grid-config]="gridCfg" refresh-button="no" show-buttons-text="no" title="Data View Example">

  <ng-template oDataViewTableColumns>
      <!-- filter by columns -->
      <o-table-columns-filter columns="name;location;price;duration;score"></o-table-columns-filter>

      <o-table-columns-grouping columns="score"></o-table-columns-grouping>
      <o-table-column attr="name" title-align="start" editable="yes" width="400px"></o-table-column>
      <o-table-column attr="location" title-align="start" editable="yes" width="500px"></o-table-column>
      <o-table-column attr="price" type="currency" thousand-separator="." decimal-separator="," currency-symbol="€" currency-symbol-position="right"
        title-align="end"></o-table-column>
      <o-table-column attr="score" title-align="end" filterable="yes" sortable="yes">
        <o-table-cell-renderer-real></o-table-cell-renderer-real>
      </o-table-column>
      <!-- Aggregate columns -->
      <o-table-column-aggregate attr="score" aggregate="avg" title="Avg Price"></o-table-column-aggregate>

      <!-- Table context menu -->
      <o-table-context-menu [context-menu]="contextMenu" insert="no" edit="no" view-detail="no"></o-table-context-menu>

      <!-- Table paginator -->
      <o-table-paginator page-size-options="5;10;15"></o-table-paginator>
    </ng-template>

    <o-context-menu #contextMenu>
      <o-context-menu-item icon="grade" label="Item 1" (execute)="onExecute('Item 1', $event)"></o-context-menu-item>
      <o-context-menu-item icon="grade" label="Item 2" enabled="no"></o-context-menu-item>
    </o-context-menu>

    <ng-template oDataViewGridItem let-item>
      <mat-card class="grid-card">
        <mat-card-header>
          <mat-card-title></mat-card-title>
          <mat-card-subtitle></mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
          <div fxLayout="column" fxLayoutAlign="center">Cost: </div>
        </mat-card-content>
      </mat-card>
    </ng-template>

</o-data-view>

tableCfg = { visibleColumns: 'name;location;price;duration;score', editButtonInRow: 'yes', selectAllCheckbox: 'yes', deleteButton: 'no', showReportOnDemandOption: 'no', exportButton: 'no', rowHeight: 'small' };

gridCfg = { cols: 4, gutterSize: '2px', gridItemHeight: '175px', quickFilterColumns: 'name;price', showPageSize: "yes", insertButtonFloatable: 'no' };

View modes

The o-data-view component can render data in two modes:

• table: optimized for dense data inspection and column-based operations (sorting, grouping, selection, etc.)
• grid: optimized for browsing, card layouts and visually rich items

You can define which view is shown by default using the default-view attribute.

Toggle between views

The o-data-view component can show a toggle to switch between table and grid modes.

The toggle behavior can be configured with:

• toggle-on-toolbar: places the toggle inside the toolbar.
• toggle-floatable: renders the toggle as a floating control (useful to keep it accessible while scrolling).
• toggle-button: indicates whether or not to show the toggle button.

toggle-button is enabled by default (yes). This is the default way o-data-view provides view switching between table and grid modes.

Custom view switching (without toggle)

In addition to the built-in toggle, the o-data-view component exposes a public method to switch the active view programmatically.

This is useful when you want to provide your own UI (buttons, menus, tabs, etc.) to change between table and grid modes.

Public method: changeView

Use the changeView method passing a valid ODataViewMode value:

• table
• grid

Example: custom buttons

<!-- Custom controls -->
<div class="data-view-actions">
  <button mat-stroked-button type="button" (click)="dv.changeView('table')">
    Table
  </button>
  <button mat-stroked-button type="button" (click)="dv.changeView('grid')">
    Grid
  </button>
</div>

<o-data-view #dv service="packs" entity="packs" keys="id" columns="id;name;location;price" title="Packs" toggle-button="no">

  <ng-template oDataViewTableColumns>
      <!--Custom o-table template-->
  </ng-template>

  <ng-template oDataViewGridItem let-item>
    <!--Custom o-grid template-->
  </ng-template>

</o-data-view>

In this example:

• The default toggle is disabled using toggle-button="no".
• A template reference variable (#dv) is used to access the component instance.
• Two custom buttons call changeView('table') and changeView('grid').

changeView only accepts table or grid. Any other value will be ignored or may cause unexpected behavior depending on the implementation.

Demo

You can see this and more examples of this component in the OntimizeWeb playground.

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