fix(ColSpan): includePrevious

Author: rwieruch

src/common/util/getPreviousColSpans.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export const getPreviousColSpans = (children: React.ReactNode, index: number) => {
+  return React.Children.toArray(children).reduce((acc, value, key) => {
+    if (!React.isValidElement(value)) return acc;
+    if (key >= index) return acc;
+    if (!value.props.gridColumnStart && !value.props.gridColumnEnd) return acc;
+
+    return acc + value.props.gridColumnEnd - value.props.gridColumnStart - 1;
+  }, 0);
+};

src/table/Cell/Cell.tsx

@@ -16,6 +16,8 @@ export const Cell: React.FC<CellProps> = ({
   pinLeft,
   pinRight,
   stiff,
+  includePreviousColSpan,
+  previousColSpans,
   gridColumnStart,
   gridColumnEnd,
   onClick,
@@ -27,13 +29,24 @@ export const Cell: React.FC<CellProps> = ({
 
   const hasColSpan = gridColumnStart && gridColumnEnd;
   const colSpan = hasColSpan ? gridColumnEnd - gridColumnStart - 1 : 0;
+  const computedGridColumnStart = includePreviousColSpan
+    ? gridColumnStart + previousColSpans
+    : gridColumnStart;
+  const computedGridColumnEnd = includePreviousColSpan
+    ? gridColumnEnd + previousColSpans
+    : gridColumnEnd;
 
   return (
     <>
       <CellContainer
         role="gridcell"
         data-table-library_td=""
-        style={{ ...(hasColSpan ? { gridColumnStart, gridColumnEnd } : {}), ...style }}
+        style={{
+          ...(hasColSpan
+            ? { gridColumnStart: computedGridColumnStart, gridColumnEnd: computedGridColumnEnd }
+            : {}),
+          ...style,
+        }}
         css={css`
           ${theme?.BaseCell}
           ${theme?.Cell}

src/table/Cell/HeaderCell.tsx

@@ -76,6 +76,8 @@ export const HeaderCell: React.FC<HeaderCellProps> = ({
   pinRight,
   stiff,
   isFooter,
+  includePreviousColSpan,
+  previousColSpans,
   gridColumnStart,
   gridColumnEnd,
   resize,
@@ -92,6 +94,12 @@ export const HeaderCell: React.FC<HeaderCellProps> = ({
 
   const hasColSpan = gridColumnStart && gridColumnEnd;
   const colSpan = hasColSpan ? gridColumnEnd - gridColumnStart - 1 : 0;
+  const computedGridColumnStart = includePreviousColSpan
+    ? gridColumnStart + previousColSpans
+    : gridColumnStart;
+  const computedGridColumnEnd = includePreviousColSpan
+    ? gridColumnEnd + previousColSpans
+    : gridColumnEnd;
 
   return (
     <>
@@ -102,7 +110,12 @@ export const HeaderCell: React.FC<HeaderCellProps> = ({
         data-resize-min-width={
           typeof resize === 'boolean' || resize?.minWidth == null ? 75 : resize.minWidth
         }
-        style={{ ...(hasColSpan ? { gridColumnStart, gridColumnEnd } : {}), ...style }}
+        style={{
+          ...(hasColSpan
+            ? { gridColumnStart: computedGridColumnStart, gridColumnEnd: computedGridColumnEnd }
+            : {}),
+          ...style,
+        }}
         css={css`
           ${theme?.BaseCell}
           ${isFooter ? theme?.FooterCell : theme?.HeaderCell}

src/table/Row/HeaderRow.tsx

@@ -16,6 +16,7 @@ import {
   getHeaderColumns,
 } from '@table-library/react-table-library/common/util/columns';
 import { isReactFragment } from '@table-library/react-table-library/common/util/isFragment';
+import { getPreviousColSpans } from '@table-library/react-table-library/common/util/getPreviousColSpans';
 
 import { HeaderRowProps } from '@table-library/react-table-library/types/table';
 
@@ -96,6 +97,7 @@ export const HeaderRow: React.FC<HeaderRowProps> = ({
               extraProps = {
                 ...extraProps,
                 index,
+                previousColSpans: getPreviousColSpans(children, index),
               };
             }
 

src/table/Row/Row.tsx

@@ -10,6 +10,7 @@ import { RowContainer } from '@table-library/react-table-library/common/componen
 import { ThemeContext } from '@table-library/react-table-library/common/context/Theme';
 import { useFeatures } from '@table-library/react-table-library/common/context/Feature';
 import { isReactFragment } from '@table-library/react-table-library/common/util/isFragment';
+import { getPreviousColSpans } from '@table-library/react-table-library/common/util/getPreviousColSpans';
 
 import { Nullish } from '@table-library/react-table-library/types/common';
 import {
@@ -126,6 +127,7 @@ export const Row: React.FC<RowProps> = (props: RowProps) => {
               extraProps = {
                 ...extraProps,
                 index,
+                previousColSpans: getPreviousColSpans(children, index),
               };
             }