SAPUI5 테이블 행 셀에 사용자 정의 CSS 클래스를 동적으로 적용하는 방법

개요

SAPUI5에서 테이블의 특정 행(row)에 CSS 속성을 지정해야 하는 경우가 종종 있습니다. 이럴 때는 테이블에 미리 정의되어 있는 CSS 클래스(sapMListTbl 등)와 함께 사용자 정의 클래스(custom class)를 조합하여 스타일을 적용할 수 있습니다.

사용자 정의 CSS 클래스 작성 예시

아래와 같이 테이블의 기본 CSS 선택자 뒤에 원하는 클래스 이름을 붙여 스타일을 정의하면, 해당 클래스가 적용된 행의 셀에만 스타일이 반영됩니다.

.sapMListTbl .<your class name> {
    margin: 10px;
    color: #ffffff;
}

포맷터(Formatter)를 활용한 동적 클래스 적용

조건에 따라 다른 스타일을 적용하고 싶다면, 모델 데이터와 함께 새로운 클래스를 바인딩할 때 포맷터(formatter)를 활용하는 방법도 좋습니다. 포맷터 함수 안에서 모델 값을 판단하여 반환할 클래스 이름을 결정하면, 데이터 상태에 따라 행 셀의 스타일을 동적으로 변경할 수 있습니다.

예를 들어 특정 값이 임계값을 초과하면 강조 색상 클래스를, 그렇지 않으면 기본 클래스를 반환하도록 포맷터를 구성하면 별도의 수동 처리 없이 자동으로 스타일이 적용됩니다.

정리

• 테이블의 미리 정의된 CSS 클래스와 사용자 정의 클래스를 함께 사용하여 행 스타일을 지정할 수 있습니다.
• 모델 클래스와 함께 새 클래스를 적용할 때는 포맷터를 사용하면 조건부·동적 스타일링이 가능합니다.