@servicetitan/table 22.4.3 → 22.5.0

package/src/table.tsx

@@ -81,6 +81,7 @@ interface TableColumnProps<
 
 type ExcludedTableProps =
     | 'data'
+    | 'dataItemKey'
     | 'editField'
     | 'filter'
     | 'onFilterChange'
@@ -133,6 +134,8 @@ export class Table<
         />
     ));
 
+    private customCellMap = new Map<string, FC<TableCellProps<T, TId, P, PId>>>();
+
     private selectHeaderCell: FC<TableHeaderCellProps> = observer((props: TableHeaderCellProps) => {
         if (this.props.hideSelectAll || this.tableState.selectionLimit !== Infinity) {
             return null;
@@ -154,14 +157,10 @@ export class Table<
     // TODO: rid of "memoizeOne" after migration on React.FC
     private withCellTableState = memoizeOne((children: ReactNode) =>
         this.applyToColumns(children, column => {
-            const { cell: Cell } = column.props;
+            const { cell: Cell, field } = column.props;
 
             return cloneElement(column, {
-                cell:
-                    Cell &&
-                    ((props: TableCellProps<T, TId, P, PId>) => (
-                        <Cell {...props} tableState={this.tableState} />
-                    )),
+                cell: this.getOrCreateCellComponentWithTableState(Cell, field),
             });
         })
     );
@@ -327,6 +326,7 @@ export class Table<
             <AnvilTable
                 ref={this.ref}
                 {...props}
+                dataItemKey={this.tableState.rowIdKey}
                 data={[...this.tableState.data]}
                 rowRender={this.rowRender}
                 editField="inEdit"
@@ -354,6 +354,7 @@ export class Table<
                     <TableColumn
                         locked
                         field="selected"
+                        id="selected"
                         width="50px"
                         filterable={false}
                         resizable={false}
@@ -372,6 +373,28 @@ export class Table<
             </AnvilTable>
         );
     };
+
+    private getOrCreateCellComponentWithTableState = (
+        Cell: any,
+        field?: string
+    ): FC<TableCellProps<T, TId, P, PId>> | undefined => {
+        if (!Cell) {
+            return undefined;
+        }
+
+        const CellWithTableState: FC<TableCellProps<T, TId, P, PId>> = (
+            props: TableCellProps<T, TId, P, PId>
+        ) => <Cell {...props} tableState={this.tableState} />;
+        CellWithTableState.displayName = 'CellWithTableState';
+
+        if (field) {
+            if (this.customCellMap.has(field)) {
+                return this.customCellMap.get(field)!;
+            }
+            this.customCellMap.set(field, CellWithTableState);
+        }
+        return CellWithTableState;
+    };
 }
 
 const sanitizeExportFileName = memoizeOne((fileName: string | undefined) =>