v5.0.10

Author: novykh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.0.9",
+  "version": "5.0.10",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/table/header/index.js

@@ -32,6 +32,7 @@ const Header = ({
 
   return (
     <Flex
+      data-noprint
       width="100%"
       zIndex={10}
       background="mainBackground"

src/components/table/helpers/downloadCsv.js

@@ -4,14 +4,52 @@ const formatValue = value => {
   return value
 }
 
-const convertToCSV = data => data.reduce((h, row) => h + row.map(formatValue).join(",") + "\n", "")
+const escapeForCSV = value => {
+  const str = String(value)
+
+  if (/[",\n\r]/.test(str)) return `"${str.replace(/"/g, '""')}"`
+
+  return str
+}
+
+const convertToCSV = data =>
+  data.reduce((h, row) => h + row.map(v => escapeForCSV(formatValue(v))).join(",") + "\n", "")
 
 export default (name = "netdata") =>
   (_, table) => {
-    let data = [table.getFlatHeaders().map(header => header.id)]
-    table.getRowModel().rows.forEach(row => {
-      data.push(table.getFlatHeaders().map(header => row.renderValue(header.id)))
-    })
+    const headers = table.getFlatHeaders().filter(header => !header.subHeaders?.length)
+
+    let data = [
+      headers.map(header => {
+        const parentLabel = header.column.parent
+          ? typeof header.column.parent.columnDef.headerString === "function"
+            ? header.column.parent.columnDef.headerString()
+            : header.column.parent.id
+          : null
+
+        const label =
+          typeof header.column.columnDef.headerString === "function"
+            ? header.column.columnDef.headerString()
+            : header.id
+
+        return parentLabel ? `${parentLabel} ${label}` : label
+      }),
+    ]
+    table.getRowModel().rows.forEach(row =>
+      data.push(
+        headers.map(header => {
+          const value = row.getValue(header.id)
+
+          if (value) return value
+
+          if (typeof header.column.columnDef.renderString !== "function") return value
+
+          const cell = row.getAllCells().find(cell => cell.column.id === header.id)
+
+          return header.column.columnDef.renderString(cell.row)
+        })
+      )
+    )
 
     const url = window.URL.createObjectURL(
       new Blob([convertToCSV(data)], { type: "text/csv;charset=utf-8;" })