React 트리 그리드 크기
React 트리 그리드의 Ignite UI for React 크기 기능을 사용하면 사용자가 트리 그리드 내의 데이터 간격과 레이아웃을 제어할 수 있습니다 IgrTreeGrid--ig-size 하면 많은 양의 콘텐츠와 상호 작용할 때 사용자 환경을 크게 향상시킬 수 있습니다. 세 가지 크기 옵션 중에서 선택할 수 있습니다.
--ig-size-large--ig-size-medium--ig-size-small
React Tree Grid 크기 예제
export class EmployeesFlatDetailsItem public constructor (init: Partial<EmployeesFlatDetailsItem> )Object .assign(this , init);
}
public Address: string ;
public Age: number ;
public City: string ;
public Country: string ;
public Fax: string ;
public HireDate: string ;
public ID: number ;
public Name: string ;
public ParentID: number ;
public Phone: string ;
public PostalCode: number ;
public Title: string ;
public LastName: string ;
public FullAddress: string ;
}
export class EmployeesFlatDetails extends Array <EmployeesFlatDetailsItem > public constructor (items: Array <EmployeesFlatDetailsItem> | number = -1 )if (Array .isArray(items)) {
super (...items);
} else {
const newItems = [
new EmployeesFlatDetailsItem(
{
Address : `Obere Str. 57` ,
Age : 55 ,
City : `Berlin` ,
Country : `Germany` ,
Fax : `030-0076545` ,
HireDate : `2008-03-20` ,
ID : 1 ,
Name : `Johnathan Winchester` ,
ParentID : -1 ,
Phone : `030-0074321` ,
PostalCode : 12209 ,
Title : `Development Manager` ,
LastName : `Winchester` ,
FullAddress : `Obere Str. 57, Berlin, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address : `Avda. de la Constitución 2222` ,
Age : 42 ,
City : `México D.F.` ,
Country : `Mexico` ,
Fax : `(51) 555-3745` ,
HireDate : `2014-01-22` ,
ID : 4 ,
Name : `Ana Sanders` ,
ParentID : -1 ,
Phone : `(5) 555-4729` ,
PostalCode : 5021 ,
Title : `CEO` ,
LastName : `Sanders` ,
FullAddress : `Avda. de la Constitución 2222, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address : `Mataderos 2312` ,
Age : 49 ,
City : `México D.F.` ,
Country : `Mexico` ,
Fax : `(5) 555-3995` ,
HireDate : `2014-01-22` ,
ID : 18 ,
Name : `Victoria Lincoln` ,
ParentID : -1 ,
Phone : `(5) 555-3932` ,
PostalCode : 5023 ,
Title : `Accounting Manager` ,
LastName : `Lincoln` ,
FullAddress : `Mataderos 2312, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address : `120 Hanover Sq.` ,
Age : 61 ,
City : `London` ,
Country : `UK` ,
Fax : `(171) 555-6750` ,
HireDate : `2010-01-01` ,
ID : 10 ,
Name : `Yang Wang` ,
ParentID : -1 ,
Phone : `(171) 555-7788` ,
PostalCode : 39000 ,
Title : `Localization Manager` ,
LastName : `Wang` ,
FullAddress : `120 Hanover Sq., London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address : `Berguvsvägen 8` ,
Age : 43 ,
City : `Luleå` ,
Country : `Sweden` ,
Fax : `0921-12 34 67` ,
HireDate : `2011-06-03` ,
ID : 3 ,
Name : `Michael Burke` ,
ParentID : 1 ,
Phone : `0921-12 34 65` ,
PostalCode : 29000 ,
Title : `Senior Software Developer` ,
LastName : `Burke` ,
FullAddress : `Berguvsvägen 8, Luleå, Sweden`
}),
new EmployeesFlatDetailsItem(
{
Address : `Forsterstr. 57` ,
Age : 29 ,
City : `Mannheim` ,
Country : `Germany` ,
Fax : `0621-08924` ,
HireDate : `2009-06-19` ,
ID : 2 ,
Name : `Thomas Anderson` ,
ParentID : 1 ,
Phone : `0621-08460` ,
PostalCode : 68306 ,
Title : `Senior Software Developer` ,
LastName : `Anderson` ,
FullAddress : `Forsterstr. 57, Mannheim, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address : `24, place Kléber` ,
Age : 31 ,
City : `Strasbourg` ,
Country : `France` ,
Fax : `88.60.15.32` ,
HireDate : `2014-08-18` ,
ID : 11 ,
Name : `Monica Reyes` ,
ParentID : 1 ,
Phone : `88.60.15.31` ,
PostalCode : 67000 ,
Title : `Software Development Team Lead` ,
LastName : `Reyes` ,
FullAddress : `24, place Kléber, Strasbourg, France`
}),
new EmployeesFlatDetailsItem(
{
Address : `C/ Araquil, 67` ,
Age : 35 ,
City : `Madrid` ,
Country : `Spain` ,
Fax : `(911) 555 91 99` ,
HireDate : `2015-09-17` ,
ID : 6 ,
Name : `Roland Mendel` ,
ParentID : 11 ,
Phone : `(91) 555 22 82` ,
PostalCode : 28023 ,
Title : `Senior Software Developer` ,
LastName : `Mendel` ,
FullAddress : `C/ Araquil, 67, Madrid, Spain`
}),
new EmployeesFlatDetailsItem(
{
Address : `12, rue des Bouchers` ,
Age : 44 ,
City : `Marseille` ,
Country : `France` ,
Fax : `91.24.45.41` ,
HireDate : `2009-10-11` ,
ID : 12 ,
Name : `Sven Cooper` ,
ParentID : 11 ,
Phone : `91.24.45.40` ,
PostalCode : 13008 ,
Title : `Senior Software Developer` ,
LastName : `Cooper` ,
FullAddress : `12, rue des Bouchers, Marseille, France`
}),
new EmployeesFlatDetailsItem(
{
Address : `23 Tsawassen Blvd.` ,
Age : 44 ,
City : `Tsawassen` ,
Country : `Canada` ,
Fax : `(604) 555-3745` ,
HireDate : `2014-04-04` ,
ID : 14 ,
Name : `Laurence Johnson` ,
ParentID : 4 ,
Phone : `(604) 555-4729` ,
PostalCode : 19000 ,
Title : `Director` ,
LastName : `Johnson` ,
FullAddress : `23 Tsawassen Blvd., Tsawassen, Canada`
}),
new EmployeesFlatDetailsItem(
{
Address : `Fauntleroy Circus` ,
Age : 25 ,
City : `London` ,
Country : `UK` ,
Fax : `(125) 555-3798` ,
HireDate : `2017-11-9` ,
ID : 5 ,
Name : `Elizabeth Richards` ,
ParentID : 4 ,
Phone : `(171) 555-1212` ,
PostalCode : 30000 ,
Title : `Vice President` ,
LastName : `Richards` ,
FullAddress : `Fauntleroy Circus, London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address : `Cerrito 333` ,
Age : 39 ,
City : `Buenos Aires` ,
Country : `Argentina` ,
Fax : `(121) 135-4892` ,
HireDate : `2010-03-22` ,
ID : 13 ,
Name : `Trevor Ashworth` ,
ParentID : 5 ,
Phone : `(1) 135-5555` ,
PostalCode : 1010 ,
Title : `Director` ,
LastName : `Ashworth` ,
FullAddress : `Cerrito 333, Buenos Aires, Argentina`
}),
new EmployeesFlatDetailsItem(
{
Address : `Sierras de Granada 9993` ,
Age : 44 ,
City : `México D.F.` ,
Country : `Mexico` ,
Fax : `(153) 555-7293` ,
HireDate : `2014-04-04` ,
ID : 17 ,
Name : `Antonio Moreno` ,
ParentID : 18 ,
Phone : `(5) 555-3392` ,
PostalCode : 5022 ,
Title : `Senior Accountant` ,
LastName : `Moreno` ,
FullAddress : `Sierras de Granada 9993, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address : `Hauptstr. 29` ,
Age : 50 ,
City : `Sao Paulo` ,
Country : `Brazil` ,
Fax : `(531) 555-6691` ,
HireDate : `2007-11-18` ,
ID : 7 ,
Name : `Pedro Rodriguez` ,
ParentID : 10 ,
Phone : `0452-076545` ,
PostalCode : 3012 ,
Title : `Senior Localization Developer` ,
LastName : `Rodriguez` ,
FullAddress : `Hauptstr. 29, Sao Paulo, Brazil`
}),
new EmployeesFlatDetailsItem(
{
Address : `Av. dos Lusíadas, 23` ,
Age : 27 ,
City : `Bern` ,
Country : `Switzerland` ,
Fax : `(271) 335-357` ,
HireDate : `2016-02-19` ,
ID : 8 ,
Name : `Casey Harper` ,
ParentID : 10 ,
Phone : `(11) 555-7647` ,
PostalCode : 40000 ,
Title : `Senior Localization` ,
LastName : `Harper` ,
FullAddress : `Av. dos Lusíadas, 23, Bern, Switzerland`
}),
new EmployeesFlatDetailsItem(
{
Address : `Berkeley Gardens 12` ,
Age : 25 ,
City : `London` ,
Country : `UK` ,
Fax : `(171) 555-9199` ,
HireDate : `2017-11-09` ,
ID : 15 ,
Name : `Patricia Simpson` ,
ParentID : 7 ,
Phone : `(171) 555-2282` ,
PostalCode : 26000 ,
Title : `Localization Intern` ,
LastName : `Simpson` ,
FullAddress : `Berkeley Gardens 12, London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address : `Walserweg 21` ,
Age : 39 ,
City : `Aachen` ,
Country : `Germany` ,
Fax : `0241-059428` ,
HireDate : `2010-03-22` ,
ID : 9 ,
Name : `Francisco Chang` ,
ParentID : 7 ,
Phone : `0241-039123` ,
PostalCode : 52066 ,
Title : `Localization Intern` ,
LastName : `Chang` ,
FullAddress : `Walserweg 21, Aachen, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address : `35 King George` ,
Age : 25 ,
City : `London` ,
Country : `UK` ,
Fax : `(171) 555-3373` ,
HireDate : `2018-03-18` ,
ID : 16 ,
Name : `Peter Lewis` ,
ParentID : 7 ,
Phone : `(171) 555-0297` ,
PostalCode : 48000 ,
Title : `Localization Intern` ,
LastName : `Lewis` ,
FullAddress : `35 King George, London, UK`
}),
];
super (...newItems.slice(0 ));
}
}
}
ts コピー import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts" ;
import { IgrTreeGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts" ;
import { IgrTreeGrid, IgrColumn, IgrColumnGroup } from "@infragistics/igniteui-react-grids" ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core" ;
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails' ;
import { IgrPropertyEditorPropertyDescriptionChangedEventArgs } from "@infragistics/igniteui-react-layouts" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
const mods : any [] = [
IgrPropertyEditorPanelModule,
IgrTreeGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private propertyEditor: IgrPropertyEditorPanel
private propertyEditorRef(r: IgrPropertyEditorPanel) {
this .propertyEditor = r;
this .setState({});
}
private sizeEditor: IgrPropertyEditorPropertyDescription
private treeGrid: IgrTreeGrid
private treeGridRef(r: IgrTreeGrid) {
this .treeGrid = r;
this .setState({});
}
constructor (props: any ) {
super (props);
this .propertyEditorRef = this .propertyEditorRef.bind(this );
this .webTreeGridSetGridSize = this .webTreeGridSetGridSize.bind(this );
this .treeGridRef = this .treeGridRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" > <div className ="options vertical" > <IgrPropertyEditorPanel
ref ={this.propertyEditorRef}
componentRenderer ={this.renderer}
target ={this.treeGrid}
descriptionType ="WebTreeGrid"
isHorizontal ="true"
isWrappingEnabled ="true" > <IgrPropertyEditorPropertyDescription
name ="SizeEditor"
label ="Grid Size:"
valueType ="EnumValue"
dropDownNames ={[ "Small ", "Medium ", "Large "]}
dropDownValues ={[ "Small ", "Medium ", "Large "]}
changed ={this.webTreeGridSetGridSize} > </IgrPropertyEditorPropertyDescription > </IgrPropertyEditorPanel > </div > <div className ="container fill" > <IgrTreeGrid
autoGenerate ={false}
ref ={this.treeGridRef}
id ="treeGrid"
data ={this.employeesFlatDetails}
primaryKey ="ID"
foreignKey ="ParentID"
allowFiltering ={true} > <IgrColumn
field ="Name"
dataType ="string"
sortable ={true}
hasSummary ={true}
width ="200" > </IgrColumn > <IgrColumnGroup
header ="General Information" > <IgrColumn
field ="HireDate"
dataType ="date"
sortable ={true}
hasSummary ={true} > </IgrColumn > <IgrColumnGroup
header ="Personal Details" > <IgrColumn
field ="ID"
dataType ="number"
filterable ={false} > </IgrColumn > <IgrColumn
field ="Title"
dataType ="string"
sortable ={true}
hasSummary ={true} > </IgrColumn > <IgrColumn
field ="Age"
dataType ="number"
sortable ={true}
hasSummary ={true}
filterable ={false} > </IgrColumn > </IgrColumnGroup > </IgrColumnGroup > <IgrColumnGroup
header ="Address Information" > <IgrColumnGroup
header ="Location" > <IgrColumn
field ="Country"
dataType ="string"
sortable ={true}
hasSummary ={true} > </IgrColumn > <IgrColumn
field ="City"
dataType ="string"
sortable ={true}
hasSummary ={true} > </IgrColumn > <IgrColumn
field ="Address"
dataType ="string"
sortable ={true}
hasSummary ={true} > </IgrColumn > </IgrColumnGroup > <IgrColumnGroup
header ="Contact Information" > <IgrColumn
field ="Phone"
dataType ="string"
sortable ={true}
hasSummary ={true} > </IgrColumn > <IgrColumn
field ="Fax"
dataType ="string"
sortable ={true}
hasSummary ={true} > </IgrColumn > <IgrColumn
field ="PostalCode"
dataType ="string"
sortable ={true}
hasSummary ={true} > </IgrColumn > </IgrColumnGroup > </IgrColumnGroup > </IgrTreeGrid > </div > </div > private _employeesFlatDetails: EmployeesFlatDetails = null ;
public get employeesFlatDetails(): EmployeesFlatDetails {
if (this ._employeesFlatDetails == null )
{
this ._employeesFlatDetails = new EmployeesFlatDetails();
}
return this ._employeesFlatDetails;
}
private _componentRenderer: ComponentRenderer = null ;
public get renderer(): ComponentRenderer {
if (this ._componentRenderer == null ) {
this ._componentRenderer = new ComponentRenderer();
var context = this ._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebTreeGridDescriptionModule.register(context);
}
return this ._componentRenderer;
}
public webTreeGridSetGridSize(sender: any , args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
var newVal = (args.newValue as string ).toLowerCase();
var grid = document.getElementById("treeGrid" );
grid.style.setProperty('--ig-size' , `var (--ig-size-${newVal})`);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> tsx コピー
이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
용법
위의 데모에서 볼 수 있듯이 IgrTreeGrid작다 , 보통 그리고 큰 . 아래 코드 스니펫은 설정 방법을 보여줍니다.--ig-size 인라인 또는 CSS 클래스의 일부 :
.gridSize {
--ig-size: var (--ig-size-medium);
}
css <IgrTreeGrid className ="gridSize" > </IgrTreeGrid > tsx 이제 각 옵션이 구성 요소에 어떻게 반영되는지 IgrTreeGridIgrTreeGridwidth
큰 - 이것이 기본값입니다. IgrTreeGrid50px. 왼쪽 및 오른쪽 패딩은 다음과 같습니다. 24px; 최소 열 width80px;중간 - 이것은 행 높이가 있는 40px 중간 강렬한 크기입니다. 왼쪽 및 오른쪽 패딩은 다음과 같습니다 16px. 최소 열 width64px.small - 강렬하고 32px 행 높이가 가장 높은 크기입니다. 왼쪽 및 오른쪽 패딩은 다음과 같습니다 12px. 최소 열 width56px.
현재는 어떤 크기도 재정의할 수 없다는 점에 유의하세요.
이제 샘플을 계속 진행하면서 가--ig-size 어떻게 적용되는지 실제로 살펴보겠습니다. 먼저 각 크기 사이를 전환하는 데 도움이 되는 버튼을 추가해 보겠습니다.
<IgrPropertyEditorPanel
ref ={propertyEditorRef}
componentRenderer ={renderer}
target ={grid}
descriptionType ="WebTreeGrid"
isHorizontal ={true}
isWrappingEnabled ={true} > <IgrPropertyEditorPropertyDescription
name ="SizeEditor"
label ="Grid Size:"
valueType ="EnumValue"
dropDownNames ={[ "Small ", "Medium ", "Large "]}
dropDownValues ={[ "Small ", "Medium ", "Large "]}
changed ={webGridSetGridSize} > </IgrPropertyEditorPropertyDescription > </IgrPropertyEditorPanel > tsx 이제 마크업을 추가할 수 있습니다.
<IgrTreeGrid autoGenerate ={false} ref ={treeGridRef} data ={employeesFlatDetails} primaryKey ="ID" foreignKey ="ParentID" allowFiltering ={true} > <IgrColumn field ="Name" dataType ="string" sortable ={true} hasSummary ={true} width ="200" > </IgrColumn > <IgrColumnGroup header ="General Information" > <IgrColumn field ="HireDate" dataType ="date" sortable ={true} hasSummary ={true} > </IgrColumn > <IgrColumnGroup header ="Personal Details" > <IgrColumn field ="ID" dataType ="number" filterable ={false} > </IgrColumn > <IgrColumn field ="Title" dataType ="string" sortable ={true} hasSummary ={true} > </IgrColumn > <IgrColumn field ="Age" dataType ="number" sortable ={true} hasSummary ={true} filterable ={false} > </IgrColumn > </IgrColumnGroup > </IgrColumnGroup > <IgrColumnGroup header ="Address Information" > <IgrColumnGroup header ="Location" > <IgrColumn field ="Country" dataType ="string" sortable ={true} hasSummary ={true} > </IgrColumn > <IgrColumn field ="City" dataType ="string" sortable ={true} hasSummary ={true} > </IgrColumn > <IgrColumn field ="Address" dataType ="string" sortable ={true} hasSummary ={true} > </IgrColumn > </IgrColumnGroup > <IgrColumnGroup header ="Contact Information" > <IgrColumn field ="Phone" dataType ="string" sortable ={true} hasSummary ={true} > </IgrColumn > <IgrColumn field ="Fax" dataType ="string" sortable ={true} hasSummary ={true} > </IgrColumn > <IgrColumn field ="PostalCode" dataType ="string" sortable ={true} hasSummary ={true} > </IgrColumn > </IgrColumnGroup > </IgrColumnGroup > </IgrTreeGrid > tsx 마지막으로 실제로 크기를 적용하는 데 필요한 논리를 제공하겠습니다.
private propertyEditor: IgrPropertyEditorPanel
private propertyEditorRef(r: IgrPropertyEditorPanel) {
this .propertyEditor = r;
this .setState({});
}
private sizeEditor: IgrPropertyEditorPropertyDescription
private grid: IgrTreeGrid
private gridRef(r: IgrTreeGrid) {
this .grid = r;
this .setState({});
}
constructor (props: any ) {
super (props);
this .propertyEditorRef = this .propertyEditorRef.bind(this );
this .webGridSetGridSize = this .webGridSetGridSize.bind(this );
this .gridRef = this .gridRef.bind(this );
}
private _componentRenderer: ComponentRenderer = null ;
public get renderer(): ComponentRenderer {
if (this ._componentRenderer == null ) {
this ._componentRenderer = new ComponentRenderer();
var context = this ._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebHierarchicalGridDescriptionModule.register(context);
}
return this ._componentRenderer;
}
public webGridSetGridSize(sender: any , args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
var newVal = (args.newValue as string ).toLowerCase();
var grid = document.getElementById("grid" );
grid.style.setProperty('--ig-size' , `var (--ig-size-${newVal})`);
}
tsx 행 IgrTreeGridIgrTreeGridrowHeightIgrTreeGrid--ig-size 어떤 영향을 미치는지 실제로 살펴 보겠습니다.
다음 사항에 유의하시기 바랍니다.
--ig-size CSS 변수가 지정된 경우 rowHeight 행 높이에 영향을 미치지 않습니다.--ig-size 위에서 설명한 것처럼 Tree Grid의 모든 나머지 요소에 영향을 미칩니다 .
이제 샘플을 확장하고 속성을 추가할 rowHeightIgrTreeGrid
<IgrTreeGrid className ="gridSize" rowHeight ="80px" width ="100%" height ="550px" allowFiltering ={true} > </IgrTreeGrid > tsx API 참조
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
