React Grid Sorting
React Grid의 Ignite UI for React 열별 수준에서 활성화됩니다. 즉, IgrGrid
에는 정렬 가능한 열과 정렬 불가능한 열이 혼합되어 있을 수 있습니다. React 정렬 작업을 수행하면 지정된 기준에 따라 레코드의 표시 순서를 변경할 수 있습니다.
React Grid Sorting Overview Example
이는 sortable
입력을 통해 수행됩니다. IgrGrid
정렬을 사용하면 sortingIgnoreCase
속성을 설정하여 대소문자 구분 정렬을 수행할 수도 있습니다.
<IgrColumn field="ProductName" header="Product Name" dataType="string" sortable="true"></IgrColumn>
Sorting Indicators
정렬된 순서가 표시되지 않으면 일정량의 열이 정렬되어 있으면 정말 혼란스러울 수 있습니다.
IgrGrid
는 정렬된 각 열의 인덱스를 표시하여 이 문제에 대한 솔루션을 제공합니다.
Sorting through the API
IgrGrid
sort
방법을 사용하여 IgrGrid
API를 통해 모든 열 또는 열 조합을 정렬할 수 있습니다.
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. AnyIgrColumn
orISortingExpression
can use a custom implementation of theISortingStrategy
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 theIgrGrid
is of different type compared to thesortStrategy
of theIgrColumn
, since they work in different scopes and expose different parameters.
[!Note] The sorting operation DOES NOT change the underlying data source of the
IgrGrid
.
Initial Sorting State
IgrGrid
의 sortingExpressions
속성에 정렬 표현식 배열을 전달하여 IgrGrid
의 초기 정렬 상태를 설정할 수 있습니다.
useEffect(() => {
gridRef.current.sortingExpressions = [
{ fieldName: 'UnitsInStock', dir: SortingDirection.Asc, ignoreCase: true },
{ fieldName: 'ProductName', dir: SortingDirection.Desc }
];
}, [])
[!Note] If values of type
string
are used by a column ofdataType
Date
, theIgrGrid
won't parse them toDate
objects and usingIgrGrid
Sorting
won't work as expected. If you want to usestring
objects, additional logic should be implemented on an application level, in order to parse the values toDate
objects.
Sorting Indicators Templates
열 머리글의 정렬 표시기 아이콘은 템플릿을 사용하여 사용자 정의할 수 있습니다. 모든 정렬 상태(오름차순, 내림차순, 없음)에 대한 정렬 표시기 템플릿을 작성하는 데 다음 속성을 사용할 수 있습니다.
sortHeaderIconTemplate
– 정렬이 적용되지 않은 경우 정렬 아이콘의 템플릿을 다시 지정합니다.
function sortHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
return (
<>
<IgrIcon name='unfold_more'></IgrIcon>
</>
);
}
<IgrGrid sortHeaderIconTemplate={sortHeaderIconTemplate}></IgrGrid>
sortAscendingHeaderIconTemplate
– 열이 오름차순으로 정렬될 때 정렬 아이콘의 템플릿을 다시 지정합니다.
function sortAscendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
return (
<>
<IgrIcon name='expand_less'></IgrIcon>
</>
);
}
<IgrGrid sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}></IgrGrid>
sortDescendingHeaderIconTemplate
– 열이 내림차순으로 정렬될 때 정렬 아이콘의 템플릿을 다시 지정합니다.
function sortDescendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
return (
<>
<IgrIcon name='expand_more'></IgrIcon>
</>
);
}
<IgrGrid sortDescendingHeaderIconTemplate={sortDescendingHeaderIconTemplate}></IgrGrid>
Styling
사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.
<IgrGrid className="grid">
</IgrGrid>
그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.
.grid {
--ig-grid-sorted-header-icon-color: #ffb06a;
--ig-grid-sortable-header-icon-hover-color: black;
}
Demo
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.