Overview

To help you understand every section, we have created a live demo for each DkGrid feature.

DkGrid Examples

We have deployed all the DkGrid features as live examples. We describe every DkGrid part showing a code snippet from its corresponding live demo.

A live-demo link looks as follows:

Getting Started live example.

Live Examples Themes and Schemes

When navigating the live examples, you can change the Theme and Scheme at run time. The following themes are available in light and dark schemes:

Theme name	Palettes
default	blue, amber, red
brand	dikesoft-blue, amber, red
indigo	indigo, pink, red
deep-purple	deep-purple, amber, red
pink	pink, blue-gray, red
purple	purple, amber, red
custom-green	green, yellow, red

Except for dikesoft-blue, we have taken all palettes from the Material Design Color System.

Styles generation

We have used Tailwind CSS to generate all the above themes and schemes. We also use the predefined classes offered by Tailwind CSS.

Visit the Tailwind CSS official docs for further details.

Changing some DkGrid properties at runtime

As you can change the Theme and the Scheme, you can also change some DkGrid properties when interacting with the live examples.

The following are all the properties you can change. These properties feed the corresponding DkGrid properties.

We bind the DkGrid properties corresponding to the DkGrid feature we are describing.

Size

Property	Description	Default value	Validators
Grid Width	The DkGrid's width.	auto	Required
Grid Height	The DkGrid's height.	500px	Required

Appearance

Property	Description	Default value	Validators
Material Elevation	Indicates if the DkGrid will express elevation.	true
Elevation value	The elevation value the DkGrid will take.	2	Required Min value: 0 Max value: 24 Only numbers
Vertical Row Lines	Indicates if the lines that separate every column value will be shown.	false
Striped	Indicates if one row will be distinguished from the other.	true

Header

Property	Description	Default value	Validators
Column Context Menu	It allows showing or hiding the context menu for all the DkGrid columns.	true
Header Height	Sets the height, in pixels, for every column header.	60	Required Min value: 40 Max value: 120 Only numbers

Dragging

Property	Description	Default value
Allow column dragging	A flag that indicates if the DkGrid allows its columns to be dragged.	false

Rows

Property	Description	Default value	Validators
Row Id	A flag that allows displaying the id of every row.	false
Column Id width	Establishes the width, in pixels, of the column that displays the Row Id.	70	Required Min value: 50 Max value: 100 Only numbers
Content Row Height	Establishes the height, in pixels, of every displayed row.	50	Required Min value: 45 Max value: 80 Only numbers

Row Grouping

Property	Description	Default value	Validators
Row Grouping Height	The height, in pixels, of the panel where the columns are displayed, which the DkGrid is grouped by.	71	Required Min value: 50 Max value: 100 Only numbers
Columns Height	The height, in pixels, of every column that is displayed in the Row-Grouping panel.	36	Required Min value: 30 Max value: 80 Only numbers
Row Grouping Indent	A flag that allows displaying or hiding the indentation of every row under a group.	true
Indent width	The width, in pixels, of the indentation every row under a group will have.	25	Required Min value: 25 Max value: 150 Only numbers

Sorting

Property	Description	Default value
Allow sorting	Indicates if the DkGrid will allow or not that its rows could be ordered.	false

Filtering

Property	Description	Default value	Validators
Row Filter	The flag that allows if the row, under the headers, will be shown.	false
Row Filter Height	The height, in pixels, that the row filter will have.	55	Required Min value: 45 Max value: 80 Only numbers
On-Demand filter	This flag allows filtering rows until the user sends the conditions by clicking the corresponding button.	false

Selection

Property	Description	Default value
Allow selection	The flag that allows that every row could be selected.	false

Edition

Property	Description	Default value	Validators
Edition mode	This flag is used to enable or disable the rows edition, if the DkGrid allows edition as well.	false
Edition Toolbar	This flag allows displaying or hiding the edition toolbar.	false
Toolbar Height	The height, in pixels, that the Edition Toolbar will have.	55	Required Min value: 45 Max value: 100 Only numbers
Toolbar Item Height	The height, in pixels, of every option of the Edition Toolbar.	42	Required Min value: 36 Max value: 60 Only numbers
Toolbar position	The value indicates if the Edition Toolbar is shown at the top or bottom of the DkGrid.	bottom
Toolbar alignment	The value indicates if the Edition Toolbar is shown at the left, center or right.	left

Pagination

Property	Description	Default value	Validators
Pagination	This flag allows paginating the data set.	false
Page size	The value indicates how many rows will be displayed for every page.	50	Required Min value: 1 Only numbers
Pagination Height	The height, in pixel, that the paginator will have.	64	Required Min value: 60 Max value: 100 Only numbers

Floating Configuration Panel

While navigating the live examples, you will see a red square with white gear.

Configuration white gear

Clicking on the white gear will show a floating panel with all the themes, schemes, and DkGrid properties.

Themes, Schemes and DkGrid properties

You can click on the circular arrow icon to reset the values for each group of properties.

Setting properties

The DkGrid changes all the described properties through a service called DkGridConfig. This service is responsible for delivering every property when changing one of them through the Floating Configuration Panel.

dk-grid.config.service.ts

import { Injectable } from '@angular/core';

import { BehaviorSubject, Observable } from 'rxjs';

import { DkGridProperties, gridSize, gridAppearance, gridHeader,
  gridRows, gridRowGrouping, gridSorting, gridFitlering,
  gridSelection, gridEdition, gridDragging, gridPagination
} from 'app/core/config/dk-grid.properties';

@Injectable({
  providedIn: 'root'
})
export class DkGridConfig {

  private gridConfigSubject: BehaviorSubject<DkGridProperties>;

