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 Grid Column Pinning Overview
The Ignite UI for Web Components Data Grid supports the ability to pin columns, allowing the end users to lock a column in a particular column order.
A column or multiple columns can be pinned to the left-hand or right-hand side of the Data Grid. In addition, you can change the pin state of the columns by utilizing the pinColumn
function.
Web Components Grid Column Pinning Example
export class DataGridSharedData {
public static getEmployees(count?: number ): any [] {
if (count === undefined ) {
count = 250 ;
}
const employees: any [] = [];
let maleCount: number = 0 ;
let femaleCount: number = 0 ;
for (let i = 0 ; i < count; i++) {
const age: number = Math .round(this .getRandomNumber(20 , 40 ));
const gender: string = this .getRandomGender();
const firstName: string = this .getRandomNameFirst(gender);
const lastName: string = this .getRandomNameLast();
const street: string = this .getRandomStreet();
const country: string = this .getRandomItem(this .countries);
const city: string = this .getRandomCity(country);
const generation = Math .floor(age / 10 ) * 10 + "s" ;
const email: string = firstName.toLowerCase() + "@" + this .getRandomItem(this .emails);
const website: string = firstName.toLowerCase() + "-" + this .getRandomItem(this .websites);
let photoPath: any ;
if (gender === "male" ) {
maleCount++;
if (maleCount > 26 ) {
maleCount = 1 ;
}
photoPath = this .getPhotoMale(maleCount);
}
else {
femaleCount++;
if (femaleCount > 24 ) {
femaleCount = 1 ;
}
photoPath = this .getPhotoFemale(femaleCount);
}
let person: any = {};
person.Address = street + "," + city;
person.Age = age;
person.Birthday = this .getBirthday(age);
person.City = city;
person.Country = country;
person.CountryFlag = this .getCountryFlag(country);
person.Email = email;
person.FirstName = firstName;
person.Gender = this .getGenderPhoto(gender);
person.Generation = generation;
person.ID = this .pad(i + 1 , 5 );
person.LastName = lastName;
person.Name = firstName + " " + lastName;
person.Phone = this .getRandomPhone();
person.Photo = photoPath;
person.Street = street;
person.Salary = this .getRandomNumber(40 , 200 ) * 1000 ;
person.Sales = this .getRandomNumber(200 , 980 ) * 1000 ;
person.Website = website;
person.Productivity = this .getProductivity();
if (person.Salary < 50000 ) {
person.Income = "Low" ;
} else if (person.Salary < 100000 ) {
person.Income = "Average" ;
} else {
person.Income = "High" ;
}
employees.push(person);
}
return employees;
}
public static getProductivity(weekCount?: number ): any [] {
if (weekCount === undefined ) {
weekCount = 52 ;
}
const productivity: any [] = [];
for (let w = 0 ; w < weekCount; w++) {
const value = this .getRandomNumber(-50 , 50 );
productivity.push({Value : value, Week : w});
}
return productivity;
}
public static getSales(count?: number ): any [] {
if (count === undefined ) {
count = 250 ;
}
const names: string [] = [
"Intel CPU" , "AMD CPU" ,
"Intel Motherboard" , "AMD Motherboard" , "NVIDIA Motherboard" ,
"NVIDIA GPU" , "GIGABYTE GPU" , "Asus GPU" , "AMD GPU" , "MSI GPU" ,
"Corsair Memory" , "Patriot Memory" , "Skill Memory" ,
"Samsung HDD" , "WD HDD" , "Seagate HDD" , "Intel HDD" ,
"Samsung SSD" , "WD SSD" , "Seagate SSD" , "Intel SSD" ,
"Samsung Monitor" , "Asus Monitor" , "LG Monitor" , "HP Monitor" ];
const countries: string [] = ["USA" , "UK" , "France" , "Canada" , "Poland" , "Japan" , "Germany" ];
const status: string [] = ["Packing" , "Shipped" , "Delivered" ];
const sales: any [] = [];
for (let i = 0 ; i < count; i++) {
const price = this .getRandomNumber(100 , 900 );
const items = this .getRandomNumber(10 , 80 );
const value = price * items;
const margin = this .getRandomNumber(3 , 10 );
const profit = Math .round((price * margin / 100 ) * items);
const country = this .getRandomItem(countries);
sales.push({
BundlePrice : price,
ProductPrice : price,
Margin : margin,
OrderDate : this .getRandomDate(new Date (2012 , 0 , 1 ), new Date ()),
OrderItems : items,
OrderValue : value,
ProductID : 1001 + i,
ProductName : this .getRandomItem(names),
Profit : profit,
Countries : country,
CountryFlag : this .getCountryFlag(country),
Status : this .getRandomItem(status)
});
}
return sales;
}
public static getHouses(count?: number ): any [] {
if (count === undefined ) {
count = 250 ;
}
const houses: any [] = [];
const property: string [] = [ "Townhouse" , "Single" , "Condo" , "Villa" ];
const emails: string [] = [ "estates.com" , "remax.com" , "zillow.com" , "realtor.com" , "coldwell.com" ];
const countries: string [] = ["USA" , "UK" , "France" , "Canada" , "Poland" , "Japan" , "Germany" ];
for (let i = 0 ; i < count; i++) {
const year: number = this .getRandomNumber(1950 , 2015 );
const age: number = 2020 - year;
const gender: string = this .getRandomGender();
const firstName: string = this .getRandomNameFirst(gender);
const lastName: string = this .getRandomNameLast();
const initials = firstName.substr(0 , 1 ).toLowerCase();
const email: string = initials + lastName.toLowerCase() + "@" + this .getRandomItem(emails);
const street: string = this .getRandomStreet();
const country: string = this .getRandomItem(countries);
const city: string = this .getRandomCity(country);
houses.push({
Address : street + "," + city,
Age : age,
Agent : firstName + " " + lastName,
Area : this .getRandomNumber(50 , 300 ),
Baths : this .getRandomNumber(1 , 3 ),
Built : year,
City : city,
Country : country,
CountryFlag : this .getCountryFlag(country),
Email : email,
ID : this .pad(i + 1 , 5 ),
Phone : this .getRandomPhone(),
Price : this .getRandomNumber(210 , 900 ) * 1000 ,
Property : this .getRandomItem(property),
Rooms : this .getRandomNumber(2 , 5 ),
SaleDate : this .getRandomDate(new Date (2015 , 0 , 1 ), new Date ()),
Street : street,
});
}
return houses;
}
private static websites: string [] = [ ".com" , ".gov" , ".edu" , ".org" ];
private static emails: string [] = [ "gmail.com" , "yahoo.com" , "twitter.com" ];
private static genders: string [] = ["male" , "female" ];
private static maleNames: string [] = ["Kyle" , "Oscar" , "Ralph" , "Mike" , "Bill" , "Frank" , "Howard" , "Jack" , "Larry" , "Pete" , "Steve" , "Vince" , "Mark" , "Alex" , "Max" , "Brian" , "Chris" , "Andrew" , "Martin" , "Mike" , "Steve" , "Glenn" , "Bruce" ];
private static femaleNames: string [] = ["Gina" , "Irene" , "Katie" , "Brenda" , "Casey" , "Fiona" , "Holly" , "Kate" , "Liz" , "Pamela" , "Nelly" , "Marisa" , "Monica" , "Anna" , "Jessica" , "Sofia" , "Isabella" , "Margo" , "Jane" , "Audrey" , "Sally" , "Melanie" , "Greta" , "Aurora" , "Sally" ];
private static lastNames: string [] = ["Adams" , "Crowley" , "Ellis" , "Martinez" , "Irvine" , "Maxwell" , "Clark" , "Owens" , "Rooney" , "Lincoln" , "Thomas" , "Spacey" , "MOrgan" , "King" , "Newton" , "Fitzgerald" , "Holmes" , "Jefferson" , "Landry" , "Berry" , "Perez" , "Spencer" , "Starr" , "Carter" , "Edwards" , "Stark" , "Johnson" , "Fitz" , "Chief" , "Blanc" , "Perry" , "Stone" , "Williams" , "Lane" , "Jobs" , "Adams" , "Power" , "Tesla" ];
private static countries: string [] = ["USA" , "UK" , "France" , "Canada" , "Poland" ];
private static citiesUS: string [] = ["New York" , "Los Angeles" , "Miami" , "San Francisco" , "San Diego" , "Las Vegas" ];
private static citiesUK: string [] = ["London" , "Liverpool" , "Manchester" ];
private static citiesFR: string [] = ["Paris" , "Marseille" , "Lyon" ];
private static citiesCA: string [] = ["Toronto" , "Vancouver" , "Montreal" ];
private static citiesPL: string [] = ["Krakow" , "Warsaw" , "Wroclaw" , "Gdansk" ];
private static citiesJP: string [] = ["Tokyo" , "Osaka" , "Kyoto" , "Yokohama" ];
private static citiesGR: string [] = ["Berlin" , "Bonn" , "Cologne" , "Munich" , "Hamburg" ];
private static roadSuffixes: string [] = ["Road" , "Street" , "Way" ];
private static roadNames: string [] = ["Main" , "Garden" , "Broad" , "Oak" , "Cedar" , "Park" , "Pine" , "Elm" , "Market" , "Hill" ];
private static getRandomNumber(min: number , max : number ): number {
return Math .round(min + Math .random() * (max - min));
}
private static getRandomItem(array: any []): any {
const index = Math .round(this .getRandomNumber(0 , array.length - 1 ));
return array[index];
}
private static getRandomDate (start: Date , end: Date ) {
return new Date (start.getTime() + Math .random() * (end.getTime() - start.getTime()));
}
private static getRandomPhone(): string {
const phoneCode = this .getRandomNumber(100 , 900 );
const phoneNum1 = this .getRandomNumber(100 , 900 );
const phoneNum2 = this .getRandomNumber(1000 , 9000 );
const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
return phone;
}
private static getRandomGender(): string {
return this .getRandomItem(this .genders);
}
private static getRandomNameLast(): string {
return this .getRandomItem(this .lastNames);
}
private static getRandomNameFirst(gender: string ): string {
if (gender === "male" ) {
return this .getRandomItem(this .maleNames);
}
else {
return this .getRandomItem(this .femaleNames);
}
}
private static getRandomCity(country: string ): string {
if (country === "Canada" ) {
return this .getRandomItem(this .citiesCA);
} else if (country === "France" ) {
return this .getRandomItem(this .citiesFR);
} else if (country === "Poland" ) {
return this .getRandomItem(this .citiesPL);
} else if (country === "USA" ) {
return this .getRandomItem(this .citiesUS);
} else if (country === "Japan" ) {
return this .getRandomItem(this .citiesJP);
} else if (country === "Germany" ) {
return this .getRandomItem(this .citiesGR);
} else {
return this .getRandomItem(this .citiesUK);
}
}
private static getRandomStreet(): string {
const num = Math .round(this .getRandomNumber(100 , 300 )).toString();
const road = this .getRandomItem(this .roadNames);
const suffix = this .getRandomItem(this .roadSuffixes);
return num + " " + road + " " + suffix;
}
private static getBirthday(age: number ): Date {
const today: Date = new Date ();
const year: number = today.getFullYear() - age;
const month: number = this .getRandomNumber(0 , 8 );
const day: number = this .getRandomNumber(10 , 27 );
return new Date (year, month, day);
}
private static getPhotoMale(id: number ): string {
return 'https://static.infragistics.com/xplatform/images/people//GUY' + this .pad(id, 2 ) + '.png' ;
}
private static getPhotoFemale(id: number ): string {
return 'https://static.infragistics.com/xplatform/images/people/GIRL' + this .pad(id, 2 ) + '.png' ;
}
private static getGenderPhoto(gender: string ): string {
return 'https://static.infragistics.com/xplatform/images/genders/' + gender + '.png' ;
}
private static getCountryFlag(country: string ): string {
return 'https://static.infragistics.com/xplatform/images/flags/' + country + '.png' ;
}
private static pad (num: number , size: number ) {
let s = num + "" ;
while (s.length < size) {
s = "0" + s;
}
return s;
}
}
ts コピー import { ModuleManager } from 'igniteui-webcomponents-core' ;
import { IgcDataGridModule } from 'igniteui-webcomponents-grids' ;
import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-grids' ;
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids' ;
import { DataGridSharedData } from './DataGridSharedData' ;
import { PinnedPositions } from 'igniteui-webcomponents-grids' ;
import { Button } from '@material/mwc-button' ;
ModuleManager.register(
IgcDataGridModule,
IgcGridColumnOptionsModule
);
export class DataGridColumnPinningPicker {
public data: any [] = [];
public grid: IgcDataGridComponent;
public buttonLeft: Button;
public buttonRight: Button;
constructor ( ) {
this .onGridRef = this .onGridRef.bind(this );
this .onPinLeft = this .onPinLeft.bind(this );
this .onPinRight = this .onPinRight.bind(this );
this .onUnPin = this .onUnPin.bind(this );
this .data = DataGridSharedData.getEmployees();
this .grid = document .getElementById('grid' ) as IgcDataGridComponent;
this .grid.dataSource = DataGridSharedData.getEmployees();
this .buttonLeft = document .getElementById('pinLeft' ) as Button;
this .buttonRight = document .getElementById('pinRight' ) as Button;
this .buttonLeft.disabled = true ;
this .buttonRight.disabled = true ;
document .getElementById('pinLeft' )!.addEventListener('click' , this .onPinLeft);
document .getElementById('pinRight' )!.addEventListener('click' , this .onPinRight);
document .getElementById('unpinColumns' )!.addEventListener('click' , this .onUnPin);
}
public onGridRef (grid: IgcDataGridComponent ) {
this .grid = grid;
}
onPinLeft () {
this .buttonLeft.disabled = true ;
this .buttonRight.disabled = true ;
let idColumn = this .grid.actualColumns.item(0 );
let nameColumn = this .grid.actualColumns.item(1 );
this .grid.pinColumn(idColumn, PinnedPositions.Left);
this .grid.pinColumn(nameColumn, PinnedPositions.Left);
}
onPinRight () {
this .buttonLeft.disabled = true ;
this .buttonRight.disabled = true ;
let streetColumn = this .grid.actualColumns.item(5 );
let cityColumn = this .grid.actualColumns.item(6 );
let countryColumn = this .grid.actualColumns.item(7 );
this .grid.pinColumn(streetColumn, PinnedPositions.Right);
this .grid.pinColumn(cityColumn, PinnedPositions.Right);
this .grid.pinColumn(countryColumn, PinnedPositions.Right);
}
onUnPin () {
this .buttonLeft.disabled = false ;
this .buttonRight.disabled = false ;
let idColumn = this .grid.actualColumns.item(0 );
let nameColumn = this .grid.actualColumns.item(1 );
this .grid.pinColumn(idColumn, PinnedPositions.None);
this .grid.pinColumn(nameColumn, PinnedPositions.None);
let streetColumn = this .grid.actualColumns.item(5 );
let cityColumn = this .grid.actualColumns.item(6 );
let countryColumn = this .grid.actualColumns.item(7 );
this .grid.pinColumn(streetColumn, PinnedPositions.None);
this .grid.pinColumn(cityColumn, PinnedPositions.None);
this .grid.pinColumn(countryColumn, PinnedPositions.None);
}
}
new DataGridColumnPinningPicker();
ts コピー <!DOCTYPE html >
<html >
<head >
<title > DataGridColumnPinningPicker</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" >
<div class ="options horizontal" padding-bottom ="10px" >
<button id ="pinLeft" class ="options-label" style ="width: 100px" > Pin Left</button >
<button id ="pinRight" class ="options-label" style ="width: 100px" > Pin Right</button >
<button id ="unpinColumns" class ="options-label" style ="width: 115px" > Unpin Columns</button >
</div >
<igc-data-grid
id ="grid"
height ="calc(100% - 6rem)"
width ="100%"
is-column-options-enabled ="true"
auto-generate-columns ="false" >
<igc-text-column pinned ="left" field ="ID" header-text ="ID" width ="*>95" horizontal-alignment ="center" > </igc-text-column >
<igc-text-column pinned ="left" field ="Name" header-text ="Name" width ="*>170" > </igc-text-column >
<igc-date-time-column field ="Birthday" header-text ="Date of Birth" width ="*>150" horizontal-alignment ="center" > </igc-date-time-column >
<igc-numeric-column field ="Age" width ="*>95" horizontal-alignment ="center" > </igc-numeric-column >
<igc-image-column field ="CountryFlag" header-text ="Country" width ="*>125" content-opacity ="1" horizontal-alignment ="center"
padding-top ="5" padding-bottom ="5" > </igc-image-column >
<igc-text-column field ="Street" header-text ="Address" width ="*>240" > </igc-text-column >
<igc-text-column field ="City" width ="*>150" > </igc-text-column >
<igc-text-column field ="Country" width ="*>150" > </igc-text-column >
<igc-numeric-column field ="Salary" header-text ="Salary" positive-prefix ="$" show-grouping-separator ="true" > </igc-numeric-column >
<igc-numeric-column field ="Sales" header-text ="Sales" positive-prefix ="$" show-grouping-separator ="true" > </igc-numeric-column >
</igc-data-grid >
</div >
</div >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
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.
The Column Pinning API in the Data Grid can be enabled by setting either a column's Pinned
property, or when setting it by utilizing the pinColumn
function of the grid.
The Pinned
property has three options:
Left - enabling Left
will position pinned columns to the left-hand side of the grid.
Right - enabling Right
will position pinned columns to the right side of the grid.
None - enabling None
will unpin a column and reposition its default placement within the grid.
Unpinned columns that are adjacent to pinned columns will still maintain horizontal scrolling.
The pinColumn
function contains two required parameters. The first parameter is the column to be pinned, and the second is with the PinnedPositions
enumeration setting.
Code Snippet
The following code demonstrates how to implement column pinning in the Web Components Data Grid with column pinning by using the Pinned
property and pinColumn
function:
<igc-data-grid
id ="grid"
height ="calc(100% - 40px)"
width ="100%"
auto-generate-columns ="false"
default-column-min-width ="120px"
scrollbar-style ="thin"
>
<igc-text-column pinned ="left" field ="ID" header-text ="Employee ID" width ="100" horizontal-alignment ="center" > </igc-text-column >
<igc-text-column pinned ="left" field ="FirstName" header-text ="First Name" width ="170" > </igc-text-column >
<igc-text-column pinned ="left" field ="LastName" header-text ="Last Name" width ="170" > </igc-text-column >
<igc-date-time-column pinned ="none" field ="Birthday" header-text ="Date of Birth" width ="150" horizontal-alignment ="center" > </igc-date-time-column >
<igc-numeric-column pinned ="none" field ="Age" width ="100" horizontal-alignment ="center" > </igc-numeric-column >
<igc-image-column pinned ="none" field ="CountryFlag" header-text ="Country" width ="140" content-opacity ="1" horizontal-alignment ="center" > </igc-image-column >
<igc-text-column pinned ="right" field ="Street" header-text ="Address" width ="240" > </igc-text-column >
<igc-text-column pinned ="right" field ="City" width ="150" > </igc-text-column >
<igc-text-column pinned ="right" field ="Country" width ="150" > </igc-text-column >
</igc-data-grid >
html
import { PinnedPositions } from 'igniteui-webcomponents-grids' ;
onButtonPinLeft ( ) {
let idColumn = this .grid.actualColumns.item(0 );
let firstNameColumn = this .grid.actualColumns.item(1 );
let lastNameColumn = this .grid.actualColumns.item(2 );
idColumn.pinned = PinnedPositions.Left;
firstNameColumn.pinned = PinnedPositions.Left;
lastNameColumn.pinned = PinnedPositions.Left;
this .grid.pinColumn(idColumn, PinnedPositions.Left);
this .grid.pinColumn(firstNameColumn, PinnedPositions.Left);
this .grid.pinColumn(lastNameColumn, PinnedPositions.Left);
}
onButtonPinRight ( ) {
let streetColumn = this .grid.actualColumns.item(6 );
let cityColumn = this .grid.actualColumns.item(7 );
let countryColumn = this .grid.actualColumns.item(8 );
streetColumn.pinned = PinnedPositions.Right;
cityColumn.pinned = PinnedPositions.Right;
countryColumn.pinned = PinnedPositions.Right;
this .grid.pinColumn(streetColumn, PinnedPositions.Right);
this .grid.pinColumn(cityColumn, PinnedPositions.Right);
this .grid.pinColumn(countryColumn, PinnedPositions.Right);
}
onButtonUnPin ( ) {
let idColumn = this .grid.actualColumns.item(0 );
let firstNameColumn = this .grid.actualColumns.item(1 );
let lastNameColumn = this .grid.actualColumns.item(2 );
idColumn.pinned = PinnedPositions.Left;
firstNameColumn.pinned = PinnedPositions.Left;
lastNameColumn.pinned = PinnedPositions.Left;
this .grid.pinColumn(idColumn, PinnedPositions.None);
this .grid.pinColumn(firstNameColumn, PinnedPositions.None);
this .grid.pinColumn(lastNameColumn, PinnedPositions.None);
let streetColumn = this .grid.actualColumns.item(6 );
let cityColumn = this .grid.actualColumns.item(7 );
let countryColumn = this .grid.actualColumns.item(8 );
streetColumn.pinned = PinnedPositions.None;
cityColumn.pinned = PinnedPositions.None;
countryColumn.pinned = PinnedPositions.None;
this .grid.pinColumn(streetColumn, PinnedPositions.None);
this .grid.pinColumn(cityColumn, PinnedPositions.None);
this .grid.pinColumn(countryColumn, PinnedPositions.None);
}
ts
The Column Pinning UI is accessible within the IgcDataGridToolbarComponent
component separate from the grid. For this purpose all we have to do is set the toolbar's columnPinning
property to true. The toolbar will then display a IgcButtonComponent
, when clicked, will display the column pinning UI. This button also displays the total of pinned-left columns. If the toolbar is not created, enabling the columnPinning
property will have no effect and hide the button.
The IgcDataGridToolbarComponent
provides additional properties such as adding a title to the toolbar by using the toolbarTitle
property, placing text in the IgcButtonComponent
by setting the columnPinningText
property, and adding a title header to the column hiding UI by setting columnPinningTitle
.
Demo
export class DataGridSharedData {
public static getEmployees(count?: number ): any [] {
if (count === undefined ) {
count = 250 ;
}
const employees: any [] = [];
let maleCount: number = 0 ;
let femaleCount: number = 0 ;
for (let i = 0 ; i < count; i++) {
const age: number = Math .round(this .getRandomNumber(20 , 40 ));
const gender: string = this .getRandomGender();
const firstName: string = this .getRandomNameFirst(gender);
const lastName: string = this .getRandomNameLast();
const street: string = this .getRandomStreet();
const country: string = this .getRandomItem(this .countries);
const city: string = this .getRandomCity(country);
const generation = Math .floor(age / 10 ) * 10 + "s" ;
const email: string = firstName.toLowerCase() + "@" + this .getRandomItem(this .emails);
const website: string = firstName.toLowerCase() + "-" + this .getRandomItem(this .websites);
let photoPath: any ;
if (gender === "male" ) {
maleCount++;
if (maleCount > 26 ) {
maleCount = 1 ;
}
photoPath = this .getPhotoMale(maleCount);
}
else {
femaleCount++;
if (femaleCount > 24 ) {
femaleCount = 1 ;
}
photoPath = this .getPhotoFemale(femaleCount);
}
let person: any = {};
person.Address = street + "," + city;
person.Age = age;
person.Birthday = this .getBirthday(age);
person.City = city;
person.Country = country;
person.CountryFlag = this .getCountryFlag(country);
person.Email = email;
person.FirstName = firstName;
person.Gender = this .getGenderPhoto(gender);
person.Generation = generation;
person.ID = this .pad(i + 1 , 5 );
person.LastName = lastName;
person.Name = firstName + " " + lastName;
person.Phone = this .getRandomPhone();
person.Photo = photoPath;
person.Street = street;
person.Salary = this .getRandomNumber(40 , 200 ) * 1000 ;
person.Sales = this .getRandomNumber(200 , 980 ) * 1000 ;
person.Website = website;
person.Productivity = this .getProductivity();
if (person.Salary < 50000 ) {
person.Income = "Low" ;
} else if (person.Salary < 100000 ) {
person.Income = "Average" ;
} else {
person.Income = "High" ;
}
employees.push(person);
}
return employees;
}
public static getProductivity(weekCount?: number ): any [] {
if (weekCount === undefined ) {
weekCount = 52 ;
}
const productivity: any [] = [];
for (let w = 0 ; w < weekCount; w++) {
const value = this .getRandomNumber(-50 , 50 );
productivity.push({Value : value, Week : w});
}
return productivity;
}
public static getSales(count?: number ): any [] {
if (count === undefined ) {
count = 250 ;
}
const names: string [] = [
"Intel CPU" , "AMD CPU" ,
"Intel Motherboard" , "AMD Motherboard" , "NVIDIA Motherboard" ,
"NVIDIA GPU" , "GIGABYTE GPU" , "Asus GPU" , "AMD GPU" , "MSI GPU" ,
"Corsair Memory" , "Patriot Memory" , "Skill Memory" ,
"Samsung HDD" , "WD HDD" , "Seagate HDD" , "Intel HDD" ,
"Samsung SSD" , "WD SSD" , "Seagate SSD" , "Intel SSD" ,
"Samsung Monitor" , "Asus Monitor" , "LG Monitor" , "HP Monitor" ];
const countries: string [] = ["USA" , "UK" , "France" , "Canada" , "Poland" , "Japan" , "Germany" ];
const status: string [] = ["Packing" , "Shipped" , "Delivered" ];
const sales: any [] = [];
for (let i = 0 ; i < count; i++) {
const price = this .getRandomNumber(100 , 900 );
const items = this .getRandomNumber(10 , 80 );
const value = price * items;
const margin = this .getRandomNumber(3 , 10 );
const profit = Math .round((price * margin / 100 ) * items);
const country = this .getRandomItem(countries);
sales.push({
BundlePrice : price,
ProductPrice : price,
Margin : margin,
OrderDate : this .getRandomDate(new Date (2012 , 0 , 1 ), new Date ()),
OrderItems : items,
OrderValue : value,
ProductID : 1001 + i,
ProductName : this .getRandomItem(names),
Profit : profit,
Countries : country,
CountryFlag : this .getCountryFlag(country),
Status : this .getRandomItem(status)
});
}
return sales;
}
public static getHouses(count?: number ): any [] {
if (count === undefined ) {
count = 250 ;
}
const houses: any [] = [];
const property: string [] = [ "Townhouse" , "Single" , "Condo" , "Villa" ];
const emails: string [] = [ "estates.com" , "remax.com" , "zillow.com" , "realtor.com" , "coldwell.com" ];
const countries: string [] = ["USA" , "UK" , "France" , "Canada" , "Poland" , "Japan" , "Germany" ];
for (let i = 0 ; i < count; i++) {
const year: number = this .getRandomNumber(1950 , 2015 );
const age: number = 2020 - year;
const gender: string = this .getRandomGender();
const firstName: string = this .getRandomNameFirst(gender);
const lastName: string = this .getRandomNameLast();
const initials = firstName.substr(0 , 1 ).toLowerCase();
const email: string = initials + lastName.toLowerCase() + "@" + this .getRandomItem(emails);
const street: string = this .getRandomStreet();
const country: string = this .getRandomItem(countries);
const city: string = this .getRandomCity(country);
houses.push({
Address : street + "," + city,
Age : age,
Agent : firstName + " " + lastName,
Area : this .getRandomNumber(50 , 300 ),
Baths : this .getRandomNumber(1 , 3 ),
Built : year,
City : city,
Country : country,
CountryFlag : this .getCountryFlag(country),
Email : email,
ID : this .pad(i + 1 , 5 ),
Phone : this .getRandomPhone(),
Price : this .getRandomNumber(210 , 900 ) * 1000 ,
Property : this .getRandomItem(property),
Rooms : this .getRandomNumber(2 , 5 ),
SaleDate : this .getRandomDate(new Date (2015 , 0 , 1 ), new Date ()),
Street : street,
});
}
return houses;
}
private static websites: string [] = [ ".com" , ".gov" , ".edu" , ".org" ];
private static emails: string [] = [ "gmail.com" , "yahoo.com" , "twitter.com" ];
private static genders: string [] = ["male" , "female" ];
private static maleNames: string [] = ["Kyle" , "Oscar" , "Ralph" , "Mike" , "Bill" , "Frank" , "Howard" , "Jack" , "Larry" , "Pete" , "Steve" , "Vince" , "Mark" , "Alex" , "Max" , "Brian" , "Chris" , "Andrew" , "Martin" , "Mike" , "Steve" , "Glenn" , "Bruce" ];
private static femaleNames: string [] = ["Gina" , "Irene" , "Katie" , "Brenda" , "Casey" , "Fiona" , "Holly" , "Kate" , "Liz" , "Pamela" , "Nelly" , "Marisa" , "Monica" , "Anna" , "Jessica" , "Sofia" , "Isabella" , "Margo" , "Jane" , "Audrey" , "Sally" , "Melanie" , "Greta" , "Aurora" , "Sally" ];
private static lastNames: string [] = ["Adams" , "Crowley" , "Ellis" , "Martinez" , "Irvine" , "Maxwell" , "Clark" , "Owens" , "Rooney" , "Lincoln" , "Thomas" , "Spacey" , "MOrgan" , "King" , "Newton" , "Fitzgerald" , "Holmes" , "Jefferson" , "Landry" , "Berry" , "Perez" , "Spencer" , "Starr" , "Carter" , "Edwards" , "Stark" , "Johnson" , "Fitz" , "Chief" , "Blanc" , "Perry" , "Stone" , "Williams" , "Lane" , "Jobs" , "Adams" , "Power" , "Tesla" ];
private static countries: string [] = ["USA" , "UK" , "France" , "Canada" , "Poland" ];
private static citiesUS: string [] = ["New York" , "Los Angeles" , "Miami" , "San Francisco" , "San Diego" , "Las Vegas" ];
private static citiesUK: string [] = ["London" , "Liverpool" , "Manchester" ];
private static citiesFR: string [] = ["Paris" , "Marseille" , "Lyon" ];
private static citiesCA: string [] = ["Toronto" , "Vancouver" , "Montreal" ];
private static citiesPL: string [] = ["Krakow" , "Warsaw" , "Wroclaw" , "Gdansk" ];
private static citiesJP: string [] = ["Tokyo" , "Osaka" , "Kyoto" , "Yokohama" ];
private static citiesGR: string [] = ["Berlin" , "Bonn" , "Cologne" , "Munich" , "Hamburg" ];
private static roadSuffixes: string [] = ["Road" , "Street" , "Way" ];
private static roadNames: string [] = ["Main" , "Garden" , "Broad" , "Oak" , "Cedar" , "Park" , "Pine" , "Elm" , "Market" , "Hill" ];
private static getRandomNumber(min: number , max : number ): number {
return Math .round(min + Math .random() * (max - min));
}
private static getRandomItem(array: any []): any {
const index = Math .round(this .getRandomNumber(0 , array.length - 1 ));
return array[index];
}
private static getRandomDate (start: Date , end: Date ) {
return new Date (start.getTime() + Math .random() * (end.getTime() - start.getTime()));
}
private static getRandomPhone(): string {
const phoneCode = this .getRandomNumber(100 , 900 );
const phoneNum1 = this .getRandomNumber(100 , 900 );
const phoneNum2 = this .getRandomNumber(1000 , 9000 );
const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
return phone;
}
private static getRandomGender(): string {
return this .getRandomItem(this .genders);
}
private static getRandomNameLast(): string {
return this .getRandomItem(this .lastNames);
}
private static getRandomNameFirst(gender: string ): string {
if (gender === "male" ) {
return this .getRandomItem(this .maleNames);
}
else {
return this .getRandomItem(this .femaleNames);
}
}
private static getRandomCity(country: string ): string {
if (country === "Canada" ) {
return this .getRandomItem(this .citiesCA);
} else if (country === "France" ) {
return this .getRandomItem(this .citiesFR);
} else if (country === "Poland" ) {
return this .getRandomItem(this .citiesPL);
} else if (country === "USA" ) {
return this .getRandomItem(this .citiesUS);
} else if (country === "Japan" ) {
return this .getRandomItem(this .citiesJP);
} else if (country === "Germany" ) {
return this .getRandomItem(this .citiesGR);
} else {
return this .getRandomItem(this .citiesUK);
}
}
private static getRandomStreet(): string {
const num = Math .round(this .getRandomNumber(100 , 300 )).toString();
const road = this .getRandomItem(this .roadNames);
const suffix = this .getRandomItem(this .roadSuffixes);
return num + " " + road + " " + suffix;
}
private static getBirthday(age: number ): Date {
const today: Date = new Date ();
const year: number = today.getFullYear() - age;
const month: number = this .getRandomNumber(0 , 8 );
const day: number = this .getRandomNumber(10 , 27 );
return new Date (year, month, day);
}
private static getPhotoMale(id: number ): string {
return 'https://static.infragistics.com/xplatform/images/people//GUY' + this .pad(id, 2 ) + '.png' ;
}
private static getPhotoFemale(id: number ): string {
return 'https://static.infragistics.com/xplatform/images/people/GIRL' + this .pad(id, 2 ) + '.png' ;
}
private static getGenderPhoto(gender: string ): string {
return 'https://static.infragistics.com/xplatform/images/genders/' + gender + '.png' ;
}
private static getCountryFlag(country: string ): string {
return 'https://static.infragistics.com/xplatform/images/flags/' + country + '.png' ;
}
private static pad (num: number , size: number ) {
let s = num + "" ;
while (s.length < size) {
s = "0" + s;
}
return s;
}
}
ts コピー import { ModuleManager } from 'igniteui-webcomponents-core' ;
import { IgcDataGridModule } from 'igniteui-webcomponents-grids' ;
import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-grids' ;
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids' ;
import { IgcDataGridToolbarModule } from 'igniteui-webcomponents-grids' ;
import { IgcDataGridToolbarComponent } from 'igniteui-webcomponents-grids' ;
import { DataGridSharedData } from './DataGridSharedData' ;
ModuleManager.register(
IgcDataGridModule,
IgcDataGridToolbarModule,
IgcGridColumnOptionsModule
);
export class DataGridColumnPinningToolbar {
public data: any [] = [];
public grid: IgcDataGridComponent;
public toolbar: IgcDataGridToolbarComponent;
constructor ( ) {
this .onGridRef = this .onGridRef.bind(this );
this .data = DataGridSharedData.getEmployees();
this .grid = document .getElementById('grid' ) as IgcDataGridComponent;
this .grid.dataSource = DataGridSharedData.getEmployees();
this .toolbar = document .getElementById('toolbar' ) as IgcDataGridToolbarComponent;
this .toolbar.targetGrid = this .grid;
}
public onGridRef (grid: IgcDataGridComponent ) {
this .grid = grid;
}
}
new DataGridColumnPinningToolbar();
ts コピー <!DOCTYPE html >
<html >
<head >
<title > DataGridColumnPinningToolbar</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-toolbar
id ="toolbar"
toolbar-title ="Employees"
column-pinning ="true" >
</igc-data-grid-toolbar >
<igc-data-grid
id ="grid"
height ="calc(100% - 6rem)"
width ="100%"
auto-generate-columns ="false"
corner-radius-top-left ="0"
corner-radius-top-right ="0"
is-column-options-enabled ="true"
default-column-min-width ="120px" >
<igc-text-column field ="ID" header-text ="ID" width ="*>110" horizontal-alignment ="center" > </igc-text-column >
<igc-text-column field ="FirstName" header-text ="First Name" width ="*>140" > </igc-text-column >
<igc-text-column field ="LastName" header-text ="Last Name" width ="*>130" > </igc-text-column >
<igc-date-time-column field ="Birthday" header-text ="Date of Birth" width ="*>150" horizontal-alignment ="center" > </igc-date-time-column >
<igc-numeric-column field ="Age" width ="*>90" horizontal-alignment ="center" > </igc-numeric-column >
<igc-image-column field ="CountryFlag" header-text ="Country" width ="*>115" content-opacity ="1" horizontal-alignment ="center"
padding-top ="5" padding-bottom ="5" > </igc-image-column >
<igc-text-column field ="Street" header-text ="Address" width ="*>170" > </igc-text-column >
<igc-text-column field ="City" width ="*>125" > </igc-text-column >
<igc-text-column field ="Country" width ="*>125" > </igc-text-column >
<igc-numeric-column field ="Salary" header-text ="Salary" positive-prefix ="$" show-grouping-separator ="true" > </igc-numeric-column >
<igc-numeric-column field ="Sales" header-text ="Sales" positive-prefix ="$" show-grouping-separator ="true" > </igc-numeric-column >
</igc-data-grid >
</div >
</div >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
Code Snippet
<igc-dataGrid-toolbar
toolbar-title ="Grid Title"
column-pinning ="true"
column-pinning-text ="Pinning"
column-pinning-title ="Columns Pinned Left" >
</igc-dataGrid-toolbar >
<igc-data-grid
id ="grid"
height ="calc(100% - 40px)"
width ="100%"
auto-generate-columns ="false"
default-column-min-width ="120px"
scrollbar-style = "thin" >
</igc-data-grid >
html
import { IgcDataGrid } from 'igniteui-webcomponents-grids' ;
import { IgcDataGridToolbar } from 'igniteui-webcomponents-grids' ;
private grid: IgcDataGridComponent;
private toolbar: IgcToolbarComponent;
connectedCallback ( ) {
this .toolbar.targetGrid = this .grid;
let productNameColumn = document .getElementById("productname" ) as IgcTextColumnComponent;
productNameColumn.pinned = true ;
this .toolbar.columnPinning = true ;
this .toolbar.toolbarTitle = "Grid Title" ;
this .toolbar.columnPinningText = "Pinning Text" ;
this .toolbar.columnPinningTitle = "Pinning Title Text" ;
}
ts
API References