React Cambio de tamaño de las columnas de la cuadrícula
La Ignite UI for React Data Grid admite la capacidad de cambiar el tamaño de las columnas, lo que le brinda flexibilidad sobre cómo desea mostrar sus columnas con respecto al ancho de cada una.
React Ejemplo de cambio de tamaño de columna de cuadrícula
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 ): 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 ): string {
let s = num + "" ;
while (s.length < size) {
s = "0" + s;
}
return s;
}
}
ts コピー import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { DataGridSharedData } from './DataGridSharedData' ;
import { IgrDataGrid } from "@infragistics/igniteui-react-grids" ;
import { IgrDataGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrTextColumn } from "@infragistics/igniteui-react-grids" ;
import { IgrNumericColumn } from "@infragistics/igniteui-react-grids" ;
import { IgrDateTimeColumn } from "@infragistics/igniteui-react-grids" ;
import { IgrGridColumnOptionsModule } from "@infragistics/igniteui-react-grids" ;
IgrDataGridModule.register();
IgrGridColumnOptionsModule.register();
export default class GridColumnResizing extends React.Component <any, any> {
public data: any [];
public grid: IgrDataGrid;
constructor (props: any ) {
super (props);
this .state = {
columnSeparatorWidth: 1 ,
columnResizingMode: "Deferred" ,
columnResizingAnimation: "Interpolate"
};
this .data = DataGridSharedData.getEmployees();
}
public onGridRef = (grid: IgrDataGrid) => {
if (!grid) { return ; }
this .grid = grid;
this .grid.columnResizingSeparatorBackground = "Black" ;
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="options horizontal" >
<label className ="options-label" style ={{ width: "120px " }}> Resizing Mode:</label >
<select className ="options-select" style ={{ width: "135px " }} defaultValue ="Deferred" onChange ={this.onColumnResizingModeChange} >
<option > Deferred</option >
<option > Immediate</option >
<option > None</option >
</select >
{}
<label className ="options-label" style ={{ width: "180px " }}> Resizing Animation:</label >
<select className ="options-select" style ={{ width: "135px " }} defaultValue ="Auto" onChange ={this.onColumnResizingAnimationModeChange} >
<option > Auto</option >
<option > Interpolate</option >
<option > None</option >
</select >
</div >
<IgrDataGrid
ref ={this.onGridRef}
height ="calc(100% - 40px)"
width ="100%"
columnResizingAnimationMode ="Interpolate"
columnResizingMode ="Deferred"
columnResizingSeparatorWidth ={1}
autoGenerateColumns ={false}
defaultColumnMinWidth ={100}
dataSource ={this.data}
isColumnOptionsEnabled ="true" >
<IgrTextColumn field ="Name" width ="*> 170 "/>
<IgrTextColumn field=" Street" width=" *>120 " headerText=" Address" />
<IgrTextColumn field=" City" width=" *>120 "/>
<IgrNumericColumn field=" Salary" width=" *>120 " positivePrefix=" $" showGroupingSeparator=" true " />
<IgrDateTimeColumn field=" Birthday" width=" *>170 " />
</IgrDataGrid>
</div>
);
}
public onColumnResizingModeChange = (e: any) => {
this.grid.columnResizingMode = e.target.value;
}
public onColumnResizingAnimationModeChange = (e: any) => {
this.grid.columnResizingAnimationMode = e.target.value;
}
public onSeparatorWidthChanged = (e: any) => {
this.grid.columnResizingSeparatorWidth = e.target.value;
// this.setState({ columnSeparatorWidth: e.target.value });
}
}
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DataGridColumnResizing/>);
tsx コピー
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
El cambio de tamaño de las columnas en la Ignite UI for React DataGrid está activado de forma predeterminada y se puede controlar mediante la propiedad columnResizingMode
de la cuadrícula. Esta propiedad tiene tres opciones. Cada una de ellas se explica a continuación:
Deferred
: la opción predeterminada. Al cambiar el tamaño, aparecerá un separador que muestra qué tan grande o pequeña será la columna cuando se cambie el tamaño.
Immediate
: Al cambiar el tamaño, no habrá separador. El ancho de la columna seguirá el puntero a medida que arrastre el borde de la columna y cambie el tamaño en consecuencia.
None
: no se puede cambiar el tamaño de las columnas.
Cuando el cambio de tamaño de la columna se establece en Deferred
, el separador que aparece se puede modificar en color y ancho usando las propiedades columnResizingSeparatorBackground
y columnResizingSeparatorWidth
de la cuadrícula, respectivamente.
También puede animar las columnas a medida que cambian de tamaño cuando el modo de cambio de tamaño está configurado en Solo Deferred
. Esto se hace estableciendo la propiedad columnResizingAnimationMode
en Interpolate
.
Se puede determinar si cada columna de la cuadrícula puede cambiar de tamaño individualmente o no. Si desea habilitar o deshabilitar el cambio de tamaño en una columna en particular, puede configurar la propiedad IsResizingEnabled de esa columna.
Al cambiar el tamaño de una columna de ancho de estrella, cambiará esa columna a una columna fija.
Fragmento de código
El siguiente fragmento de código demuestra cómo implementar el cambio de tamaño de columnas en la cuadrícula de datos React, donde la columna Street en este caso no se podrá cambiar de tamaño. En este caso, el separador de cambio de tamaño de columnas tendrá 5 píxeles de ancho y las columnas que se puedan cambiar de tamaño también se animarán cuando se cambie su tamaño:
import { ColumnResizingMode } from 'igniteui-react-grids' ;
import { ColumnResizingAnimationMode } from 'igniteui-react-grids' ;
ts
<IgrDataGrid ref ={this.onGridRef}
height ="100%"
width ="100%"
columnResizingAnimationMode ={ColumnResizingAnimationMode.Interpolate}
columnResizingMode ={ColumnResizingMode.Deferred}
columnResizingSeparatorWidth ={5}
autoGenerateColumns ={false}
dataSource ={this.data} >
<IgrTextColumn field ="FirstName" headerText ="First Name" />
<IgrTextColumn field ="LastName" headerText ="Last Name" />
<IgrTextColumn field ="Street" headerText ="Street" isResizingEnabled ={false} />
<IgrTextColumn field ="City" headerText ="City" />
</IgrDataGrid >
tsx
Referencias de API