fix(BalanceSheet): columns width based in cells contents.

src/containers/FinancialStatements/BalanceSheet/utils.js

@@ -10,6 +10,15 @@ const getTableCellValueAccessor = (index) => `cells[${index}].value`;
 
 const Align = { Left: 'left', Right: 'right', Center: 'center' };
 
+const getReportColWidth = (data, accessor, headerText) => {
+  return getColumnWidth(
+    data,
+    accessor,
+    { magicSpacing: 10, minWidth: 100 },
+    headerText,
+  );
+};
+
 /**
  *
  * @returns
@@ -45,6 +54,7 @@ export const getBalanceSheetHeaderValidationSchema = () =>
  */
 const accountNameMapper = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     key: column.key,
@@ -52,7 +62,7 @@ const accountNameMapper = R.curry((data, column) => {
     accessor,
     className: column.key,
     textOverview: true,
-    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 240 }),
+    width,
   };
 });
 
@@ -82,7 +92,7 @@ const dateRangeSoloColumnAttrs = (data, column) => {
 
   return {
     accessor,
-    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    width: getReportColWidth(data, accessor),
   };
 };
 
@@ -117,6 +127,7 @@ const dateRangeMapper = R.curry((data, column) => {
 const totalMapper = R.curry((data, column) => {
   const hasChildren = !isEmpty(column.children);
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   const columnAccessor = {
     key: column.key,
@@ -124,9 +135,9 @@ const totalMapper = R.curry((data, column) => {
     accessor,
     textOverview: true,
     Cell: CellTextSpan,
-    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 200 }),
+    width,
     disableSortBy: true,
-    align: hasChildren ? 'center' : 'right',
+    align: hasChildren ? Align.Center : Align.Left,
   };
   return R.compose(
     R.when(R.always(hasChildren), assocColumnsToTotalColumn(data, column)),
@@ -138,12 +149,13 @@ const totalMapper = R.curry((data, column) => {
  */
 const percentageOfColumnAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -155,12 +167,13 @@ const percentageOfColumnAccessor = R.curry((data, column) => {
  */
 const percentageOfRowAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -172,12 +185,13 @@ const percentageOfRowAccessor = R.curry((data, column) => {
  */
 const previousYearAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -189,12 +203,13 @@ const previousYearAccessor = R.curry((data, column) => {
  */
 const previousYearChangeAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -206,12 +221,13 @@ const previousYearChangeAccessor = R.curry((data, column) => {
  */
 const previousYearPercentageAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -223,12 +239,13 @@ const previousYearPercentageAccessor = R.curry((data, column) => {
  */
 const previousPeriodAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -240,12 +257,13 @@ const previousPeriodAccessor = R.curry((data, column) => {
  */
 const previousPeriodChangeAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -257,12 +275,13 @@ const previousPeriodChangeAccessor = R.curry((data, column) => {
  */
 const previousPeriodPercentageAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,

src/containers/FinancialStatements/ProfitLossSheet/utils.js

@@ -6,8 +6,13 @@ import { getColumnWidth } from 'utils';
 const Align = { Left: 'left', Right: 'right', Center: 'center' };
 const getTableCellValueAccessor = (index) => `cells[${index}].value`;
 
-const getReportColWidth = (data, accessor) => {
+const getReportColWidth = (data, accessor, labelText) => {
-  return getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 });
+  return getColumnWidth(
+    data,
+    accessor,
+    { magicSpacing: 10, minWidth: 100 },
+    labelText,
+  );
 };
 
 const isNodeHasChildren = (node) => !isEmpty(node.children);
@@ -17,12 +22,13 @@ const isNodeHasChildren = (node) => !isEmpty(node.children);
  */
 const percentageOfIncomeAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getReportColWidth(data, accessor),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -34,12 +40,13 @@ const percentageOfIncomeAccessor = R.curry((data, column) => {
  */
 const percentageOfExpenseAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getReportColWidth(data, accessor),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -51,12 +58,13 @@ const percentageOfExpenseAccessor = R.curry((data, column) => {
  */
 const percentageOfColumnAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getReportColWidth(data, accessor),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -68,12 +76,13 @@ const percentageOfColumnAccessor = R.curry((data, column) => {
  */
 const percentageOfRowAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getReportColWidth(data, accessor),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -85,12 +94,13 @@ const percentageOfRowAccessor = R.curry((data, column) => {
  */
 const previousYearAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getReportColWidth(data, accessor),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -102,12 +112,13 @@ const previousYearAccessor = R.curry((data, column) => {
  */
 const previousYearChangeAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getReportColWidth(data, accessor),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -119,12 +130,13 @@ const previousYearChangeAccessor = R.curry((data, column) => {
  */
 const previousYearPercentageAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getReportColWidth(data, accessor),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -136,12 +148,13 @@ const previousYearPercentageAccessor = R.curry((data, column) => {
  */
 const previousPeriodAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getReportColWidth(data, accessor),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -153,12 +166,13 @@ const previousPeriodAccessor = R.curry((data, column) => {
  */
 const previousPeriodChangeAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getReportColWidth(data, accessor),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -170,12 +184,13 @@ const previousPeriodChangeAccessor = R.curry((data, column) => {
  */
 const previousPeriodPercentageAccessor = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     Header: column.label,
     key: column.key,
     accessor,
-    width: getReportColWidth(data, accessor),
+    width,
     align: Align.Right,
     disableSortBy: true,
     textOverview: true,
@@ -196,10 +211,7 @@ const totalColumnsMapper = R.curry((data, column) => {
       R.pathEq(['key'], 'percentage_column'),
       percentageOfColumnAccessor(data),
     ),
-    R.when(
+    R.when(R.pathEq(['key'], 'percentage_row'), percentageOfRowAccessor(data)),
-      R.pathEq(['key'], 'percentage_row'),
-      percentageOfRowAccessor(data),
-    ),
     R.when(
       R.pathEq(['key'], 'percentage_income'),
       percentageOfIncomeAccessor(data),
@@ -253,6 +265,7 @@ const assocColumnsToTotalColumn = R.curry((data, column, columnAccessor) => {
 const totalColumn = R.curry((data, column) => {
   const hasChildren = isNodeHasChildren(column);
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     key: column.key,
@@ -260,7 +273,7 @@ const totalColumn = R.curry((data, column) => {
     accessor,
     textOverview: true,
     Cell: CellTextSpan,
-    width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 200 }),
+    width,
     disableSortBy: true,
     align: hasChildren ? 'center' : 'right',
   };
@@ -283,6 +296,7 @@ const totalColumnCompose = R.curry((data, column) => {
  */
 const accountNameColumn = R.curry((data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
 
   return {
     key: column.key,
@@ -290,18 +304,17 @@ const accountNameColumn = R.curry((data, column) => {
     accessor,
     className: column.key,
     textOverview: true,
-    width: getReportColWidth(data, accessor),
+    width,
   };
 });
 
-
 /**
  *
  * @param {*} data
  * @param {*} column
  * @returns
  */
- const dateRangeSoloColumnAttrs = (data, column) => {
+const dateRangeSoloColumnAttrs = (data, column) => {
   const accessor = getTableCellValueAccessor(column.cell_index);
 
   return {
@@ -330,12 +343,12 @@ const dateRangeColumn = R.curry((data, column) => {
       R.mergeLeft(dateRangeSoloColumnAttrs(data, column)),
     ),
   )(columnAccessor);
-})
+});
 
 /**
  * Detarmines the given string starts with `date-range` string.
  */
- const isMatchesDateRange = (r) => R.match(/^date-range/g, r).length > 0;
+const isMatchesDateRange = (r) => R.match(/^date-range/g, r).length > 0;
 
 /**
  *

src/style/components/DataTable/DataTable.scss

@@ -364,7 +364,7 @@
 .table--constrant {
   .table {
     .thead{
-      .tr:first-of-type{
+      .tr:first-of-type .th{
         border-top: 1px solid #000000;
       }
     }

src/utils/index.js

@@ -439,9 +439,11 @@ export const getColumnWidth = (
   rows,
   accessor,
   { maxWidth, minWidth, magicSpacing = 14 },
+  headerText = ''
 ) => {
   const cellLength = Math.max(
     ...rows.map((row) => (`${_.get(row, accessor)}` || '').length),
+    headerText.length
   );
   let result = cellLength * magicSpacing;