Rwg add row column header

.size-snapshot.json

@@ -3,5 +3,10 @@
     "bundled": 5241,
     "minified": 5198,
     "gzipped": 2290
+  },
+  "dist\\react-window-grid.min.js": {
+    "bundled": 5330,
+    "minified": 5287,
+    "gzipped": 2304
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@andrglo/react-window-grid",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "A react grid with synced column and row headers",
   "repository": "https://github.com/andrglo/react-window-grid.git",
   "main": "src",

src/ReactWindowGrid.js

@@ -145,6 +145,7 @@ const ReactWindowGrid = props => {
     columnHorizontalPadding,
     columnVerticalPadding,
     verticalPadding,
+    rowColumnHeader
     ...rest
   } = props
 
@@ -281,6 +282,19 @@ const ReactWindowGrid = props => {
       {...rest}
       style={{...(style || {}), width, position: 'relative', height}}
     >
+      {rowColumnHeader && (
+        <div
+          style={{
+            position: absolute,
+            top: 0,
+            left: 0,
+            height: columnHeaderHeight,
+            width: rowHeaderWidth,
+          }}
+        >
+          {rowColumnHeader}
+        </div>
+      )}
       <div style={{position: absolute, top: 0, left: rowHeaderWidth}}>
         <VariableSizeList
           ref={headerRef}
@@ -382,7 +396,8 @@ ReactWindowGrid.propTypes = {
   gridRef: PropTypes.object,
   style: PropTypes.object,
   className: PropTypes.string,
-  scrollToTopOnNewRecordset: PropTypes.bool
+  scrollToTopOnNewRecordset: PropTypes.bool,
+  rowColumnHeader: PropTypes.object
 }
 
 ReactWindowGrid.defaultProps = {

src/__tests__/__snapshots__/index.js.snap

@@ -6,6 +6,9 @@ exports[`Auto calculate height and width 1`] = `
     id="test1"
     style="width: 100px; position: relative; height: 50px;"
   >
+    <div
+      style="position: absolute; top: 0px; left: 0px;"
+    />
     <div
       style="position: absolute; top: 0px; left: 10px;"
     >
@@ -107,6 +110,9 @@ exports[`Case when recordset is empty use label or id to calc width 1`] = `
     id="test2"
     style="width: 100px; position: relative; height: 50px;"
   >
+    <div
+      style="position: absolute; top: 0px; left: 0px;"
+    />
     <div
       style="position: absolute; top: 0px; left: 10px;"
     >
@@ -161,6 +167,9 @@ exports[`Use customized render 1`] = `
     id="test3"
     style="width: 200px; position: relative; height: 500px;"
   >
+    <div
+      style="position: absolute; top: 0px; left: 0px;"
+    />
     <div
       style="position: absolute; top: 0px; left: 30px;"
     >

src/dev/index.js

@@ -212,6 +212,15 @@ const useStyles = makeStyles(theme => {
       borderRight: border,
       display: 'flex'
     },
+    rowColumnHeader: {
+      fontSize: '0.75rem',
+      fontFamily: 'Roboto',
+      fontWeight: 400,
+      lineHeight: 1.66,
+      letterSpacing: '0.03333em',
+      borderBottom: border,
+      padding: '1px  0 0 4px'
+    },
     rowHeader: {
       boxSizing,
       borderBottom: border,
@@ -361,7 +370,8 @@ const Demo = () => {
         </Grid>
         <Grid item xs={12} ref={panel}>
           <Typography variant="caption" align="center">
-            Controled column width and row with column resizing
+            Controled column width and row with column resizing. Customized
+            column header for row header.
           </Typography>
           <ReactWindowGrid
             className={classes.grid}
@@ -405,6 +415,14 @@ const Demo = () => {
                 </div>
               )
             }}
+            rowColumnHeader={
+              <div
+                style={{width: 50}}
+                className={`${classes.columnHeader} ${classes.rowColumnHeader}`}
+              >
+                Items
+              </div>
+            }
           />
         </Grid>
         <Grid item xs={12}>