Merge pull request #74 from fobbyal/last-column-border-issue

fix(cellRender.js + flexRenderer.js): added missing right border for last column
fobbyal · Feb 24, 2021 · ed96d8d · ed96d8d
2 parents b25ad1f + 064a790
commit ed96d8d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 20 deletions.
diff --git a/src/Components.js b/src/Components.js
@@ -48,29 +48,13 @@ export const BasicCell = styled.div`
   cursor: default;
   justify-content: ${props =>
     mapAlignmentToJustifyContent(props.alignment) || 'center'};
-  ${props => `font-size: ${ props.fontSize||'unset' };` }
-  ${props =>`color: ${cellColorOf(props)};` }
-  ${props =>`background-color:${cellBgColorOf(props)};` }
-  ${props => `font-weight: ${ props.fontWeight ||'normal' };` }
-  padding-left: 0.2em;
-  padding-right: 0.2em;
-`
-
-export const EllipsisCell = styled.div`
-  border-bottom: 1px solid #ccc;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border-left: 1px solid #ccc;
-  user-select: none;
-  cursor: default;
-  ${props => `text-align: ${props.alignment || 'center'}`};
   ${props => `font-size: ${props.fontSize || 'unset'};`}
   ${props => `color: ${cellColorOf(props)};`}
   ${props => `background-color:${cellBgColorOf(props)};`}
   ${props => `font-weight: ${props.fontWeight || 'normal'};`}
   padding-left: 0.2em;
   padding-right: 0.2em;
+  ${props => `border-right: ${props.isLastInRow ? ' 1px solid #ccc' : 'unset'};`}
 `
 
 /* prettier-ignore */

diff --git a/src/flexRenderer.js b/src/flexRenderer.js
@@ -368,7 +368,7 @@ const flexGridRenderer = ({
                 rowHeight,
               })}
             >
-              {rowHeaders.map((header, columnIndex) => (
+              {rowHeaders.map((header, columnIndex, all) => (
                 <FlexGridCell
                   render={cellRenderer}
                   editRender={editRenderer}
@@ -377,6 +377,7 @@ const flexGridRenderer = ({
                     columnIndex,
                     header,
                     data,
+                    isLastInRow: all.length === columnIndex + 1,
                   })}
                 />
               ))}
@@ -406,7 +407,7 @@ const flexGridRenderer = ({
                 rowHeight,
               })}
             >
-              {dataHeaders.map((header, columnIndex) => (
+              {dataHeaders.map((header, columnIndex, all) => (
                 <FlexGridCell
                   render={cellRenderer}
                   editRender={editRenderer}
@@ -415,6 +416,7 @@ const flexGridRenderer = ({
                     columnIndex: columnIndex + numOfFixedCols,
                     header,
                     data,
+                    isLastInRow: all.length === columnIndex + 1,
                   })}
                 />
               ))}

diff --git a/src/virtualized/cellRender.js b/src/virtualized/cellRender.js
@@ -5,7 +5,6 @@ import {
   SortIndicator,
   inputCellEditRender,
   dropdownEditRender,
-  EllipsisCell,
 } from '../Components'
 import R from 'ramda'
 import pureComponent from '../AdvancedPureComponent'
@@ -19,6 +18,13 @@ export const Cell = BasicCell.extend`
   border-bottom: 1px solid #ccc;
 `
 
+export const EllipsisCell = Cell.extend`
+  display: initial;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
 export const ColHeaderBase = BasicColHeader.extend`
   border-bottom: 1px solid #ccc;
 `
@@ -100,6 +106,7 @@ export const defaultCellRender = ({
     header: headers[columnIndex],
     data,
     style,
+    isLastInRow: headers.length === columnIndex + 1,
     ...rest,
   })
   if (cellProps.isEditing) {