From 6f59e5907eb87080f296c055880ce4294f7024de Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Fri, 17 Jan 2020 15:10:31 -0600
Subject: [PATCH] feat(data-table): add colSpan prop for TableHeader

---
 .../src/components/DataTable/TableHeader.js      | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/DataTable/TableHeader.js b/packages/react/src/components/DataTable/TableHeader.js
index 273059144cee..54f2bcbb004c 100644
--- a/packages/react/src/components/DataTable/TableHeader.js
+++ b/packages/react/src/components/DataTable/TableHeader.js
@@ -51,6 +51,7 @@ const TableHeader = React.forwardRef(function TableHeader(
   {
     className: headerClassName,
     children,
+    colSpan,
     isSortable,
     isSortHeader,
     onClick,
@@ -63,7 +64,7 @@ const TableHeader = React.forwardRef(function TableHeader(
 ) {
   if (!isSortable) {
     return (
-      <th {...rest} className={headerClassName} scope={scope}>
+      <th {...rest} className={headerClassName} scope={scope} colSpan={colSpan}>
         <span className={`${prefix}--table-header-label`}>{children}</span>
       </th>
     );
@@ -80,10 +81,11 @@ const TableHeader = React.forwardRef(function TableHeader(
 
   return (
     <th
-      scope={scope}
-      className={headerClassName}
       aria-sort={ariaSort}
-      ref={ref}>
+      className={headerClassName}
+      colSpan={colSpan}
+      ref={ref}
+      scope={scope}>
       <button className={className} onClick={onClick} {...rest}>
         <span className={`${prefix}--table-header-label`}>{children}</span>
         <Arrow
@@ -120,6 +122,12 @@ TableHeader.propTypes = {
    */
   children: PropTypes.node,
 
+  /**
+   * Specify `colSpan` as a non-negative integer value to indicate how
+   * many columns the TableHeader cell extends in a table
+   */
+  colSpan: PropTypes.number,
+
   /**
    * Specify whether this header is one through which a user can sort the table
    */