Merge 44854b8 into d9badb2

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Prop `zIndex` to `header-row`.
 
 ## [2.20.2] - 2019-06-27
 

react/components/Row.tsx

@@ -8,13 +8,15 @@ import styles from './Row.css'
 
 interface Props {
   sticky?: boolean
+  zIndex?: number
   fullWidth?: boolean
   inverted?: boolean
 }
 
 const Row: FunctionComponent<Props & BlockClass> = ({
   children,
   sticky,
+  zIndex,
   fullWidth,
   inverted,
   blockClass,
@@ -26,7 +28,7 @@ const Row: FunctionComponent<Props & BlockClass> = ({
   )
 
   return (
-    <StickyRow sticky={sticky}>
+    <StickyRow sticky={sticky} zIndex={zIndex}>
       <div className={generateBlockClass(styles.headerRow, blockClass)}>
         <div
           className={classNames(

react/components/StickyRow.tsx

@@ -4,19 +4,23 @@ import { RowContext } from './StickyRows'
 
 interface Props {
   sticky?: boolean
+  zIndex?: number
 }
 
-const StickyRow: FunctionComponent<Props> = ({ children, sticky }) => {
+const StickyRow: FunctionComponent<Props> = ({ children, sticky, zIndex }) => {
   const { offset, onResize } = useContext(RowContext)
 
   const stickyStyle: CSSProperties = {
     position: 'sticky',
     top: offset,
-    zIndex: 9,
+    zIndex,
   }
 
   return (
-    <div style={sticky ? stickyStyle : undefined}>
+    <div
+      style={sticky ? stickyStyle : undefined}
+      className={sticky && !zIndex ? 'z-999' : ''}
+    >
       {children}
 
       {sticky && (