feat(data-table): add colSpan prop for TableHeader (#5088)

carbon-design-system · Jan 17, 2020 · c061bcc · c061bcc
1 parent 65cce52
commit c061bcc
Showing 1 changed file with 12 additions and 4 deletions.
diff --git 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
    */