React Grid Display Density
React Grid의 Ignite UI for React 사용자가 IgrGrid
내 데이터의 간격과 레이아웃을 제어할 수 있습니다. 밀도를 변경하면 많은 양의 콘텐츠와 상호 작용할 때 사용자 경험을 크게 향상시킬 수 있습니다. 세 가지 디스플레이 밀도 옵션 중에서 선택할 수 있습니다.
- 아늑한
- 편안한
- 콤팩트
React Grid Display Density Example
Usage
위의 데모에서 볼 수 있듯이 IgrGrid
컴팩트, 아늑함, 편안함의 세 가지 밀도 옵션을 제공합니다. 아래 코드 조각은 displayDensity
설정하는 방법을 보여줍니다.
<IgrGrid id="grid" displayDensity="cosy" >
</IgrGrid>
또는
gridRef.current.displayDensity = 'cosy';
이제 각 옵션이 IgrGrid
구성 요소에 어떻게 반영되는지 자세히 살펴보겠습니다. 다양한 밀도 옵션 사이를 전환하면 각 IgrGrid
요소의 높이와 해당 패딩이 변경됩니다. 또한 사용자 정의 열 width
적용하려면 왼쪽 패딩과 오른쪽 패딩의 합보다 커야 한다는 점을 고려하시기 바랍니다.
- 편안한- 이것이 기본값이다
IgrGrid
밀도가 가장 낮고 행 높이가 다음과 같은 디스플레이 밀도50px
. 왼쪽 및 오른쪽 패딩은 다음과 같습니다.24px
; 최소 열width
~이다80px
; - 아늑한- 행 높이가
40px
인 중간 밀도입니다. 왼쪽 및 오른쪽 패딩은16px
입니다. 최소 열width
는64px
입니다. - 컴팩트- 가장 높은 강도와
32px
행 높이를 갖는 밀도입니다. 왼쪽 및 오른쪽 패딩은12px
입니다. 최소 열width
는56px
입니다.
[!Note] Please keep in mind that currently you can not override any of the sizes.
이제 샘플을 계속 진행하여 실제로 displayDensity
어떻게 적용되는지 살펴보겠습니다. 먼저 각 밀도 사이를 전환하는 데 도움이 되는 버튼을 추가해 보겠습니다.
<IgrPropertyEditorPanel
ref={propertyEditorRef}
componentRenderer={renderer}
target={grid}
descriptionType="WebGrid"
isHorizontal="true"
isWrappingEnabled="true">
<IgrPropertyEditorPropertyDescription
propertyPath="DisplayDensity"
name="DisplayDensityEditor">
</IgrPropertyEditorPropertyDescription>
</IgrPropertyEditorPanel>
이제 마크업을 추가할 수 있습니다.
<IgrGrid autoGenerate="false" ref={gridRef} data={invoicesData} allowFiltering="true">
<IgrColumn field="CustomerName" header="Customer Name" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="Country" header="Country" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="City" header="City" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="Address" header="Address" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="PostalCode" header="Postal Code" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="Salesperson" header="Sales Person" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipperName" header="Shipper Name" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="OrderDate" header="Order Date" dataType="Date" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ProductID" header="ID" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ProductName" header="Name" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="UnitPrice" header="Unit Price" dataType="Number" sortable="true" hasSummary="true" filterable="false">
</IgrColumn>
<IgrColumn field="Quantity" header="Quantity" dataType="Number" sortable="true" hasSummary="true" filterable="false">
</IgrColumn>
<IgrColumn field="Discontinued" header="Discontinued" dataType="Boolean" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="Discontinued" header="Discontinued" dataType="Boolean" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipName" header="Name" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipCountry" header="Country" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipCity" header="City" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipPostalCode" header="Postal Code" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
</IgrGrid>
마지막으로 실제로 밀도를 적용하는 데 필요한 논리를 제공하겠습니다.
private propertyEditor: IgrPropertyEditorPanel
private propertyEditorRef(r: IgrPropertyEditorPanel) {
this.propertyEditor = r;
this.setState({});
}
private displayDensityEditor: IgrPropertyEditorPropertyDescription
private grid: IgrGrid
private gridRef(r: IgrGrid) {
this.grid = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.propertyEditorRef = this.propertyEditorRef.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;
}
IgrGrid
의 행 높이를 변경할 수 있도록 IgrGrid
제공하는 또 다른 옵션은 rowHeight
속성입니다. 이제 이 속성이 displayDensity
와 함께 IgrGrid
레이아웃에 어떻게 영향을 미치는지 실제로 살펴보겠습니다.
다음 사항에 유의하시기 바랍니다.
displayDensity
옵션은 행 높이에 영향을 주지 않습니다. 만약 있다면rowHeight
지정된.displayDensity
위에서 설명한 대로 Grid의 나머지 모든 요소에 영향을 미칩니다.
이제 샘플을 확장하고 IgrGrid
에 rowHeight
속성을 추가할 수 있습니다.
<IgrGrid id="grid" displayDensity="cosy" rowHeight="80px" width="100%"
height="550px" allowFiltering="true">
</IgrGrid>
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.