Add stickyFirstColumn prop

src/components/Cell.tsx

@@ -4,6 +4,7 @@ import cx from 'classnames'
 export const Cell: FC<{
   gutter: boolean
   stickyRight: boolean
+  stickyFirstColumn?: boolean
   disabled?: boolean
   className?: string
   active?: boolean
@@ -14,6 +15,7 @@ export const Cell: FC<{
   children,
   gutter,
   stickyRight,
+  stickyFirstColumn,
   active,
   disabled,
   className,
@@ -28,6 +30,7 @@ export const Cell: FC<{
         disabled && 'dsg-cell-disabled',
         gutter && active && 'dsg-cell-gutter-active',
         stickyRight && 'dsg-cell-sticky-right',
+        stickyFirstColumn && 'dsg-cell-sticky-first',
         className
       )}
       style={{

src/components/DataSheetGrid.tsx

@@ -70,6 +70,7 @@ export const DataSheetGrid = React.memo(
         headerRowHeight = typeof rowHeight === 'number' ? rowHeight : 40,
         gutterColumn,
         stickyRightColumn,
+        stickyFirstColumn,
         rowKey,
         addRowsComponent: AddRowsComponent = AddRows,
         createRow = DEFAULT_CREATE_ROW as () => T,
@@ -251,6 +252,13 @@ export const DataSheetGrid = React.memo(
                 x = 0
               }
 
+              if (
+                stickyFirstColumn &&
+                event.clientX - outerBoundingClientRect.left <= columnRights[1]
+              ) {
+                x = event.clientX - outerBoundingClientRect.left
+              }
+
               if (
                 hasStickyRightColumn &&
                 outerBoundingClientRect.right - event.clientX <=
@@ -276,6 +284,7 @@ export const DataSheetGrid = React.memo(
           getOuterBoundingClientRect,
           headerRowHeight,
           hasStickyRightColumn,
+          stickyFirstColumn,
           getRowIndex,
         ]
       )
@@ -1779,6 +1788,7 @@ export const DataSheetGrid = React.memo(
             outerRef={outerRef}
             columnWidths={columnWidths}
             hasStickyRightColumn={hasStickyRightColumn}
+            stickyFirstColumn={stickyFirstColumn}
             displayHeight={displayHeight}
             data={data}
             fullWidth={fullWidth}
@@ -1807,6 +1817,7 @@ export const DataSheetGrid = React.memo(
               headerRowHeight={headerRowHeight}
               rowHeight={getRowSize}
               hasStickyRightColumn={hasStickyRightColumn}
+              stickyFirstColumn={stickyFirstColumn}
               dataLength={data.length}
               viewHeight={height}
               viewWidth={width}

src/components/Grid.tsx

@@ -18,6 +18,7 @@ export const Grid = <T extends any>({
   innerRef,
   columnWidths,
   hasStickyRightColumn,
+  stickyFirstColumn,
   displayHeight,
   headerRowHeight,
   rowHeight,
@@ -43,6 +44,7 @@ export const Grid = <T extends any>({
   innerRef: RefObject<HTMLDivElement>
   columnWidths?: number[]
   hasStickyRightColumn: boolean
+  stickyFirstColumn?: boolean
   displayHeight: number
   headerRowHeight: number
   rowHeight: (index: number) => { height: number }
@@ -97,9 +99,15 @@ export const Grid = <T extends any>({
     overscan: 1,
     rangeExtractor: (range) => {
       const result = defaultRangeExtractor(range)
+
       if (result[0] !== 0) {
         result.unshift(0)
       }
+
+      if (stickyFirstColumn && result[1] !== 1) {
+        result.splice(1, 0, 1)
+      }
+
       if (
         hasStickyRightColumn &&
         result[result.length - 1] !== columns.length - 1
@@ -150,6 +158,7 @@ export const Grid = <T extends any>({
               <CellComponent
                 key={col.key}
                 gutter={col.index === 0}
+                stickyFirstColumn={stickyFirstColumn && col.index === 1}
                 stickyRight={
                   hasStickyRightColumn && col.index === columns.length - 1
                 }
@@ -215,6 +224,7 @@ export const Grid = <T extends any>({
                   <CellComponent
                     key={col.key}
                     gutter={col.index === 0}
+                    stickyFirstColumn={stickyFirstColumn && col.index === 1}
                     stickyRight={
                       hasStickyRightColumn && col.index === columns.length - 1
                     }

src/components/SelectionRect.tsx

@@ -48,6 +48,7 @@ export const SelectionRect = React.memo<SelectionContextType>(
     rowHeight,
     activeCell,
     hasStickyRightColumn,
+    stickyFirstColumn,
     dataLength,
     viewWidth,
     viewHeight,
@@ -170,20 +171,22 @@ export const SelectionRect = React.memo<SelectionContextType>(
             })}
             style={{
               top: headerRowHeight,
-              left: columnWidths[0],
+              left: columnWidths[0] + (stickyFirstColumn ? columnWidths[1] : 0),
               height: viewHeight ? viewHeight - headerRowHeight : 0,
               width:
                 contentWidth && viewWidth
                   ? viewWidth -
                     columnWidths[0] -
                     (hasStickyRightColumn
                       ? columnWidths[columnWidths.length - 1]
-                      : 0)
+                      : 0) -
+                    (stickyFirstColumn ? columnWidths[1] : 0)
                   : `calc(100% - ${
                       columnWidths[0] +
                       (hasStickyRightColumn
                         ? columnWidths[columnWidths.length - 1]
-                        : 0)
+                        : 0) +
+                      (stickyFirstColumn ? columnWidths[1] : 0)
                     }px)`,
             }}
           />
@@ -232,6 +235,8 @@ export const SelectionRect = React.memo<SelectionContextType>(
             className={cx('dsg-active-cell', {
               'dsg-active-cell-focus': editing,
               'dsg-active-cell-disabled': activeCellIsDisabled,
+              'dsg-active-cell-sticky-first':
+                stickyFirstColumn && activeCell.col === 0,
             })}
             style={activeCellRect}
           />
@@ -253,18 +258,30 @@ export const SelectionRect = React.memo<SelectionContextType>(
             }}
           />
         )}
-        {expandRowsRect && (
-          <div className={cx('dsg-expand-rows-rect')} style={expandRowsRect} />
-        )}
         {expandRowsIndicator && (
           <div
             className={cx(
               'dsg-expand-rows-indicator',
-              selectionIsDisabled && 'dsg-expand-rows-indicator-disabled'
+              selectionIsDisabled && 'dsg-expand-rows-indicator-disabled',
+              stickyFirstColumn &&
+                ((!selection && activeCell?.col === 0) ||
+                  selection?.max.col === 0) &&
+                'dsg-expand-rows-indicator-sticky-first'
             )}
             style={expandRowsIndicator}
           />
         )}
+        {expandRowsRect && (
+          <div
+            className={cx(
+              'dsg-expand-rows-rect',
+              stickyFirstColumn &&
+                activeCell?.col === 0 &&
+                'dsg-expand-rows-rect-sticky-first'
+            )}
+            style={expandRowsRect}
+          />
+        )}
       </>
     )
   }

src/style.css

@@ -81,6 +81,14 @@
   transform: translateY(-100%);
 }
 
+.dsg-cell-sticky-first {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  margin-right: auto;
+  transform: translateY(-100%);
+}
+
 .dsg-cell-disabled {
   background: var(--dsg-cell-disabled-background-color);
 }
@@ -101,6 +109,10 @@
   box-shadow: 1px 0 var(--dsg-border-color), 0 1px var(--dsg-border-color);
 }
 
+.dsg-cell-header.dsg-cell-sticky-first {
+  box-shadow: 1px 0 var(--dsg-border-color), 0 1px var(--dsg-border-color);
+}
+
 .dsg-cell-header.dsg-cell-sticky-right {
   box-shadow: 0 1px var(--dsg-border-color);
 }
@@ -140,6 +152,11 @@
   border-color: var(--dsg-selection-disabled-border-color);
 }
 
+.dsg-active-cell-sticky-first {
+  position: sticky;
+  z-index: 40;
+}
+
 .dsg-selection-rect {
   background: var(--dsg-selection-background-color);
 }
@@ -405,6 +422,7 @@
 .dsg-selection-col-marker-container {
   position: absolute;
   top: 0;
+  z-index: 20;
 }
 
 .dsg-selection-col-marker {
@@ -570,10 +588,20 @@
   border: solid 1px var(--dsg-selection-disabled-border-color);
 }
 
+.dsg-expand-rows-indicator-sticky-first {
+  position: sticky;
+  z-index: 40;
+}
+
 .dsg-expand-rows-rect {
   position: absolute;
   box-sizing: border-box;
   transition: all var(--dsg-transition-duration);
   pointer-events: none;
   background: rgba(0, 0, 0, 0.03);
 }
+
+.dsg-expand-rows-rect-sticky-first{
+  position: sticky;
+  z-index: 40;
+}

src/types.ts

@@ -62,6 +62,7 @@ export type SelectionContextType = {
   selection: Selection | null
   dataLength: number
   rowHeight: (index: number) => { height: number; top: number }
+  stickyFirstColumn?: boolean
   hasStickyRightColumn: boolean
   editing: boolean
   isCellDisabled: (cell: Cell) => boolean
@@ -93,7 +94,13 @@ export type AddRowsComponentProps = {
 
 export type ContextMenuItem =
   | {
-      type: 'INSERT_ROW_BELLOW' | 'DELETE_ROW' | 'DUPLICATE_ROW' | 'COPY' | 'CUT' | 'PASTE'
+      type:
+        | 'INSERT_ROW_BELLOW'
+        | 'DELETE_ROW'
+        | 'DUPLICATE_ROW'
+        | 'COPY'
+        | 'CUT'
+        | 'PASTE'
       action: () => void
     }
   | {
@@ -135,6 +142,7 @@ export type DataSheetGridProps<T> = {
   columns?: Partial<Column<T, any, any>>[]
   gutterColumn?: SimpleColumn<T, any> | false
   stickyRightColumn?: SimpleColumn<T, any>
+  stickyFirstColumn?: boolean
   rowKey?: string | ((opts: { rowData: T; rowIndex: number }) => string)
   height?: number
   rowHeight?: number | ((opt: { rowData: T; rowIndex: number }) => number)