Display multiple lines in HEADER and FOOTER

To display text in the header and footer over multiple lines, separate them using the line break symbol \n. And apply the css white-space property.

Column header

Specify css in the styleName property of the header.

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

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

Column Footer

Specify css in the styleName property of the footer.

.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 header (group header)

In the case of the layout header, it is set in the layout rather than in the column.

.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"
]

Calculate the sum of merged cells Tips related to deleting rows