Add prePasteValues column prop

Author: nick-keller

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## 3.6.0
+> Date: 2021-12-30
+### Added
+- New column prop `prePasteValues`
+
 ## 3.5.0
 > Date: 2021-12-26
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-datasheet-grid",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "An Excel-like React component to create beautiful spreadsheets.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/columns/checkboxColumn.tsx

@@ -52,7 +52,7 @@ const CheckboxComponent = React.memo<CellProps<boolean, any>>(
 
 CheckboxComponent.displayName = 'CheckboxComponent'
 
-export const checkboxColumn: Partial<Column<boolean, any>> = {
+export const checkboxColumn: Partial<Column<boolean, any, string>> = {
   component: CheckboxComponent as CellComponent<boolean, any>,
   deleteValue: () => false,
   // We can customize what value is copied: when the checkbox is checked we copy YES, otherwise we copy NO

src/columns/dateColumn.tsx

@@ -41,7 +41,7 @@ const DateComponent = React.memo<CellProps<Date | null, any>>(
 
 DateComponent.displayName = 'DateComponent'
 
-export const dateColumn: Partial<Column<Date | null, any>> = {
+export const dateColumn: Partial<Column<Date | null, any, string>> = {
   component: DateComponent as CellComponent<Date | null, any>,
   deleteValue: () => null,
   // We convert the date to a string for copying using toISOString

src/columns/keyColumn.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useRef } from 'react'
 import { CellComponent, Column } from '../types'
 
-type ColumnData = { key: string; original: Partial<Column<any, any>> }
+type ColumnData = { key: string; original: Partial<Column<any, any, any>> }
 
 const KeyComponent: CellComponent<any, ColumnData> = ({
   columnData: { key, original },
@@ -41,11 +41,12 @@ const KeyComponent: CellComponent<any, ColumnData> = ({
 
 export const keyColumn = <
   T extends Record<string, any>,
-  K extends keyof T = keyof T
+  K extends keyof T = keyof T,
+  PasteValue = string
 >(
   key: K,
-  column: Partial<Column<T[K], any>>
-): Partial<Column<T, ColumnData>> => ({
+  column: Partial<Column<T[K], any, PasteValue>>
+): Partial<Column<T, ColumnData, PasteValue>> => ({
   id: key as string,
   ...column,
   // We pass the key and the original column as columnData to be able to retrieve them in the cell component

src/columns/textColumn.tsx

@@ -158,7 +158,7 @@ export function createTextColumn<T = string | null>({
   formatForCopy = (value) => String(value ?? ''),
   parsePastedValue = (value) =>
     (value.replace(/[\n\r]+/g, ' ').trim() || (null as unknown)) as T,
-}: TextColumnOptions<T> = {}): Partial<Column<T, TextColumnData<T>>> {
+}: TextColumnOptions<T> = {}): Partial<Column<T, TextColumnData<T>, string>> {
   return {
     component: TextComponent as unknown as CellComponent<T, TextColumnData<T>>,
     columnData: {

src/components/Cell.tsx

@@ -6,7 +6,7 @@ export const Cell: FC<{
   gutter: boolean
   stickyRight: boolean
   disabled?: boolean
-  column: Column<any, any>
+  column: Column<any, any, any>
   className: string
   active?: boolean
 }> = ({

src/components/DataSheetGrid.tsx

@@ -47,7 +47,7 @@ import { encode as encodeHtml } from 'html-entities'
 import { getAllTabbableElements } from '../utils/tab'
 
 const DEFAULT_DATA: any[] = []
-const DEFAULT_COLUMNS: Column<any, any>[] = []
+const DEFAULT_COLUMNS: Column<any, any, any>[] = []
 const DEFAULT_CREATE_ROW: DataSheetGridProps<any>['createRow'] = () => ({})
 const DEFAULT_EMPTY_CALLBACK: () => void = () => null
 const DEFAULT_DUPLICATE_ROW: DataSheetGridProps<any>['duplicateRow'] = ({
@@ -676,6 +676,20 @@ export const DataSheetGrid = React.memo(
             const min: Cell = selection?.min || activeCell
             const max: Cell = selection?.max || activeCell
 
+            const results = await Promise.all(
+              pasteData[0].map((_, columnIndex) => {
+                const prePasteValues =
+                  columns[min.col + columnIndex + 1]?.prePasteValues
+
+                const values = pasteData.map((row) => row[columnIndex])
+                return prePasteValues?.(values) ?? values
+              })
+            )
+
+            pasteData = pasteData.map((_, rowIndex) =>
+              results.map((column) => column[rowIndex])
+            )
+
             // Paste single row
             if (pasteData.length === 1) {
               const newData = [...data]

src/hooks/useColumnWidths.ts

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { useDeepEqualState } from './useDeepEqualState'
 
 export const useColumnWidths = (
-  columns: Column<any, any>[],
+  columns: Column<any, any, any>[],
   width?: number
 ) => {
   const [columnWidths, setColumnWidths] = useDeepEqualState<

src/hooks/useColumns.tsx

@@ -9,14 +9,15 @@ const defaultGutterComponent = ({ rowIndex }: CellProps<any, any>) => (
   <>{rowIndex + 1}</>
 )
 const cellAlwaysEmpty = () => true
+const defaultPrePasteValues = (values: string[]) => values
 
 export const useColumns = <T extends any>(
-  columns: Partial<Column<T, any>>[],
+  columns: Partial<Column<T, any, any>>[],
   gutterColumn?: SimpleColumn<T, any> | false,
   stickyRightColumn?: SimpleColumn<T, any>
-): Column<T, any>[] => {
-  return useMemo<Column<T, any>[]>(() => {
-    const partialColumns: Partial<Column<T, any>>[] = [
+): Column<T, any, any>[] => {
+  return useMemo<Column<T, any, any>[]>(() => {
+    const partialColumns: Partial<Column<T, any, any>>[] = [
       gutterColumn === false
         ? {
             width: 0,
@@ -49,7 +50,7 @@ export const useColumns = <T extends any>(
       })
     }
 
-    return partialColumns.map<Column<T, any>>((column) => ({
+    return partialColumns.map<Column<T, any, any>>((column) => ({
       ...column,
       width: column.width ?? 1,
       minWidth: column.minWidth ?? 100,
@@ -61,6 +62,7 @@ export const useColumns = <T extends any>(
       deleteValue: column.deleteValue ?? identityRow,
       copyValue: column.copyValue ?? defaultCopyValue,
       pasteValue: column.pasteValue ?? identityRow,
+      prePasteValues: column.prePasteValues ?? defaultPrePasteValues,
       isCellEmpty: column.isCellEmpty ?? defaultIsCellEmpty,
     }))
   }, [gutterColumn, stickyRightColumn, columns])