Merge pull request #142 from dabapps/fix-table-headers

Fix table headers
dabapps · Oct 11, 2017 · 0c51894 · 0c51894
2 parents c5d497c + 81fa1d6
commit 0c51894
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 15 deletions.
diff --git a/docs/src/ts/tables.tsx b/docs/src/ts/tables.tsx
@@ -26,7 +26,7 @@ const data = [
 const [ headers = [], ...body ] = data;
 const smallBody = [...body].splice(0, 2);
 
-const COLUMN_HEADER_WIDTH = 150;
+const ROW_HEADER_WIDTH = 150;
 
 const Tables = () => {
   return (
@@ -63,12 +63,12 @@ const Tables = () => {
             </TableBody>
           </Table>
 
-          <Table striped hover fill fixRowHeaders rowHeaderWidth={COLUMN_HEADER_WIDTH}>
+          <Table striped hover fill fixRowHeaders rowHeaderWidth={ROW_HEADER_WIDTH}>
             <TableHead>
               <TableRow>
                 {
                   headers.map((header, index) => index === 0 ? (
-                    <TableHeader key={header} width={COLUMN_HEADER_WIDTH} />
+                    <TableHeader key={header} width={ROW_HEADER_WIDTH} />
                   ) : (
                     <TableHeader key={header}>
                       {header}
@@ -83,9 +83,9 @@ const Tables = () => {
                   <TableRow key={rowIndex + row.join()}>
                     {
                       row.map((cell, index) => index === 0 ? (
-                        <TableHeader key={cell} width={COLUMN_HEADER_WIDTH}>
+                        <TableCell key={cell} width={ROW_HEADER_WIDTH}>
                           {cell}
-                        </TableHeader>
+                        </TableCell>
                       ) : (
                         <TableCell key={cell}>
                           {cell}
@@ -149,12 +149,12 @@ const Tables = () => {
                 </TableBody>
               </Table>
 
-              <Table striped hover fill fixRowHeaders rowHeaderWidth={COLUMN_HEADER_WIDTH}>
+              <Table striped hover fill fixRowHeaders rowHeaderWidth={ROW_HEADER_WIDTH}>
                 <TableHead>
                   <TableRow>
                     {
                       headers.map((header, index) => index === 0 ? (
-                        <TableHeader key={header} width={COLUMN_HEADER_WIDTH} />
+                        <TableHeader key={header} width={ROW_HEADER_WIDTH} />
                       ) : (
                         <TableHeader key={header}>
                           {header}
@@ -169,7 +169,7 @@ const Tables = () => {
                       <TableRow key={rowIndex + row.join()}>
                         {
                           row.map((cell, index) => index === 0 ? (
-                            <TableHeader key={cell} width={COLUMN_HEADER_WIDTH}>
+                            <TableHeader key={cell} width={ROW_HEADER_WIDTH}>
                               {cell}
                             </TableHeader>
                           ) : (

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "roe",
-  "version": "0.8.19",
+  "version": "0.8.20",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

diff --git a/src/less/tables.less b/src/less/tables.less
@@ -57,14 +57,18 @@
     }
   }
 
-  &.fix-column-headers {
+  &.fix-row-headers {
+    .table-row .table-cell:first-child,
     .table-row .table-header:first-child {
       position: absolute;
       border-right: @table-border;
       left: 0;
       border-bottom: @table-border;
+      // Hack to fix bad rendering in Chrome
+      transform: translate(0, 0);
     }
 
+    .table-body .table-row:last-child .table-cell:first-child,
     .table-body .table-row:last-child .table-header:first-child {
       border-bottom: @border-none;
     }

diff --git a/src/ts/tables.tsx b/src/ts/tables.tsx
@@ -14,7 +14,7 @@ export interface ITableFixedProps {
 
 export interface ITableUnfixedProps {
   fixRowHeaders?: false;
-  rowHeaderWidth?: undefined;
+  rowHeaderWidth?: never;
 }
 
 export interface ITableProps {
@@ -54,7 +54,7 @@ export const Table: TTable = (props) => {
   const myClassNames = [
     'table',
     `${collapse}-collapse`,
-    fixRowHeaders ? 'fix-column-headers' : null,
+    fixRowHeaders ? 'fix-row-headers' : null,
     striped ? 'striped' : null,
     bordered ? 'bordered' : null,
     hover ? 'hover' : null,
@@ -147,7 +147,7 @@ export const TableHeader: React.SFC<ITableCellProps & React.HTMLAttributes<HTMLT
     <Component
       {...remainingProps}
       className={classNames('table-header', className)}
-      style={{width, maxWidth: width, ...style}}
+      style={{width, maxWidth: width, minWidth: width, ...style}}
     >
       {shouldNotBeRendered(children) ? NBSP : children}
     </Component>
@@ -168,7 +168,7 @@ export const TableCell: React.SFC<ITableCellProps & React.HTMLAttributes<HTMLTab
     <Component
       {...remainingProps}
       className={classNames('table-cell', className)}
-      style={{width, maxWidth: width, ...style}}
+      style={{width, maxWidth: width, minWidth: width, ...style}}
     >
       {shouldNotBeRendered(children) ? NBSP : children}
     </Component>

diff --git a/tests/__snapshots__/tables.tsx.snap b/tests/__snapshots__/tables.tsx.snap
@@ -81,7 +81,7 @@ exports[`Tables Table should fix row headers to specified width 1`] = `
       className="table-scroller"
     >
       <table
-        className="table sm-collapse fix-column-headers"
+        className="table sm-collapse fix-row-headers"
       >
         <thead
           className="table-head"
@@ -94,6 +94,7 @@ exports[`Tables Table should fix row headers to specified width 1`] = `
               style={
                 Object {
                   "maxWidth": 100,
+                  "minWidth": 100,
                   "width": 100,
                 }
               }
@@ -113,6 +114,7 @@ exports[`Tables Table should fix row headers to specified width 1`] = `
               style={
                 Object {
                   "maxWidth": 100,
+                  "minWidth": 100,
                   "width": 100,
                 }
               }
@@ -177,6 +179,7 @@ exports[`Tables TableCell should not render null, false, undefined or empty stri
   style={
     Object {
       "maxWidth": undefined,
+      "minWidth": undefined,
       "width": undefined,
     }
   }
@@ -191,6 +194,7 @@ exports[`Tables TableCell should not render null, false, undefined or empty stri
   style={
     Object {
       "maxWidth": undefined,
+      "minWidth": undefined,
       "width": undefined,
     }
   }
@@ -205,6 +209,7 @@ exports[`Tables TableCell should not render null, false, undefined or empty stri
   style={
     Object {
       "maxWidth": undefined,
+      "minWidth": undefined,
       "width": undefined,
     }
   }
@@ -219,6 +224,7 @@ exports[`Tables TableCell should not render null, false, undefined or empty stri
   style={
     Object {
       "maxWidth": undefined,
+      "minWidth": undefined,
       "width": undefined,
     }
   }
@@ -233,6 +239,7 @@ exports[`Tables TableCell should render a non breaking space if no children prov
   style={
     Object {
       "maxWidth": undefined,
+      "minWidth": undefined,
       "width": undefined,
     }
   }
@@ -247,6 +254,7 @@ exports[`Tables TableCell should render the number 0 1`] = `
   style={
     Object {
       "maxWidth": undefined,
+      "minWidth": undefined,
       "width": undefined,
     }
   }
@@ -261,6 +269,7 @@ exports[`Tables TableHeader should not render null, false, undefined or empty st
   style={
     Object {
       "maxWidth": undefined,
+      "minWidth": undefined,
       "width": undefined,
     }
   }
@@ -275,6 +284,7 @@ exports[`Tables TableHeader should not render null, false, undefined or empty st
   style={
     Object {
       "maxWidth": undefined,
+      "minWidth": undefined,
       "width": undefined,
     }
   }
@@ -289,6 +299,7 @@ exports[`Tables TableHeader should not render null, false, undefined or empty st
   style={
     Object {
       "maxWidth": undefined,
+      "minWidth": undefined,
       "width": undefined,
     }
   }
@@ -303,6 +314,7 @@ exports[`Tables TableHeader should not render null, false, undefined or empty st
   style={
     Object {
       "maxWidth": undefined,
+      "minWidth": undefined,
       "width": undefined,
     }
   }
@@ -317,6 +329,7 @@ exports[`Tables TableHeader should render a non breaking space if no children pr
   style={
     Object {
       "maxWidth": undefined,
+      "minWidth": undefined,
       "width": undefined,
     }
   }
@@ -331,6 +344,7 @@ exports[`Tables TableHeader should render the number 0 1`] = `
   style={
     Object {
       "maxWidth": undefined,
+      "minWidth": undefined,
       "width": undefined,
     }
   }
@@ -367,6 +381,7 @@ exports[`Tables should match snapshot 1`] = `
               style={
                 Object {
                   "maxWidth": undefined,
+                  "minWidth": undefined,
                   "width": undefined,
                 }
               }
@@ -386,6 +401,7 @@ exports[`Tables should match snapshot 1`] = `
               style={
                 Object {
                   "maxWidth": undefined,
+                  "minWidth": undefined,
                   "width": undefined,
                 }
               }