  constructor() {
    this.gridConfigSubject = new BehaviorSubject<DkGridProperties>(this.getDefaultProperties());
  }

  get configChange(): Observable<DkGridProperties> {
    return this.gridConfigSubject.asObservable();
  }

  get properties(): DkGridProperties {
    return this.gridConfigSubject.value;
  }

  getDefaultProperties(): DkGridProperties {
    return {
      ...gridSize, ...gridAppearance, ...gridHeader, ...gridRows,
      ...gridRowGrouping, ...gridSorting, ...gridFitlering, ...gridSelection,
      ...gridEdition, ...gridDragging, ...gridPagination
    };
  }

  changeGridConfig(value: DkGridProperties): void {
    this.gridConfigSubject.next(value);
  }
}

Remember that the DkGridConfig service does not belong to the DkGridComponent definition itself. It was created only for demo purposes.

As you can see in the DkGridConfig definition, it has a public property called configChange of type Observable<DkGridProperties>. Therefore, If a live-demo feature should react to these properties changes, the corresponding DkGridComponent instance must listen to the configChange observable.

We have grouped all the properties in one type called DkGridProperties, an Intersection type.

dk-grid.properties.ts

import { EditionToolbarPosition, EditionToolbarAlignment } from '@dk-grid-standard/angular';

export interface DkGridSize {
    width: string;
    height: string;
}
export interface DkGridAppearance {
    matElevation: boolean;
    elevationValue: number;
    verticalRowLines: boolean;
    stripeRows: boolean;
}

export interface DkGridHeader {
    columnContextMenu: boolean;
    headerHeight: number;
}

export interface DkGridDragging {
    allowColumnDragging: boolean;
}

export interface DkGridRows {
    displayRowId: boolean;
    rowIdWidth: number;
    contentRowHeight: number;
}

export interface DkGridRowGrouping {
    rowGroupingHeight: number;
    rowGroupingColumnHeight: number;
    displayRowGroupingIndent: boolean;
    rowGroupingIndentWidth: number;
}

export interface DkGridSorting {
    allowSorting: boolean;
}

export interface DkGridFiltering {
    allowRowFilter: boolean;
    filterRowHeight: number;
    onDemandFilter: boolean;
}

export interface DkGridSelection {
    allowSelection: boolean;
}

export interface DkGridEdition {
    editionMode: boolean;
    displayEditionToolbar: boolean;
    editionToolbarHeight: number;
    edtitionToolbarItemHeight: number;
    editionToolbarPosition: EditionToolbarPosition;
    editionToolbarAlignment: EditionToolbarAlignment;
}

export interface DkGridPagination {
    allowPagination: boolean;
    pageSize: number;
    paginationHeight: number;
}

export type DkGridProperties = DkGridSize & DkGridAppearance & DkGridHeader &
    DkGridRows & DkGridRowGrouping & DkGridSorting &
    DkGridFiltering & DkGridSelection & DkGridEdition &
    DkGridDragging & DkGridPagination;

export const gridSize: DkGridSize = {
    width: 'auto',
    height: '500px'
};

export const gridAppearance: DkGridAppearance = {
    matElevation: true,
    elevationValue: 2,
    stripeRows: true,
    verticalRowLines: false
};

export const gridHeader: DkGridHeader = {
    columnContextMenu: true,
    headerHeight: 60
};

export const gridDragging: DkGridDragging = {
    allowColumnDragging: false
};

export const gridRows: DkGridRows = {
    displayRowId: false,
    rowIdWidth: 70,
    contentRowHeight: 50
};

export const gridRowGrouping: DkGridRowGrouping = {
    rowGroupingHeight: 71,
    displayRowGroupingIndent: true,
    rowGroupingIndentWidth: 25,
    rowGroupingColumnHeight: 36
};

export const gridSorting: DkGridSorting = {
    allowSorting: false
};

export const gridFitlering: DkGridFiltering = {
  allowRowFilter: false,
  onDemandFilter: false,
  filterRowHeight: 55
};

export const gridSelection: DkGridSelection = {
  allowSelection: false
};

export const gridEdition: DkGridEdition = {
  editionMode: false,
  displayEditionToolbar: false,
  editionToolbarHeight: 55,
  edtitionToolbarItemHeight: 42,
  editionToolbarAlignment: 'left',
  editionToolbarPosition: 'bottom'
};

export const gridPagination: DkGridPagination = {
  allowPagination: false,
  pageSize: 50,
  paginationHeight: 64
};

We have created these interfaces for demo purposes. Therefore, every property of these interfaces feeds the corresponding DkGridComponent properties.

Sample Data

We generate sample data of 1000 rows or even more. The service SampleData is responsible for this data generation.

We have generated only five rows for the Quick Start Tutorial by hand.

Shape of data

The main interface is Employee. This interface contains all the fields that we display in the live examples.

data.model.ts

export interface Employee {
  employeeId: string;
  firstName: string;
  lastName: string;
  gender: string;
  age: number;

  country: string;
  hireDate: Date;

  email: string;

  sales: number[];
  totalSales: number;
  bonus: number;
  performance: number;
}

export const months: string[] = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
];

Conventions

For a better experience reading this set of docs, we have taken some conventions:

1. Any type, even primitives, are highlighted in the text in green color. For example, Date, string, numeric, DkGridComponent, Employee.

2. HTML selectors are highlighted in the text in red color. For example, div, section, dk-grid, dk-grid-column.

3. Properties for the dk-grid and dk-grid-column selectors are highlighted in text in orange color. For example, allowSorting, sortable, allowRowGrouping, draggable, filterable.

4. Injection Tokens are highlighted in blue color. For example, HEADER_ROW_HEIGHT, LOADING_MESSAGE.