fix(cellRender): using text-align css to align for ellipsis cell

fobbyal · Mar 5, 2021 · 6855249 · 6855249
1 parent ed96d8d
commit 6855249
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/src/stories/data.js b/src/stories/data.js
@@ -54,12 +54,14 @@ const unitDataFormatter = ({ value }) => unitMap[value] || value
 
 /* prettier-ignore */
 export const headers = [
-  dateCol({ ident: 'transDate', display: 'Trans-Date', width:140, isKey:true, }),
-  strCol({ ident: 'unitId', display: 'Unit', width:180, isKey:true, dataFormatter:unitDataFormatter,choices:unitChoices
-   , acceptRawText : true , setInvalidMessage : ({value}) => !unitMap[value] && value !== 'prakash' && 'Please Enter Valid Data.' }),
-  intCol({ ident: 'he', display: 'HE', width: 40,isKey:true, numFormat:"0", }),
-  strCol({ ident: 'fixedGen', display: 'Fixed Gen' , ellipsis : true }),
-  numCol({ ident: 'emerMinOvr', display: 'Emer Min', width:120, alignment:'right', displayFormat: null }),
+  dateCol({ ident: 'transDate', display: 'Trans-Date', width: 140, isKey: true, }),
+  strCol({
+    ident: 'unitId', display: 'Unit', width: 180, isKey: true, dataFormatter: unitDataFormatter, choices: unitChoices
+    , acceptRawText: true, setInvalidMessage: ({ value }) => !unitMap[value] && value !== 'prakash' && 'Please Enter Valid Data.'
+  }),
+  intCol({ ident: 'he', display: 'HE', width: 40, isKey: true, numFormat: "0", }),
+  strCol({ ident: 'fixedGen', display: 'Fixed Gen', ellipsis: true }),
+  numCol({ ident: 'emerMinOvr', display: 'Emer Min', width: 120, alignment: 'right', displayFormat: null, ellipsis: true }),
   numCol({ ident: 'ecoMinOvr', display: 'Eco Min', }),
   numCol({ ident: 'ecoMaxOvr', display: 'Eco Max', }),
   numCol({ ident: 'emerMaxOvr', display: 'Emer Max', }),
@@ -68,21 +70,21 @@ export const headers = [
   numCol({ ident: 'regMinOvr', display: 'Reg Min', }),
   numCol({ ident: 'regMaxOvr', display: 'Reg Max', }),
   strCol({ ident: 'regAStatusOvr', display: 'Reg A Status', }),
-  strCol({ ident: 'spilling', display: 'Spilling', ellipsis:true }),
-  pctCol({ ident: 'reducedRampRatePct', display: 'Reduce Ramp Percent', width:220, }),
-  dollarCol({ ident: 'regAPrice', display: 'Reg A Price', width:120, }),
-  dollarCol({ ident: 'regACost', display: 'Reg A Cost', width:120, }),
-  dollarCol({ ident: 'regAPerfPrice', display: 'Reg A Perf Price', width:120, }),
-  dollarCol({ ident: 'regAPerfCost', display: 'Reg A Perf Cost', width:120, }),
+  strCol({ ident: 'spilling', display: 'Spilling', ellipsis: true }),
+  pctCol({ ident: 'reducedRampRatePct', display: 'Reduce Ramp Percent', width: 220, }),
+  dollarCol({ ident: 'regAPrice', display: 'Reg A Price', width: 120, }),
+  dollarCol({ ident: 'regACost', display: 'Reg A Cost', width: 120, }),
+  dollarCol({ ident: 'regAPerfPrice', display: 'Reg A Perf Price', width: 120, }),
+  dollarCol({ ident: 'regAPerfCost', display: 'Reg A Perf Cost', width: 120, }),
   strCol({ ident: 'regDStatus', display: 'Reg D status', }),
-  dollarCol({ ident: 'regDPrice', display: 'Reg D Price', width:120, }),
-  dollarCol({ ident: 'regDCost', display: 'Reg D Cost', width:120, }),
-  dollarCol({ ident: 'regDPerfPrice', display: 'Reg D Perf Price', width:120, }),
-  dollarCol({ ident: 'regDPerfCost', display: 'Reg D Perf Cost', width:120, }),
+  dollarCol({ ident: 'regDPrice', display: 'Reg D Price', width: 120, }),
+  dollarCol({ ident: 'regDCost', display: 'Reg D Cost', width: 120, }),
+  dollarCol({ ident: 'regDPerfPrice', display: 'Reg D Perf Price', width: 120, }),
+  dollarCol({ ident: 'regDPerfCost', display: 'Reg D Perf Cost', width: 120, }),
   numCol({ ident: 'spinMwOvr', display: 'Spin Mw', }),
   numCol({ ident: 'spinMaxOvr', display: 'Spin Max', }),
   strCol({ ident: 'spinStatusOvr', display: 'Spin Status', }),
-  dollarCol({ ident: 'spinPrice', display: 'Spin Price', width:120, }),
+  dollarCol({ ident: 'spinPrice', display: 'Spin Price', width: 120, }),
 ]
 const createRow = _ => randomRow(headers)
 export const createData = R.compose(

diff --git a/src/virtualized/cellRender.js b/src/virtualized/cellRender.js
@@ -23,6 +23,7 @@ export const EllipsisCell = Cell.extend`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: ${props => props.alignment || 'center'};
 `
 
 export const ColHeaderBase = BasicColHeader.extend`