Merge pull request #919 from jbetancur/fix/column-break

do not format string based column.name

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "7.2.0",
+  "version": "7.2.1",
   "description": "A simple to use declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -58,33 +58,33 @@
     "@types/react-dom": "^17.0.9",
     "@types/styled-components": "^5.1.14",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
-    "@typescript-eslint/parser": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.2",
     "axios": "^0.21.4",
     "babel-eslint": "^10.1.0",
     "codecov": "^3.8.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.4.0",
+    "eslint-plugin-jest": "^24.4.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react": "^7.26.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "faker": "^5.5.3",
     "gh-pages": "^3.2.3",
-    "jest": "^27.2.0",
+    "jest": "^27.2.1",
     "jest-styled-components": "^7.0.5",
     "jest-watch-typeahead": "^0.6.4",
     "lodash-es": "^4.17.21",
     "memoize-one": "^5.2.1",
     "moment": "^2.29.1",
-    "prettier": "^2.4.0",
+    "prettier": "^2.4.1",
     "react": "^17.0.2",
     "react-app-polyfill": "^2.0.0",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.56.3",
+    "rollup": "^2.57.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^7.0.2",

src/DataTable/TableCol.tsx

@@ -222,7 +222,11 @@ function TableCol<T>({
 					{!disabled && customSortIconRight && renderCustomSortIcon()}
 					{!disabled && nativeSortIconRight && renderNativeSortIcon(sortActive)}
 
-					<ColumnText data-column-id={column.id}>{column.name}</ColumnText>
+					{typeof column.name === 'string' ? (
+						<ColumnText data-column-id={column.id}>{column.name}</ColumnText>
+					) : (
+						column.name
+					)}
 
 					{!disabled && customSortIconLeft && renderCustomSortIcon()}
 					{!disabled && nativeSortIconLeft && renderNativeSortIcon(sortActive)}