fixes #780 column centering (#782)

Author: jbetancur

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "7.0.0-alpha-6",
+  "version": "7.0.0-alpha-7",
   "description": "A declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -46,9 +46,9 @@
     "@storybook/addon-console": "^1.2.3",
     "@storybook/addon-links": "^6.1.18",
     "@storybook/addon-storysource": "^6.1.18",
-    "@storybook/react": "^6.1.15",
+    "@storybook/react": "^6.1.18",
     "@testing-library/react": "^11.2.5",
-    "@types/faker": "^5.1.5",
+    "@types/faker": "^5.1.7",
     "@types/jest": "^26.0.20",
     "@types/lodash-es": "^4.17.4",
     "@types/lodash.orderby": "^4.6.6",

src/DataTable/TableCol.tsx

@@ -180,6 +180,7 @@ function TableCol<T>({
 			maxWidth={column.maxWidth}
 			minWidth={column.minWidth}
 			right={column.right}
+			center={column.center}
 			width={column.width}
 		>
 			{column.name && (

src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap

@@ -5866,32 +5866,17 @@ exports[`DataTable::columns should render correctly if column.center 1`] = `
   flex-basis: 0;
   max-width: 100%;
   min-width: 100px;
-}
-
-.c12 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  -webkit-flex-basis: 0;
-  -ms-flex-preferred-size: 0;
-  flex-basis: 0;
-  max-width: 100%;
-  min-width: 100px;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
 }
 
-.c13 {
+.c12 {
   font-weight: 400;
 }
 
-.c13 div:first-child {
+.c12 div:first-child {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -6021,7 +6006,7 @@ exports[`DataTable::columns should render correctly if column.center 1`] = `
           role="row"
         >
           <div
-            class="c11 c12 c13 rdt_TableCell"
+            class="c11 c6 c12 rdt_TableCell"
             data-tag="allowRowEvents"
             id="cell-1-1"
             role="gridcell"
@@ -6039,7 +6024,7 @@ exports[`DataTable::columns should render correctly if column.center 1`] = `
           role="row"
         >
           <div
-            class="c11 c12 c13 rdt_TableCell"
+            class="c11 c6 c12 rdt_TableCell"
             data-tag="allowRowEvents"
             id="cell-1-2"
             role="gridcell"