컬럼 활용

컬럼 데이터의 줄바꿈(wordwrap)

컬럼의 내용이 길 경우 툴팁 또는 클릭으로 내용을 보는 것이 가능하지만 직관적으로 볼 수 있도록 화면에 표시하기 위한 컬럼 옵션을 제공합니다.
type: "textarea", options: {textareawidth: '300px', wordwrap: true , maxlength: 150}


이럴 땐 컬럼 데이터를 중간 정렬로 지정할 수 있도록 아래와 같은 클래스명에 해당 스타일들을 추가해 주셔야 합니다.

.rt-qc-textarea-type-cell
{
	display : flex;
	align-items : center;
	flex-wrap : wrap;	// 내용이 많을 경우 자동 줄바꿈 적용
}

▪️ (display: flex; align-items: center;)은 내용을 세로 중앙 정렬하는 역할
▪️ flex-wrap: wrap;을 추가하여 내용이 많을 경우 자동으로 줄바꿈이 적용되도록 설정

다양한 타입에 사용하기 위해서는 style 클래스명인 rt-qc-textarea-type-cell을 => textarea 부분을 사용할 타입의 이름으로 수정해 주시면 됩니다.
※ 주의: 해당 style 클래스는 컬럼 스타일 클래스 옵션인 styleclassname에 적용한 스타일보다 우선순위로 css가 적용되어 textarea 타입에만 사용하는 걸 권장 드립니다.

ex) rt-qc-html-type-cell, rt-qc-input-type-cell...




아래 예제에서 textarea 컬럼 타입인 소재지 헤더 컬럼에 줄바꿈 옵션을 설정하였습니다.