Add missing col span logic for grouped column headers (#70)

Co-authored-by: Sandro Küng <sk@neolution.ch>

Author: skuengneo

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- added missing col span property for `grouped columns` feature
+
 ## [5.4.1] - 2024-07-05
 
 ### Fixed

src/lib/ReactDataTable/ReactDataTable.tsx

@@ -134,6 +134,7 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
                           ...(header.column.getCanSort() ? { cursor: "pointer" } : {}),
                         }}
                         className={header.column.columnDef.meta?.headerClassName}
+                        colSpan={header.colSpan}
                       >
                         {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
 

test/DataTable/__snapshots__/DataTable.test.tsx.snap

@@ -19,6 +19,7 @@ exports[`DataTable renders correctly 1`] = `
     <thead>
       <tr>
         <th
+          colspan="1"
           style="cursor: pointer;"
         >
           NAME
@@ -28,6 +29,7 @@ exports[`DataTable renders correctly 1`] = `
           />
         </th>
         <th
+          colspan="1"
           style="cursor: pointer;"
         >
           COUNT
@@ -38,6 +40,7 @@ exports[`DataTable renders correctly 1`] = `
         </th>
         <th
           class="header-class"
+          colspan="1"
           style="background-color: blue; cursor: pointer;"
         >
           STATUS
@@ -47,6 +50,7 @@ exports[`DataTable renders correctly 1`] = `
           />
         </th>
         <th
+          colspan="1"
           style="cursor: pointer;"
         >
           CREATED
@@ -507,6 +511,7 @@ exports[`DataTable renders with draggable-column correctly 1`] = `
     <thead>
       <tr>
         <th
+          colspan="1"
           style="cursor: pointer;"
         >
           NAME
@@ -516,6 +521,7 @@ exports[`DataTable renders with draggable-column correctly 1`] = `
           />
         </th>
         <th
+          colspan="1"
           style="cursor: pointer;"
         >
           COUNT
@@ -526,6 +532,7 @@ exports[`DataTable renders with draggable-column correctly 1`] = `
         </th>
         <th
           class="header-class"
+          colspan="1"
           style="background-color: blue; cursor: pointer;"
         >
           STATUS
@@ -535,6 +542,7 @@ exports[`DataTable renders with draggable-column correctly 1`] = `
           />
         </th>
         <th
+          colspan="1"
           style="cursor: pointer;"
         >
           CREATED