add row key

nick-keller · May 10, 2022 · ebce381 · ebce381
1 parent d7d9351
commit ebce381
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git a/src/components/DataSheetGrid.tsx b/src/components/DataSheetGrid.tsx
@@ -76,6 +76,7 @@ export const DataSheetGrid = React.memo(
         headerRowHeight = rowHeight,
         gutterColumn,
         stickyRightColumn,
+        rowKey,
         addRowsComponent: AddRowsComponent = AddRows,
         createRow = DEFAULT_CREATE_ROW as () => T,
         autoAddRow = false,
@@ -1631,6 +1632,28 @@ export const DataSheetGrid = React.memo(
         [headerRowHeight, rowHeight]
       )
 
+      const itemKey = useCallback(
+        (index: number, { data }: ListItemData<T>): React.Key => {
+          if (rowKey && index > 0) {
+            const row = data[index - 1]
+            if (typeof rowKey === 'function') {
+              return rowKey(row, index)
+            } else if (
+              typeof rowKey === 'string' &&
+              row instanceof Object &&
+              rowKey in row
+            ) {
+              const key = row[rowKey as keyof T]
+              if (typeof key === 'string' || typeof key === 'number') {
+                return key
+              }
+            }
+          }
+          return index
+        },
+        [rowKey]
+      )
+
       useImperativeHandle(ref, () => ({
         activeCell: getCellWithId(activeCell, columns),
         selection: getSelectionWithId(
@@ -1740,6 +1763,7 @@ export const DataSheetGrid = React.memo(
                 height={displayHeight}
                 itemCount={data.length + 1}
                 itemSize={itemSize}
+                itemKey={itemKey}
                 estimatedItemSize={rowHeight}
                 itemData={itemData}
                 outerRef={outerRef}

diff --git a/src/components/StaticDataSheetGrid.tsx b/src/components/StaticDataSheetGrid.tsx
@@ -16,6 +16,7 @@ export const StaticDataSheetGrid = React.forwardRef<
       createRow,
       duplicateRow,
       style,
+      rowKey,
       onFocus,
       onBlur,
       onActiveCellChange,
@@ -33,6 +34,7 @@ export const StaticDataSheetGrid = React.forwardRef<
       createRow,
       duplicateRow,
       style,
+      rowKey,
       onFocus,
       onBlur,
       onActiveCellChange,

diff --git a/src/types.ts b/src/types.ts
@@ -166,6 +166,7 @@ export type DataSheetGridProps<T> = {
   columns?: Partial<Column<T, any, any>>[]
   gutterColumn?: SimpleColumn<T, any> | false
   stickyRightColumn?: SimpleColumn<T, any>
+  rowKey?: string | ((rowData: T, index: number) => string)
   height?: number
   rowHeight?: number
   headerRowHeight?: number