From 064a79074900ade7a97245048d8df2053a9a58bc Mon Sep 17 00:00:00 2001
From: pdudhat <pdudhat@integconsulting.com>
Date: Tue, 16 Feb 2021 03:21:33 -0500
Subject: [PATCH] fix(cellRender.js + flexRenderer.js): added missing right
 border for last column

- showing right border for last cell
 - EllipsisCell is child of Cell now instead of separate
entity
---
 src/Components.js             | 18 +-----------------
 src/flexRenderer.js           |  6 ++++--
 src/virtualized/cellRender.js |  9 ++++++++-
 3 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/Components.js b/src/Components.js
index 377856b..c48a040 100644
--- 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
index e49864a..05b8144 100644
--- 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
index 064f931..1aefa31 100644
--- 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) {