[ag-grid] 셀 정렬/제어하기 (cellStyle, headerClass, cellClass)

 

ag grid는 기본적으로 왼쪽 정렬임. 이걸 사진처럼 바꾸는 방법은 여러가지임.

 

1. columnDefs에 개별입력 (추천)
2. css로 제어
3. 공통으로 지정 (추천)
+ 클래스 삭제
+ 클래스 추가(여러개)

 

 

---

 

1. columnDefs에 개별입력 (추천)

{ 
  headerName: "회원구분", 
  field: "grade", 
  cellStyle: {textAlign: "center"} // 여기
},

cellStyle에 쓰는 방법은 카멜형식 또는 "대시형식"으로 쓰기

 

예)

{
  cellStyle: { justifyContent: "center" }
  cellStyle: { "background-color": "red" }
}

 

장점

- 원하는 셀만 제어가 가능

 

단점

- !important 적용이 불가능

- 모든 테이블에 공통으로 적용해야할때는 노가다 작업이 필요

 

 

2. css로 제어

.ag-header-group-cell-label {
  justify-content: center !important;
}

.ag-row .ag-cell {
  justify-content: center !important;
}

저 css가 맞는진 모르겠는데 암튼 저게 제일 속편한 방법이겠지만 가오가 있기때문에 패스.

 

 

3. 공통으로 지정 (추천)

const defaults = {
  option: {
    pagination: true,
    defaultColDef: { headerClass: "centered", cellClass: "centered" }, // 여기
  },
  gridApi: null,
  ...
}

<AgGridVue :grid-options="defaults" />

.centered {
  .ag-header-cell-label {
    justify-content: center !important;
  }
}
.ag-row {
  .centered {
    justify-content: center !important;
    text-align: center;
  }
}

공통으로 쓰는 객체가 있었는데 그 option내부에 defaultColDef 프로퍼티를 써주면 된다.

 

그리드 내에 이미지나 커스텀 태그로 넣은 부분까지 정렬 맞추려면 여러 css를 넣어야하기때문에, 그냥 공통 css를 만들고 클래스 주는 편이 나음.

 

 

+ 클래스 삭제

{ 
  headerName: "회원구분", 
  field: "grade", 
  cellClass: '',
  headerClass: ''
},

공통으로 주고 특정 그리드에서 필요없을땐 이렇게 초기화

 

+ 클래스 추가(여러개)

{ 
  headerName: "회원구분", 
  field: "grade", 
  cellClass: ['centered', 'new'],
  headerClass: 'left',
},