Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Web Components Binding Matrix Data
The Ignite UI for Web Components Data Table / Data Grid supports template columns to create a matrix table.
Web Components Binding Matrix Data Example
import { IgcDataGridModule, IgcTemplateHeaderComponent, IgcTemplateColumnComponent, CellContentHorizontalAlignment, CellContentVerticalAlignment, IgcTextColumnComponent, IgcNumericColumnComponent, IgcTemplateCellUpdatingEventArgs, IgcTemplateCellInfo, IgcTemplateHeaderCellUpdatingEventArgs } from 'igniteui-webcomponents-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(IgcDataGridModule);
export class DataGridTypeMatrixTable {
private grid: IgcDataGridComponent;
public dataPeople: any[] = [];
public dataRelations: any[] = [];
private VerticalHeader: IgcTemplateHeaderComponent;
private HorizontalRightHeader: IgcTemplateHeaderComponent;
private HorizontalLeftHeader: IgcTemplateHeaderComponent;
public cellSize: number = 50;
public names: string[] = ['Kyle', 'Oscar', 'Gina', 'Irene', 'Kate', 'Brenda', 'Mark', 'John', 'Andrew', 'Casey', 'Holly', 'Larry', 'Pete', 'Steve'];
constructor() {
this.onVerticalHeaderUpdating = this.onVerticalHeaderUpdating.bind(this);
this.onHorizontalHeaderUpdating = this.onHorizontalHeaderUpdating.bind(this);
this.onCellUpdating = this.onCellUpdating.bind(this);
this.createData();
this.VerticalHeader = new IgcTemplateHeaderComponent();
this.VerticalHeader.cellUpdating = (s: any, e: any) => this.onVerticalHeaderUpdating(s, e);
this.HorizontalRightHeader = new IgcTemplateHeaderComponent();
this.HorizontalRightHeader.cellUpdating = (s: any, e: any) => this.onHorizontalHeaderUpdating(s, e, 'right');
this.HorizontalLeftHeader = new IgcTemplateHeaderComponent();
this.HorizontalLeftHeader.cellUpdating = (s: any, e: any) => this.onHorizontalHeaderUpdating(s, e, 'left');
for (const name of this.names) {
const column = document.getElementById(name) as IgcTemplateColumnComponent;
column.field = name;
column.header = this.VerticalHeader;
column.horizontalAlignment = CellContentHorizontalAlignment.Center;
column.verticalAlignment = CellContentVerticalAlignment.Bottom;
column.border = 'lightgray';
column.borderLeftWidth = 0.5;
column.borderRightWidth = 0.5;
column.borderTopWidth = 0;
column.borderBottomWidth = 0;
column.paddingBottom = 0;
column.paddingLeft = 0;
column.paddingTop = 0;
column.paddingRight = 0;
column.cellUpdating = this.onCellUpdating;
}
// TextColumn Setup
const nameColumn = document.getElementById('nameColumn') as IgcTextColumnComponent;
nameColumn.header = this.HorizontalRightHeader;
nameColumn.border = 'lightgray';
nameColumn.borderTopWidth = 0;
nameColumn.borderBottomWidth = 0;
// NumericColumn Setup
const countColumn = document.getElementById('countColumn') as IgcNumericColumnComponent;
countColumn.header = this.HorizontalLeftHeader;
countColumn.border = 'lightgray';
countColumn.borderTopWidth = 0;
countColumn.borderBottomWidth = 0;
this.grid = document.getElementById('grid') as IgcDataGridComponent;
this.grid.dataSource = this.dataRelations;
}
public onVerticalHeaderUpdating(s: IgcTemplateHeaderComponent, e: IgcTemplateHeaderCellUpdatingEventArgs) {
const content = e.content as HTMLDivElement;
let label: HTMLSpanElement | null = null;
if (content.childElementCount === 0) {
content.style.lineHeight = '140px';
label = document.createElement('div');
label.style.background = 'transparent';
label.style.color = 'rgb(24, 29, 31)';
label.style.transform = 'rotate(270deg)';
label.style.transformOrigin = 'center';
label.style.fontSize = '13px';
label.style.fontFamily = 'Verdana';
content.appendChild(label);
} else {
label = content.children[0] as HTMLDivElement;
}
const info = e.cellInfo as IgcTemplateCellInfo;
label.textContent = info.value;
}
public onHorizontalHeaderUpdating(s: IgcTemplateHeaderComponent, e: IgcTemplateHeaderCellUpdatingEventArgs, align: string) {
const content = e.content as HTMLDivElement;
let label: HTMLSpanElement | null = null;
if (content.childElementCount === 0) {
content.style.lineHeight = '140px';
label = document.createElement('div');
label.style.background = 'transparent';
label.style.color = 'rgb(24, 29, 31)';
label.style.verticalAlign = 'bottom';
label.style.textAlign = align;
label.style.fontSize = '13px';
label.style.fontFamily = 'Verdana';
content.appendChild(label);
} else {
label = content.children[0] as HTMLDivElement;
}
const info = e.cellInfo as IgcTemplateCellInfo;
label.textContent = info.value;
}
public onCellUpdating(s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) {
const content = e.content as HTMLDivElement;
const info = e.cellInfo as IgcTemplateCellInfo;
let cell: HTMLDivElement | null = null;
if (content.childElementCount === 0) {
content.style.margin = '0px';
content.style.padding = '0px';
cell = document.createElement('div');
cell.style.margin = '0px';
cell.style.padding = '0px';
cell.style.fontFamily = 'Verdana';
cell.style.fontSize = 'large';
cell.style.textAlign = 'center';
cell.style.fontSize = 'large';
content.appendChild(cell);
} else {
cell = content.children[0] as HTMLDivElement;
}
if (info.value === 1) {
cell.style.color = 'lightgray';
cell.style.background = 'lightgray';
cell.textContent = '';
} else if (info.value > 0) {
cell.style.color = '#02d302';
cell.style.background = 'transparent';
cell.textContent = '\u2714';
} else {
cell.style.color = 'red';
cell.style.background = 'transparent';
cell.textContent = '\u2716';
}
}
public createData() {
this.dataPeople = [];
this.dataRelations = [];
this.names.sort();
for (let i = 0; i < this.names.length; i++) {
const person: any = {};
person.ID = i;
person.Name = this.names[i];
this.dataPeople.push(person);
}
let friendships = new Map<string, number>();
for (let row = 0; row < this.dataPeople.length; row++) {
const person1 = this.dataPeople[row];
for (let col = 0; col < this.dataPeople.length; col++) {
const person2 = this.dataPeople[col];
const rand = Math.random() - 0.5;
if (person1.Name !== person2.Name) {
if (rand > 0) {
const p1p2 = person1.Name + person2.Name;
const p2p1 = person2.Name + person1.Name;
if (!friendships.has(p1p2)) {
friendships.set(p1p2, rand);
}
if (!friendships.has(p2p1)) {
friendships.set(p2p1, rand);
}
}
}
}
}
for (let row = 0; row < this.dataPeople.length; row++) {
const person1 = this.dataPeople[row];
const relation: any = {};
relation.ID = row;
relation.Name = person1.Name;
relation.Count = 0;
for (let col = 0; col < this.dataPeople.length; col++) {
const person2 = this.dataPeople[col];
const key = person2.Name
if (person1.Name === person2.Name) {
relation[key] = 1;
} else {
const p1p2 = person1.Name + person2.Name;
if (friendships.has(p1p2)) {
relation[key] = friendships.get(p1p2);
relation.Count += 1;
} else {
relation[key] = 0;
}
}
}
this.dataRelations.push(relation);
}
}
public getRandomNumber(min: number, max: number): number {
return Math.round(min + Math.random() * (max - min));
}
public getRandomItem(array: any[]): any {
const index = Math.round(this.getRandomNumber(0, array.length - 1));
return array[index];
}
}
new DataGridTypeMatrixTable();
ts<!DOCTYPE html>
<html>
<head>
<title>DataGridTypeMatrixTable</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<igc-data-grid
id="grid"
height="100%"
width="100%"
row-height="50"
row-separator-height="1"
row-separator-background="lightgray"
header-separator-background="lightgray"
header-separator-width="1"
header-height="110"
column-resizing-mode="None"
auto-generate-columns="false"
>
<igc-text-column id="nameColumn" field="Name" header-text="Friends" horizontal-alignment="right" width="*>110"></igc-text-column>
<igc-template-column id="Kyle" field="Kyle" header-text="Kyle" horizontal-alignment="center" width="50"></igc-template-column>
<igc-template-column id="Oscar" field="Oscar" header-text="Oscar" horizontal-alignment="center" width="50"></igc-template-column>
<igc-template-column id="Gina" field="Gina" header-text="Gina" horizontal-alignment="center" width="50"></igc-template-column>
<igc-template-column id="Irene" field="Irene" header-text="Irene" horizontal-alignment="center" width="50"></igc-template-column>
<igc-template-column id="Kate" field="Kate" header-text="Kate" horizontal-alignment="center" width="50"></igc-template-column>
<igc-template-column id="Brenda" field="Brenda" header-text="Brenda" horizontal-alignment="center" width="50"></igc-template-column>
<igc-template-column id="Mark" field="Mark" header-text="Mark" horizontal-alignment="center" width="50"></igc-template-column>
<igc-template-column id="John" field="John" header-text="John" horizontal-alignment="center" width="50"></igc-template-column>
<igc-template-column id="Andrew" field="Andrew" header-text="Andrew" horizontal-alignment="center" width="50"></igc-template-column>
<igc-template-column id="Casey" field="Casey" header-text="Casey" horizontal-alignment="center" width="50"></igc-template-column>
<igc-template-column id="Holly" field="Holly" header-text="Holly" horizontal-alignment="center" width="50"></igc-template-column>
<igc-template-column id="Larry" field="Larry" header-text="Larry" horizontal-alignment="center" width="50"></igc-template-column>
<igc-template-column id="Pete" field="Pete" header-text="Pete" horizontal-alignment="center" width="50"></igc-template-column>
<igc-template-column id="Steve" field="Steve" header-text="Steve" horizontal-alignment="center" width="50"></igc-template-column>
<igc-numeric-column id="countColumn" field="Count" header-text="Total" horizontal-alignment="left" width="*>110"></igc-numeric-column>
</igc-data-grid>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.