[Ag Grid] Vue - valueFormatter, tooltipValueGetter

ag grid에서 value를 수정하여 보여주는 일들이 있다.

ag grid에서 제공하는 속성들을 이용하여 나타내 보자!​

아래 두 속성들은 grid columnDefs 내에서 사용한다.

​

1. valueFormatter

이름부터 value의 형태를 바꿔준다는 느낌을 풍기고 있다.

return에 나타나 주기를 원하는 값을 넣고 리턴해주자.

여기서 params.value는 grid columnDefs에서 해당 field의 data가 들어간다.

valueFormatter : params => { 
	// 원하는 대로 변환하기
    return ; 
}

data: function () {
    return {
      columnDefs: [
        { 
          headerName: 'age', 
          field: 'age', 
          valueFormatter : params => { return params.value * 2; }
        },
      ],

 

2. tooltipValueGetter

만약, 1번에서처럼 데이터를 변경해준 뒤에 변경한 데이터를 툴팁으로 보여주고 싶은 경우도 생길 것이다.

아래와 같이 코드를 짜면 된다.

tooltipValueGetter : params => { return params.valueFormatted },

data: function () {
    return {
      columnDefs: [
        { 
          headerName: 'age', 
          field: 'age', 
          valueFormatter : params => { return params.value * 2; }
          tooltipValueGetter : params => {
              return params.valueFormatted;
          },
        },
      ],

​

여기서 조심해야 할 점은 해당 col에 tooltipfield가 있으면 안 된다. tooltipfield와 함께 있을 경우 tooltipfield가 우선순위를 가지게 된다.