React Grid 다중 행 레이아웃

    Ignite UI for React의 다중 행 레이아웃은 React Grid의 렌더링 기능을 확장합니다. 이 기능을 사용하면 단일 데이터 레코드를 여러 개의 보이는 행으로 분할할 수 있습니다.

    React Multi-row Layout Example

    The declaration of Multi-row Layout is achieved through columnLayout component. Each columnLayout component should be considered as a block, containing one or multiple IgrColumn components. Some of the grid features work on block level (those are listed in the "Feature Integration" section below). For example the virtualization will use the block to determine the virtual chunks, so for better performance split the columns into more columnLayout blocks if the layout allows it. There should be no columns outside of those blocks and no usage of columnGroup when configuring a multi-row layout. Multi-row Layout is implemented on top of the grid layout specification and should conform to its requirements.

    The IgrColumn component exposes four IgrInput properties to determine the location and span of each cell:

    • colStart - column index from which the field is starting. This property is mandatory.
    • rowStart - row index from which the field is starting. This property is mandatory.
    • colEnd - column index where the current field should end. The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field. This property is optional. If not set defaults to colStart + 1.
    • rowEnd - row index where the current field should end. The amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field. This property is optional. If not set defaults to rowStart + 1.
    <IgrColumnLayout>
    <IgrColumn rowStart={1} colStart={1} rowEnd={3} field="ID"></IgrColumn>
</IgrColumnLayout>
<IgrColumnLayout>
    <IgrColumn rowStart={1} colStart={1} colEnd={3} field="CompanyName"></IgrColumn>
    <IgrColumn rowStart={2} colStart={1} colEnd={2} field="ContactName"></IgrColumn>
    <IgrColumn rowStart={2} colStart={2} colEnd={3} field="ContactTitle"></IgrColumn>
</IgrColumnLayout>
<IgrColumnLayout>
    <IgrColumn rowStart={1} colStart={1} colEnd={3} field="Country"></IgrColumn>
    <IgrColumn rowStart={1} colStart={3} colEnd={5} field="Region"></IgrColumn>
    <IgrColumn rowStart={1} colStart={5} colEnd={7} field="PostalCode"></IgrColumn>
    <IgrColumn rowStart={2} colStart={1} colEnd={4} field="City"></IgrColumn>
    <IgrColumn rowStart={2} colStart={4} colEnd={7} field="Address"></IgrColumn>
</IgrColumnLayout>
<IgrColumnLayout>
    <IgrColumn rowStart={1} colStart={1} field="Phone"></IgrColumn>
    <IgrColumn rowStart={2} colStart={1} field="Fax"></IgrColumn>
</IgrColumnLayout>

    위 구성의 결과는 아래 스크린샷에서 볼 수 있습니다.

    multi-row-layout

    [!Note] rowStart and colStart properties must be set for each IgrColumn into a columnLayout. The columnLayout component is not verifying if the layout is correct and not throwing errors or warnings about that. The developers must make sure that the declaration of their layout is correct and complete, otherwise they may end up in broken layout with misalignments, overlaps and browser inconsistencies.

    Feature Integration

    Due to the completely different rendering approach of Multi-row Layout, some of the column features will work only on columnLayout component. Such features are Column Pinning and Column Hiding. Otherwise - Sorting and Grouping will work in the same way - on the IgrColumn component.

    • Filtering - only Excel Style Filtering is supported. Setting FilterMode explicitly to FilterMode.quickFilter has no effect.
    • 페이징 - 시각적 행이 아닌 레코드에서 작동합니다.
    • Group By - HideGroupedColumns option has no effect in Multi-row Layout. The grouped columns are always visible.

    다음 기능은 현재 지원 되지 않습니다.

    • 열 이동
    • 다중 열 헤더
    • 엑셀로 내보내기
    • 요약

    Keyboard Navigation

    IgrGrid with Multi-Row Layouts provides build-in keyboard navigation.

    Horizontal Navigation

    • ← or → - move to the adjacent cell on the left/right within the current row unaffected by the column layouts that are defined. If the current cell spans on more than one row, ← and → should navigate to the first cell on the left and right with the same rowStart, unless you have navigated to some other adjacent cell before. The navigation stores the starting navigation cell and navigates to the cells with the same rowStart if possible.
    • CTRL + ← (HOME) 또는 CTRL + → (END) - 행의 시작 또는 끝으로 이동하고 시작 탐색 셀에 따라 셀을 선택합니다.

    Vertical Navigation

    • ↑ 또는 ↓- 시작 위치를 기준으로 위/아래 셀로 이동하며 행의 영향을 받지 않습니다. 현재 셀이 둘 이상의 열에 걸쳐 있는 경우 탐색 시작 셀에 따라 다음 활성 셀이 선택됩니다.
    • CTRL + ↑ 또는 CTRL + Down- 첫 번째 행이나 마지막 행의 동일한 열을 탐색하고 포커스를 적용합니다.
    • CTRL + HOME 또는 CTRL + END- 첫 번째 행으로 이동하여 첫 번째 셀에 포커스를 맞추거나 마지막 행으로 이동하여 마지막 셀에 포커스를 맞춥니다.

    [!Note] Navigation through cells which span on multiple rows or columns is done with accordance to the starting navigation cell and will allow returning to the starting cell using the key for the opposite direction. The same approach is used when navigating through group rows.

    [!Note] Selection and multi cell selection are working on layout, meaning that when a cell is active, its layout will be selected. Also all features of multiple selection like drag selection are applicable and will work per layout not per cell.

    Custom Keyboard Navigation

    그리드를 사용하면 특정 키를 눌렀을 때 기본 탐색 동작을 사용자 정의할 수 있습니다. 다음 셀 이나 아래 셀로 이동하는 등의 작업은 강력한 키보드 탐색 API를 사용하여 쉽게 처리할 수 있습니다.

    • GridKeydown is exposed. The event will emit IGridKeydownEventArgs. This event is available only through the keyboard key combinations mentioned above, for all other key actions you can use KeyDown event.
    • NavigateTo - this method allows you to navigate to a position based on provided RowIndex and VisibleColumnIndex

    아래 데모는 Excel에서 관찰되는 동작과 유사하게 and SHIFT + ENTER 키를 통해 ENTER 아래/위로 추가 탐색을 추가합니다.

    Demo

    Styling

    사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

    <IgrGrid className="grid"></IgrGrid>

    그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

    .grid {
    --ig-grid-cell-active-border-color: #ffcd0f;
    --ig-grid-cell-selected-background: #6f6f6f;
    --ig-grid-row-hover-background: #fde069;
    --ig-grid-row-selected-background: #8d8d8d;
    --ig-grid-header-background: #494949;
    --ig-grid-header-text-color: #fff;
}

    Demo

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.