[ React ] 그리드에서 값 포맷 지정해주기 (AG GRID valueFormatter 사용)

https://www.ag-grid.com/javascript-data-grid/value-formatters/

JavaScript Data Grid: Value Formatters

 

시작시간	종료시간
0800	1700

 

이런 그리드가 있다. 둘다 시간이기 때문에 데이터를 넘길 때는 08:00, 17:00 으로 넘기고 싶다.

하지만 입력할 때는 ':' 콜론을 굳이 입력하고 싶진 않다.

=> 값의 포맷 지정해주기

 

AG GRID에는 valueFormatter 라는 포맷지정 함수가 존재한다. 그걸 사용하면 된다. 

 

    const columnDefs = [
        { headerName: '시작시간', field: 'FromTm', editable: true, width: 130, minWidth: 50, valueFormatter: timeFormatter },
        { headerName: '종료시간', field: 'ToTm', editable: true, width: 130, minWidth: 50, valueFormatter: timeFormatter },
    ];

columnDefs에서 valueFormatter : (함수명) 을 적어준다. 

 

 

function timeFormatter(params: any) {
        const vhour = params.value.substring(0, 2);
        const vmin = params.value.substring(2, 4);
        return `${vhour}:${vmin}`;
    }

timeFormatter은 이렇게 구현해주었다. 

 

이러면 끝!