HEADER와 FOOTER에 여러줄로 표시하기

header와 footer에 텍스트를 여러줄로 표시하려면 줄바꿈기호 \n을 사용하여 나눠주면 됩니다. 그리고 css white-space 속성을 적용합니다.

컬럼 헤더

header의 styleName 속성에 css를 지정합니다.

.multi-line-css {
  white-space: pre;
  background: #ff8b00;
}

var columns = [{
    ...
}, {
  "name": "CompanyName",
  "fieldName": "CompanyName",
  "width": "120",
  "header": {
      "text": "Company\\nName",
      "styleName": "multi-line-css"
  }
}, {
    ...
}];

컬럼 풋터

footer의 styleName 속성에 css를 지정합니다.

.multi-line-css {
  white-space: pre;
  background: #ff8b00;
}

var columns = [{
    ...
}, {
  "name": "CompanyName",
  "fieldName": "CompanyName",
  "width": "120",
  "header": {
      "text": "Company Name"
  },
  "footer": {
    "text": "FooterText:\\nCompany Name",
    "styleName": "multi-line-css"
  } 
}, {
    ...
}];

레이아웃헤더(그룹헤더)

레이아웃헤더의 경우에는 컬럼에 설정하지 않고 layout에서 설정합니다.

.multi-line-css {
  white-space: pre;
  background: #ff8b00;
}

layout1 = [
  {
    name: "companyGroup",
    direction: "horizontal",
    items: [
      "Country",
      "CompanyName"
    ],
    header: {
      text: "Company\\nGroup",
      styleName: "multi-line-css"
    }
  }, 
  "OrderID",
  "CustomerID",
  "EmployeeID",
  "OrderDate",
  "Phone"
]

병합된 셀의 합계 계산 행 삭제와 관계된 팁