[Devextream] DataGrid의 <Column /> 태그 속성으로 데이터 포맷하기

---

출처

DevExtream DataGrid

dataType

type : String

import React from 'react';
import { DataGrid, Column } from 'devextreme-react/data-grid';
 
const employees = [{
    ID: '1',
    hireDate: 1491821760000
}, // ...
];
 
class App extends React.Component {
    render() {
        return (
            <DataGrid ...
                dataSource={employees}>
                <Column dataField="ID" dataType="number" />
                <Column dataField="hireDate" dataType="date" />
            </DataGrid>
        );
    }
}
export default App;

1. dataType=""이러한 속성을 통해 데이터의 type을 지정할 수 있다.
2. 이렇게 타입을 지정해야 데이터 포맷을 할 때에도 인식이 된다.
3. dataType에 들어갈 수 있는 타입은 이렇다.
4. 'string' | 'number' | 'date' | 'boolean' | 'object' | 'datetime'

Format

type : format

// Uses a predefined format
format: {
    type: String, // one of the predefined formats
    precision: Number, // the precision of values
    currency: String // a specific 3-letter code for the "currency" format
}

1. 먼저 Devextream에서 사용하는 Format 타입에서 알아보자.
2. 컴포넌트로 사용할 수도 있으며 컬럼 컴포넌트에서도 사용할 수 있다.

formatter: function (date) {
    const day = date.getDate();
    const month = date.getMonth() + 1;
    const year = date.getFullYear();
 
    return `${day}.${month}.${year}`;
},
parser: function (e) {
    const parts = e.split(".");
    const day = Number(parts[0]);
    const month = Number(parts[1] - 1);
    const year = Number(parts[2]);
 
    return new Date(year, month, day);
}

3. 데이터를 임의로 포맷하고 싶을 때 parser와 formatter를 통해 더욱더 디테일하게 파싱할 수 있다.
4. 하지만 간단한 문제에는 type을 사용하면 된다.

const smallNumber = 1.2345;
 
type: "fixedPoint" // 1
type: "decimal" // 1.2345
type: "percent" // 123%
type: "currency" // $1

const largeNumber = 1000000000;
 
type: "exponential" // 1.0E+9
type: "thousands" // 1,000,000K
type: "millions" // 1,000M
type: "billions" // 1B
type: "trillions" // 0T
type: "largeNumber" // 1B (uses "thousands", "millions", "billions", or "trillions", depending on the value)

const date = new Date(2021, 6, 15, 20, 45, 34);
 
type: "longDate" // Thursday, July 15, 2021
type: "longTime" // 8:45:34 PM
type: "longDateLongTime" // Thursday, July 15, 2021, 8:45:34 PM
type: "monthAndDay" // July 15
type: "monthAndYear" // July 2021
type: "quarterAndYear" // Q3 2021
type: "shortDate" // 7/15/2021
type: "shortTime" // 8:45 PM
type: "shortDateShortTime" // 7/15/2021, 8:45 PM
type: "millisecond" // 000
type: "second" // 34
type: "minute" // 45
type: "hour" // 20
type: "day" // 15
type: "dayOfWeek" // Thursday
type: "month" // July
type: "quarter" // Q3
type: "year" // 2021

5. 이렇게 포맷에 대한 타입은 자세하게 나뉘어있기 때문에 여기에서 사용할 수 있다면 로직을 구현하지 않고도 바로 사용할 수 있다.
6. 그럼 <column />에 대한 format 속성에 대해서 알아보자.

Custom Format String

type : String

Format character	Description
0	A digit. Displays '0' if the formatted number does not have a digit in that position.
#	Any number of leading digits, a single digit, or nothing. If this character goes first in the format string, it can match multiple leading digits (before the decimal point). Subsequent characters match a single digit. If the formatted number does not have a digit in the corresponding position, it displays nothing. For example, if you apply format "#0.#" to "123.45", the result is "123.4".
.	A decimal separator. Actual character depends on locale.
,	A group separator. Actual character depends on locale.
%	The percent sign. Multiplies the input value by 100.
;	Separates positive and negative format patterns. For example, the "#0.##;(#0.##)" format displays a positive number according to the pattern before the semicolon (";"), and a negative number according to the pattern after the semicolon (";"). If you do not use this character and the additional pattern, negative numbers display a minus ("-") prefix.
Escape characters	You can display the special characters above as literals if you enclose them in single quotation marks. For example, '%'.
Other characters	You can add any literal characters to the beginning or end of the format string.

1. String 타입으로 되어있는 숫자 형식을 포맷하기 위해서 조금 더 디테일한 포맷 타입을 줄 수 있다.

const number = 1234.567;
 
// Leave the first digit before the decimal point and round up the decimal
format: "0.0" // 4.6
 
const smallNumber = 0.1234;
 
// Display nothing in place of a digit
format: "#.#" // .1
 
const largeNumber = 123456.789;
 
// Add a group separator
format: ",##0.###" // 123,456.789

const smallNumber = 0.01234;
 
// Represent as a percentage and limit to two decimal digits
format: "#0.##%" // 1.23%
 
// Add a percent sign and limit to two decimal digits
format: "#0.##'%'" // 0.01%

Format character	Description
y	A calendar year.
Q	A quarter number or name. Available combinations with example: "Q" - "2", "QQ" - "02", "QQQ" - "Q2" and "QQQQ" - "2nd quarter".
M	A month number or name. Available combinations with example: "M" - "9", "MM" - "09", "MMM" - "Sep", "MMMM" - "September", "MMMMM" - "S".
d	A month day.
E	A week day name. Available combinations with example: "E", "EE" or "EEE" - "Tue", "EEEE" - "Tuesday", "EEEEE" - "T".
a	A day period (am or pm).
h	An hour. From 1 to 12.
H	An hour. From 0 to 23.
m	A minute.
s	A second.
S	A fractional second.
'' (two single quotes)	Literal text. Text enclosed in two single quotes is shown as-is.

const date = new Date(2021, 6, 15, 20, 45, 34);
 
format: "MM/dd/yyyy" // 07/15/2021
format: "MM/dd/yy" // 07/15/21
format: "dd.MM.yyyy" // 15.07.2021
format: "MMMM dd, yyyy" // July 15, 2021
format: "EEEE, MMMM dd" // Thursday, July 15
format: "HH:mm:ss" // 20:45:34
format: "hh:mm a" // 08:45 PM
format: "MMMM dd, yyyy HH:mm:ss" // July 15, 2021 20:45:34

2. 아무래도 제일 편한 것은 Date 포맷을 할 때인 것 같다.

  				<Column
            caption="블라블라"
            alignment="center"
            dataType="date"
            format="yyyy-MM-dd"
          />

3. 이런 식으로 foramt에 지정된 문자만 적어두면 데이터 포맷이 된다.
4. 이렇게 데이터 포맷을 할 때 dataType을 적어두어야 적용이 되니 주의할 것.

 					<Column caption="블라블라" alignment="right" dataType="number">
            <Format type="fixedPoint" />
          </Column>

5. <Format /> 컴포넌트를 사용해서 이런 형식으로 데이터 포맷을 할 수도 있다.
6. 해당 방법이 더욱 편하기 때문에 특히나 date 타입으로 포맷할 시에는 가장 간단하다.