@@ -30,7 +30,7 @@ import { PrimaryColor } from "constants/style";
3030import { trans } from "i18n" ;
3131import _ , { isEqual } from "lodash" ;
3232import { darkenColor , isDarkColor , isValidColor , ScrollBar } from "lowcoder-design" ;
33- import React , { Children , useCallback , useContext , useEffect , useMemo , useRef , useState } from "react" ;
33+ import React , { Children , useCallback , useContext , useEffect , useImperativeHandle , useMemo , useRef , useState } from "react" ;
3434import { Resizable } from "react-resizable" ;
3535import styled , { css } from "styled-components" ;
3636import { useMergeCompStyles , useUserViewMode } from "util/hooks" ;
@@ -498,10 +498,10 @@ const TableTdLoading = styled(Skeleton.Button)<SkeletonButtonProps & {
498498 }
499499` ;
500500
501- const ResizeableTitle = ( props : any ) => {
501+ const ResizeableTitle = React . forwardRef < HTMLTableHeaderCellElement , any > ( ( props , ref ) => {
502502const { onResize, onResizeStop, width, viewModeResizable, ...restProps } = props ;
503503const [ childWidth , setChildWidth ] = useState ( 0 ) ;
504- const resizeRef = useRef < HTMLDivElement > ( null ) ;
504+ const resizeRef = useRef < HTMLTableHeaderCellElement > ( null ) ;
505505const isUserViewMode = useUserViewMode ( ) ;
506506
507507const updateChildWidth = useCallback ( ( ) => {
@@ -526,6 +526,8 @@ const ResizeableTitle = (props: any) => {
526526} ;
527527} , [ updateChildWidth ] ) ;
528528
529+ useImperativeHandle ( ref , ( ) => resizeRef . current ! , [ ] ) ;
530+
529531const isNotDataColumn = _ . isNil ( restProps . title ) ;
530532if ( ( isUserViewMode && ! restProps . viewModeResizable ) || isNotDataColumn ) {
531533return < TableTh ref = { resizeRef } { ...restProps } width = { width } /> ;
@@ -559,7 +561,7 @@ const ResizeableTitle = (props: any) => {
559561< TableTh ref = { resizeRef } { ...restProps } title = "" />
560562</ Resizable >
561563) ;
562- } ;
564+ } ) ;
563565
564566type CustomTableProps < RecordType > = Omit < TableProps < RecordType > , "components" | "columns" > & {
565567columns :CustomColumnType < RecordType > [ ] ;
@@ -579,7 +581,7 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
579581} ;
580582} ;
581583
582- const TableCellView = React . memo ( ( props : {
584+ const TableCellView = React . forwardRef < HTMLTableCellElement , {
583585record :RecordType ;
584586title :string ;
585587rowColorFn :RowColorViewType ;
@@ -594,7 +596,7 @@ const TableCellView = React.memo((props: {
594596autoHeight ?:boolean ;
595597loading ?:boolean ;
596598customAlign ?:'left' | 'center' | 'right' ;
597- } ) => {
599+ } > ( ( props , ref ) => {
598600const {
599601 record,
600602 title,
@@ -651,17 +653,23 @@ const TableCellView = React.memo((props: {
651653} ;
652654} , [ record , rowIndex , title , rowColorFn , rowHeightFn , cellColorFn , columnStyle , columnsStyle ] ) ;
653655
654- let tdView ;
655656if ( ! record ) {
656- tdView = < td { ... restProps } > { children } </ td > ;
657- } else {
658- let { background } = style ! ;
659- if ( rowContext . hover ) {
660- background = 'transparent' ;
661- }
657+ return (
658+ < TableCellContext . Provider value = { { isEditing : editing , setIsEditing : setEditing } } >
659+ < td ref = { ref } { ... restProps } > { children } </ td >
660+ </ TableCellContext . Provider >
661+ ) ;
662+ }
662663
663- tdView = (
664+ let { background} = style ! ;
665+ if ( rowContext . hover ) {
666+ background = 'transparent' ;
667+ }
668+
669+ return (
670+ < TableCellContext . Provider value = { { isEditing :editing , setIsEditing :setEditing } } >
664671< TableTd
672+ ref = { ref }
665673{ ...restProps }
666674$background = { background }
667675$style = { style ! }
@@ -677,17 +685,11 @@ const TableCellView = React.memo((props: {
677685 :children
678686}
679687</ TableTd >
680- ) ;
681- }
682-
683- return (
684- < TableCellContext . Provider value = { { isEditing :editing , setIsEditing :setEditing } } >
685- { tdView }
686688</ TableCellContext . Provider >
687689) ;
688690} ) ;
689691
690- const TableRowView = React . memo ( ( props : any ) => {
692+ const TableRowView = React . forwardRef < HTMLTableRowElement , any > ( ( props , ref ) => {
691693const [ hover , setHover ] = useState ( false ) ;
692694const [ selected , setSelected ] = useState ( false ) ;
693695
@@ -700,6 +702,7 @@ const TableRowView = React.memo((props: any) => {
700702return (
701703< TableRowContext . Provider value = { { hover, selected} } >
702704< tr
705+ ref = { ref }
703706{ ...props }
704707tabIndex = { - 1 }
705708onMouseEnter = { handleMouseEnter }