🎨 Expose ref to Datagrid api (#3685)

* 🎨 Expose ref to Datagrid api * 🚧 Requested change
equinor · Nov 15, 2024 · 7e22cf2 · 7e22cf2
1 parent 7685218
commit 7e22cf2
Showing 1 changed file with 77 additions and 60 deletions.
diff --git a/packages/eds-data-grid-react/src/EdsDataGrid.tsx b/packages/eds-data-grid-react/src/EdsDataGrid.tsx
@@ -22,12 +22,14 @@ import {
 import { useVirtualizer } from '@tanstack/react-virtual'
 import {
   CSSProperties,
+  forwardRef,
   HTMLAttributes,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
+  ForwardedRef,
 } from 'react'
 import styled from 'styled-components'
 import { TableProvider } from './EdsDataGridContext'
@@ -39,66 +41,70 @@ import {
   addPxSuffixIfInputHasNoPrefix,
   logDevelopmentWarningOfPropUse,
 } from './utils'
+import { mergeRefs } from '@equinor/eds-utils'
 
-export function EdsDataGrid<T>({
-  rows,
-  columns,
-  columnResizeMode,
-  pageSize,
-  rowSelection,
-  enableRowSelection,
-  enableMultiRowSelection,
-  enableSubRowSelection,
-  selectedRows,
-  rowSelectionState,
-  enableColumnFiltering,
-  debug,
-  enablePagination,
-  enableSorting,
-  stickyHeader,
-  stickyFooter,
-  onSelectRow,
-  onRowSelectionChange,
-  caption,
-  enableVirtual,
-  virtualHeight,
-  columnVisibility,
-  columnVisibilityChange,
-  emptyMessage,
-  columnOrder,
-  cellClass,
-  cellStyle,
-  rowClass,
-  rowStyle,
-  headerClass,
-  headerStyle,
-  footerClass,
-  footerStyle,
-  externalPaginator,
-  onSortingChange,
-  manualSorting,
-  sortingState,
-  columnPinState,
-  scrollbarHorizontal,
-  width,
-  minWidth,
-  height,
-  getRowId,
-  rowVirtualizerInstanceRef,
-  tableInstanceRef,
-  columnSizing,
-  onColumnResize,
-  expansionState,
-  setExpansionState,
-  getSubRows,
-  defaultColumn,
-  onRowContextMenu,
-  onRowClick,
-  onCellClick,
-  enableFooter,
-  enableSortingRemoval,
-  ...rest
-}: EdsDataGridProps<T> & HTMLAttributes<HTMLDivElement>) {
+function EdsDataGridInner<T>(
+  {
+    rows,
+    columns,
+    columnResizeMode,
+    pageSize,
+    rowSelection,
+    enableRowSelection,
+    enableMultiRowSelection,
+    enableSubRowSelection,
+    selectedRows,
+    rowSelectionState,
+    enableColumnFiltering,
+    debug,
+    enablePagination,
+    enableSorting,
+    stickyHeader,
+    stickyFooter,
+    onSelectRow,
+    onRowSelectionChange,
+    caption,
+    enableVirtual,
+    virtualHeight,
+    columnVisibility,
+    columnVisibilityChange,
+    emptyMessage,
+    columnOrder,
+    cellClass,
+    cellStyle,
+    rowClass,
+    rowStyle,
+    headerClass,
+    headerStyle,
+    footerClass,
+    footerStyle,
+    externalPaginator,
+    onSortingChange,
+    manualSorting,
+    sortingState,
+    columnPinState,
+    scrollbarHorizontal,
+    width,
+    minWidth,
+    height,
+    getRowId,
+    rowVirtualizerInstanceRef,
+    tableInstanceRef,
+    columnSizing,
+    onColumnResize,
+    expansionState,
+    setExpansionState,
+    getSubRows,
+    defaultColumn,
+    onRowContextMenu,
+    onRowClick,
+    onCellClick,
+    enableFooter,
+    enableSortingRemoval,
+    ...rest
+  }: EdsDataGridProps<T> & HTMLAttributes<HTMLDivElement>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
   logDevelopmentWarningOfPropUse({
     virtualHeight: {
       value: virtualHeight,
@@ -354,6 +360,10 @@ export function EdsDataGrid<T>({
   }
 
   const parentRef = useRef<HTMLDivElement>(null)
+  const combinedRef = useMemo(
+    () => mergeRefs<HTMLDivElement>(parentRef, ref),
+    [parentRef, ref],
+  )
 
   /**
    * Virtualization setup
@@ -404,7 +414,7 @@ export function EdsDataGrid<T>({
         {...rest}
         className={`table-wrapper ${rest.className ?? ''}`}
         style={{ ...rest.style, ...tableWrapperStyle }}
-        ref={parentRef}
+        ref={combinedRef}
         $height={height}
         $width={width}
         $scrollbarHorizontal={scrollbarHorizontal}
@@ -567,3 +577,10 @@ const TableWrapper = styled.div<{
   contain: ${({ $height, $width }) =>
     Boolean($height) && Boolean($width) ? 'strict' : 'unset'};
 `
+
+export const EdsDataGrid = forwardRef(EdsDataGridInner) as <T>(
+  props: EdsDataGridProps<T> &
+    HTMLAttributes<HTMLDivElement> & {
+      ref?: ForwardedRef<HTMLDivElement>
+    },
+) => ReturnType<typeof EdsDataGridInner>