React Grid Sorting

The Ignite UI for React Data Sorting feature in React Grid is enabled on a per-column level, meaning that the IgrGrid can have a mix of sortable and non-sortable columns. Performing React sort actions enables you to change the display order of the records based on specified criteria.

React Grid Sorting Overview Example

이 과정은 입력을sortable 통해 이루어집니다. 정렬 기능을IgrGrid 통해 대문자 구분 정렬을 수행하도록 속성을 설정할sortingIgnoreCase 수도 있습니다:

<IgrColumn field="ProductName" header="Product Name" dataType="string" sortable={true}></IgrColumn>

지표 정렬

정렬된 순서가 표시되지 않으면 일정량의 열이 정렬되어 있으면 정말 혼란스러울 수 있습니다.

이IgrGrid 문제는 각 정렬된 열의 인덱스를 표시함으로써 해결책을 제공합니다.

API를 통한 정렬

API를IgrGrid 통해 어떤 열이나 열들의 조합도 정렬할 수 있습니다.IgrGrid sort 방법:

import { SortingDirection } from "igniteui-react-grids";

// Perform a case insensitive ascending sort on the ProductName column.
gridRef.current.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]);

// Perform sorting on both the ProductName and Price columns.
gridRef.current.sort([
    { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
    { fieldName: 'Price', dir: SortingDirection.Desc }
]);

[!Note] Sorting is performed using our DefaultSortingStrategy algorithm. Any IgrColumn or ISortingExpression can use a custom implementation of the ISortingStrategy as a substitute algorithm. This is useful when custom sorting needs to be defined for complex template columns, or image columns, for example.

필터링 동작과 마찬가지로, 다음 메서드를 사용하여clearSort 정렬 상태를 지울 수 있습니다:

// Removes the sorting state from the ProductName column
gridRef.current.clearSort('ProductName');

// Removes the sorting state from every column in the Grid
gridRef.current.clearSort();

[!Note] The sortStrategy of the IgrGrid is of different type compared to the sortStrategy of the IgrColumn, since they work in different scopes and expose different parameters.

[!Note] The sorting operation DOES NOT change the underlying data source of the IgrGrid.

초기 정렬 상태

정렬 표현식 배열을 의 속성IgrGrid에sortingExpressions 전달하여 의 초기 정렬 상태를IgrGrid 설정할 수 있습니다.

const sortingExpressions: IgrSortingExpression[] = [
    { fieldName: 'UnitsInStock', dir: SortingDirection.Asc, ignoreCase: true },
    { fieldName: 'ProductName', dir: SortingDirection.Desc }
];

<IgrGrid
    data={productSales}
    sortingExpressions={sortingExpressions}>
</IgrGrid>

[!Note] If values of type string are used by a column of dataType Date, the IgrGrid won't parse them to Date objects and using IgrGrid Sorting won't work as expected. If you want to use string objects, additional logic should be implemented on an application level, in order to parse the values to Date objects.

지표 템플릿 정렬

열 머리글의 정렬 표시기 아이콘은 템플릿을 사용하여 사용자 정의할 수 있습니다. 모든 정렬 상태(오름차순, 내림차순, 없음)에 대한 정렬 표시기 템플릿을 작성하는 데 다음 속성을 사용할 수 있습니다.

sortHeaderIconTemplate– 정렬이 적용되지 않을 때 정렬 아이콘을 다시 템플릿합니다.

const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
    return (
        <>
            <IgrIcon name='unfold_more'></IgrIcon>
        </>
    );
}

<IgrGrid sortHeaderIconTemplate={sortHeaderIconTemplate}></IgrGrid>

sortAscendingHeaderIconTemplate– 열이 오름차순으로 정렬될 때 정렬 아이콘을 다시 템플릿합니다.

const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
    return (
        <>
            <IgrIcon name='expand_less'></IgrIcon>
        </>
    );
}

<IgrGrid sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}></IgrGrid>

sortDescendingHeaderIconTemplate– 열이 내림차순으로 정렬될 때 정렬 아이콘을 다시 템플릿합니다.

const sortDescendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
    return (
        <>
            <IgrIcon name='expand_more'></IgrIcon>
        </>
    );
}

<IgrGrid sortDescendingHeaderIconTemplate={sortDescendingHeaderIconTemplate}></IgrGrid>

스타일링

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

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

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

.grid {
    --ig-grid-sorted-header-icon-color: #ffb06a;
    --ig-grid-sortable-header-icon-hover-color: black;
}

데모

API 참조

IgrSortingExpression

추가 리소스

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