반응형
본인 회사에서는 빠르고 간편하게 테이블을 보여주는 ngx-datatable을 사용합니다.
빠르게 테이블을 만들어서 보여주는데 최적화 되어있는 ngx-datatable에 조건을 두어 스타일을 변경해야 할 일이 생겼는데,
기록 차 해당글을 포스팅 합니다.
흔히 쓰는 ngx-datatable은 component단에서 아래와 같이 컬럼을 정의하고,
html단에서 아래와 같이 정의하여 사용합니다.
하지만 특정 컬럼의 값에 따라 다른 css를 주고 싶다면 해당 컬럼을 따로 뽑아서 아래와 같이 정의합니다.
<ngx-datatable></ngx-datatable> 안에 위치시켜야 함에 주의합니다.
[cellClass] 속성을 이용해서 해당 컬럼의 값을 이용해 사용할 class를 적용시킬 수 있습니다.
그리곤 component단에서 getCellClass 메소드를 아래와 같이 정의합니다.
해당 값이 0이상 일땐, xposCellPointPlus클래스를 적용하고,
해당 값이 0미만 일땐, xposCellPointMinus클래스를 적용시킨다는 의미입니다.
위 코드를 적용시킨 모습입니다.
보기는 간단해보이나 생각보다 ngx-datatable에 대한 정보가 없어서 찾는데 애먹었습니다.
혹시나 저처럼 ngx-datatable에 다른 css를 먹이고 싶은사람에게 도움이 됐으면 좋겠네요.
반응형