React 그리드 열 유형 개요

    React Grid는 기본 및 편집 템플릿의 모양에 따라 숫자, 문자열, 날짜, 부울, 통화 및 백분율 열 데이터 유형의 기본 처리를 제공합니다.

    React Grid Column Types Example

    React Grid Default Template

    데이터 유형별 템플릿을 활성화하려면 dataType 열 입력을 설정해야 합니다. 그렇지 않으면 해당 열이 dataType 열의 기본값이므로 문자열 열로 처리됩니다.

    다음 섹션에서는 각 dataType의 기본 템플릿을 설명합니다.

    String

    이 열 dataType 셀 값의 모양이나 형식을 변경하지 않습니다.

    Number

    ​dataType이 number로 설정된 경우 셀 값의 형식은 pipeArgs 속성이 지정된 경우뿐 아니라 응용 프로그램이나 그리드의 locale 설정에 따라 지정됩니다. 그런 다음 숫자 형식은 이를 기반으로 변경됩니다. 예를 들어 다음이 변경될 수 있습니다.

    • 소수점 이하 자릿수
    • ​, 또는 를 사용한 소수 구분 기호.
    const formatOptions = new IgrColumnPipeArgs();
formatOptions.digitsInfo = "1.4-4";

<IgrColumn pipeArgs={formatOptions} dataType="number"></IgrColumn>

    DateTime, Date and Time

    날짜 부분의 모양은 locale 형식이나 pipeArgs 입력에 따라 설정됩니다(예: 일, 월, 연도). 파이프 인수를 사용하여 사용자 정의 날짜 형식이나 시간대를 지정할 수 있습니다.

    • 형식- 날짜 형식 지정의 기본값은 'mediumDate' 입니다. 사용 가능한 다른 옵션은 'short', 'long', 'shortDate', 'fullDate', 'longTime', 'fullTime' 등입니다.
    • timezone- 사용자의 로컬 시스템 시간대가 기본값입니다. 시간대 오프셋이나 표준 GMT/UTC 또는 미국 대륙 시간대 약어도 전달될 수 있습니다. 전 세계 어디에서나 해당 위치의 시간을 표시하는 다양한 시간대 예:
    const formatOptions = new IgrColumnPipeArgs();
formatOptions.format = "long";
formatOptions.timezone = "UTC+0";

<IgrColumn pipeArgs={formatOptions} dataType="date"></IgrColumn>

    사용 가능한 시간대:

    시간대 값
    알파 시간대 'UTC+1'
    호주 중부 표준시 'UTC+9:30/ +10:30'
    아라비아 표준시 'UTC+3'
    중부 표준시 'UTC-6'
    중국 표준시 'UTC+8'
    델타 시간대 'UTC+4'
    그리니치 표준시 'UTC+0'
    걸프 표준시 'UTC+4'
    하와이 표준시 'UTC-10'
    인도 표준시 'UTC+4'

    ​IgrGrid는 Date object, Number (milliseconds), An ISO 날짜-시간 문자열 유형의 날짜 값을 허용합니다. 이 섹션에서는 사용자 정의 표시 형식을 구성하는 방법을 보여줍니다.

    샘플에서 볼 수 있듯이 특정 열 유형에 사용 가능한 형식을 보여주기 위해 다양한 형식 옵션을 지정합니다. 예를 들어 아래에서는 날짜 개체의 시간 부분에 대한 형식 옵션을 찾을 수 있습니다.

    const timeFormats = [
    { format: 'shortTime', eq: 'h:mm a' },
    { format: 'mediumTime', eq: 'h:mm:ss a' },
    { format: 'longTime', eq: 'h:mm:ss a z' },
    { format: 'fullTime', eq: 'h:mm:ss a zzzz' },
];

    셀 편집

    열 유형을 기반으로 한 셀 편집의 경우 다른 편집기가 나타납니다.

    • DateTime-DateTimeEditor 사용됩니다. 이 편집기는 DateTime 개체의 입력 요소 부분에 대한 마스크 지침을 제공합니다.
    • Date - IgrDatePicker will be used.
    • Time-TimePicker 사용됩니다.

    필터링

    빠른 필터링/Excel 스타일 필터링의 경우 위에 나열된 동일한 편집기가 사용됩니다. 각 유형이 노출하는 필터링 피연산자는 다음과 같습니다.

    • DateTime 및 Date- 같음, 같지 않음, 이전, 이후, 오늘, 어제, 이번 달, 지난 달, 다음 달, 올해, 작년, 내년, 비어 있음, 비어 있지 않음, Null, Null 아님;
    • Time- 시점, 시점 아님, 이전, 이후, 시점 또는 이전, 시점 또는 이후, 비어 있음, 비어 있지 않음, Null, Null 아님;

    요약

    사용 가능한 요약 피연산자는 Count, Earliest (날짜/시간) 및 Late (날짜/시간)입니다.

    정렬

    • Time: 개체의 시간 부분을 기준으로 열이 정렬되며, ms는 무시됩니다.
    • Date: 열은 날짜 부분을 기준으로 정렬되며 시간 부분은 무시됩니다.
    • DateTime: 전체 날짜를 기준으로 열이 정렬됩니다.

    Boolean

    기본 템플릿은 부울 값 시각화를 위해 재료 아이콘을 사용합니다. 거짓 값은 '지우기' 아이콘, 참 값은 '확인' 아이콘입니다. 편집 템플릿은 IgrCheckbox 컴포넌트를 사용하고 있습니다.

    <IgrColumn dataType="boolean"></IgrColumn>

    Image

    기본 템플릿은 데이터에서 나오는 값을 기본 이미지 템플릿에 대한 이미지 소스로 사용합니다. 기본 이미지 템플릿은 이미지 파일의 이름을 추출하고 접근성 요구 사항을 충족하기 위해 이미지의 alt 속성으로 설정합니다. 표시된 셀 크기는 렌더링된 이미지의 크기에 따라 조정되므로 큰 이미지는 계속 렌더링되고 그리드 행은 이미지 열의 이미지만큼 커집니다. 이미지 유형 열에 대한 필터링, 정렬 및 그룹화는 기본적으로 해제됩니다. 이를 활성화하려면 데이터 작업을 수행하는 사용자 지정 전략을 제공해야 합니다.

    <IgrColumn field="Image" dataType="image"></IgrColumn>

    열에 autoGenerate 사용되면 그리드는 첫 번째 데이터 레코드의 값을 분석합니다. 값이 문자열 유형이고 이미지 확장자(gif, jpg, jpeg, tiff, png, webp, bmp)로 끝나는 URL의 패턴과 일치하는 경우 열은 자동으로 dataType === GridColumnDataType.Image로 표시되고 기본 이미지 템플릿이 렌더링됩니다.

    Currency

    기본 템플릿

    기본 템플릿에는 접두사 또는 접미사가 붙는 통화 기호와 함께 숫자 값이 표시됩니다.

    const formatOptions = new IgrColumnPipeArgs();
