Data Table Configuration Overriding

In this section all available data table Level Configuration techniques will be discuss with it's usages.

Overriding Hierarchy

The below hierarchy shows order of data table property overriding and each level of defined properties will be replace if same property was uses in next level of hierarchy.

    |__ Data Table Configuration
    |   |
    |   |___ Default Configurations
    |   |___ Module Level Configuration
    |   |___ Template Level Configuration
    |
    |__ Dropdown Configuration
    |
    \/
  

Default Configurations

Ornamentum has given default values for all most all configurations. the default values explicitly mention on each respective data table property or function documentation.

Default configurations can be override by Module Level Configuration and Template Level Configuration.

export class DataTableDataStateService {  
  public persistTableState = false;
  public storageMode: DataTableStorageMode = 'session';
  public multiColumnSortable = false;
  public showHeader = false;
  .
  .
  .
  public pageable = false;
  public showIndexColumn = false;
  public indexColumnTitle = '#';
  public rowSelectable = false;
  public selectMode: DataTableSelectMode = 'single';
}

Module Level Configuration

Ornamentum supports, configuration overriding in module root configurations. You can provide a DataTableConfig type of object inside forRoot() tag. This is the place where you can override the default configurations for the entire module at once for all the data tables in a given module.

Module level configuration can be overridden by Template Level Configuration.

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

import { DataTableModule } from 'ornamentum';
import { DataTableConfigOverridingRoutingModule } from './data-table-config-overriding-routing.module';
import { DataTableConfigOverridingComponent } from './index';

@NgModule({
  declarations: [DataTableConfigOverridingComponent],
  exports: [],
  imports: [
    CommonModule,
    FormsModule,
    // Module level configuration goes here
    // Module level configuration overrides both default and template level configurations. 
    DataTableModule.forRoot({
        showColumnSelector:  true,
        showHeader: true,
        sortable: true,
        filterable: true,
        columnResizable: true
    }),
    DataTableConfigOverridingRoutingModule
  ],
  providers: []
})
export class DataTableConfigOverridingModule {
}

Template Level Configuration

Template level configuration can be overridden by both Default Configurations and Module Level Configuration. You can simply bind a required type of value to respective configurations on HTML template.

In other word this is the place where you can override the default & module level configurations for individual data table in given module.

 <ng-data-table
   // Table level property binding goes here 
   [id]="'sales_products_demo_01'"
   [title]="'Sales Products'"
   [selectTrackBy]="'key'"
   [minHeight]="140"
   [minWidth]="1024"
   [items]="items"
   [dataSource]="dataSource"
   [limit]="14"
   [minContentHeight]="400"
   [minContentWidth]="1080"
   [showHeader]="true"
   [pageable]="true"
   [showRefreshButton]="true"
   [showRowSelectCheckbox]="true"
   [rowSelectable]="true"
   [selectOnRowClick]="true"
   [showSubstituteRows]="true"
   [persistTableState]="false"
   [expandableRows]="false"
   [showRowExpandLoadingSpinner]="false"
   [selectMode]="'multi'">
   <ng-data-table-column
     // Column level property binding goes here 
     [field]="'key'"
     [title]="'Key'"
     [showInColumnSelector]="false"
     [sortable]="true"
     [filterable]="true"
     [width]="70">
 </ng-data-table>
API Doc for Data Table Configuration Overriding