formatOptions.digitsInfo = "1.4-4";
formatOptions.display = "symbol-narrow";

<IgrColumn pipeArgs={formatOptions} dataType="currency" field="UnitsInStock"></IgrColumn>
    매개변수 설명
    숫자정보 통화 가치의 10진수 표현을 나타냅니다.
    표시하다* 좁거나 넓은 기호로 값을 표시합니다.

    *표시 - 기본 en-US 로케일의 경우 USD 코드는 좁은 기호 $ 또는 넓은 기호 US$로 표시될 수 있습니다.

    셀 값을 편집하면 통화 기호가 접미사 또는 접두사로 표시됩니다. 이에 대한 자세한 내용은 공식 Cell 편집 주제에서 찾을 수 있습니다.

    위쪽/아래쪽 화살표 키를 사용하면 값은 digitsInfo - minFractionDigits(소수점 이하 최소 자릿수. 기본값은 0)에 따라 단계적으로 증가/감소합니다.

    Percent

    기본 템플릿은 기본 숫자 값에 해당하는 백분율을 표시합니다. 표시된 셀 값은 표시 요소 '100'을 곱한 결과입니다. 예를 들어 기본 요소는 100이고 셀에 전달된 "값"은 0.123이므로 표시되는 셀 값은 "12.3%"가 됩니다.

    셀 편집의 경우 값은 데이터 소스 값과 동일하며 표시 요소는 '1'입니다. 셀을 편집하면 백분율 값의 미리보기가 접미사 요소로 표시됩니다. 예를 들어 '0.0547'을 편집하는 동안 미리보기 요소는 '5.47%'로 표시됩니다.

    /**
* Decimal representation options, specified by a string in the following format:
* `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`.
* `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1.
* `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0.
* `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3.
*/
const formatOptions = new IgrColumnPipeArgs();
formatOptions.digitsInfo = "2.2-3";

<IgrColumn pipeArgs={formatOptions} dataType="percent"></IgrColumn>

    [!Note] When using up/down arrow keys the value will increment/decrement with a step based on the digitsInfo - minFractionDigits (The minimum number of digits after the decimal point. Default is 0)

    Default Editing Template

    ​그리드 편집 항목의 편집 템플릿 부분을 참조하세요.

    Custom Editing Template and Formatter

    사용자 정의 템플릿 및 열 포맷터 정의는 항상 열 데이터 유형 집합보다 우선합니다.

    Custom Template

    function editCellTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <input></input>
        </>
    );
}

<IgrGrid autoGenerate="false">
    <IgrColumn inlineEditorTemplate={editCellTemplate}></IgrColumn>
</IgrGrid>

    Column Formatter

    function formatCurrency(value: number) {
    return `$ ${value.toFixed(0)}`;
}

<IgrGrid autoGenerate="false">
    <IgrColumn formatter={formatCurrency} field="UnitsInStock"></IgrColumn>
</IgrGrid>

    API References

    Additional Resources