remove ref

packages/component-library/src/TableGrid/index.module.scss

@@ -22,8 +22,7 @@
   align-items: center;
 }
 
-
 .skeletonContainer {
   height: theme.spacing(10);
   width: 100%;
-}
+}

packages/component-library/src/TableGrid/index.stories.tsx

@@ -1,13 +1,11 @@
 import { ChartLine } from "@phosphor-icons/react/dist/ssr/ChartLine";
 import type { Meta, StoryObj } from "@storybook/react";
 import BtcIcon from "cryptocurrency-icons/svg/color/btc.svg";
-import { useRef } from "react";
 
 import { Badge } from "../Badge";
 import { SymbolPairTag } from "../SymbolPairTag";
 import { dummyRowData } from "./dummy-row-data";
 import { TableGrid as TableGridComponent } from "./index.jsx";
-import { AgGridReact } from "ag-grid-react";
 
 const meta = {
   component: TableGridComponent,
@@ -108,14 +106,10 @@ const args = {
 export const TableGrid = {
   args,
 } satisfies StoryObj<typeof TableGridComponent>;
-const Comp = () => {
-  const gridRef = useRef<AgGridReact<typeof args.rowData>>(null);
-  console.log(gridRef, args,'args');
-  return <TableGridComponent  {...args} ref={gridRef}/>;
-};
+
 export const PriceFeedsCard = {
   render: (props) => {
-    return <Comp {...props} />;
+    return <TableGridComponent {...props} />;
   },
   args: {
     ...args,

packages/component-library/src/TableGrid/index.tsx

@@ -6,16 +6,8 @@ import {
   themeQuartz,
 } from "ag-grid-community";
 import { AgGridReact } from "ag-grid-react";
-import {
-  type ForwardedRef,
-  forwardRef,
-  type ReactNode,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import type { ReactNode } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 
 import { Card } from "../Card";
 import { Paginator } from "../Paginator";
@@ -32,101 +24,98 @@ ModuleRegistry.registerModules([
 
 const SkeletonCellRenderer = (props: { value?: ReactNode }) => {
   if (!props.value) {
-    return <div className={styles.defaultCellContainer}><div className={styles.skeletonContainer}><Skeleton fill /></div></div>;
+    return (
+      <div className={styles.defaultCellContainer}>
+        <div className={styles.skeletonContainer}>
+          <Skeleton fill />
+        </div>
+      </div>
+    );
   }
   return <div className={styles.defaultCellContainer}>{props.value}</div>;
 };
 
-export const TableGrid = forwardRef(
-  <TData extends Record<string, unknown>>(
-    {
-      rowData,
-      colDefs,
-      isLoading,
-      cardProps,
-      pagination,
-      ...props
-    }: TableGridProps<TData>,
-    ref: ForwardedRef<AgGridReact<TData>>,
-  ) => {
-    const gridRef = useRef<AgGridReact<TData>>(null);
-    const [pageSize, setPageSize] = useState(10);
-    const [currentPage, setCurrentPage] = useState(1);
-    const [totalPages, setTotalPages] = useState(1);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    useImperativeHandle(ref, () => gridRef.current!);
+export const TableGrid = <TData extends Record<string, unknown>>({
+  rowData,
+  colDefs,
+  isLoading,
+  cardProps,
+  pagination,
+  ...props
+}: TableGridProps<TData>) => {
+  const gridRef = useRef<AgGridReact<TData>>(null);
+  const [pageSize, setPageSize] = useState(10);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+
+  const defaultColDef = useMemo(() => {
+    return {
+      cellRenderer: SkeletonCellRenderer,
+      flex: 1,
+    };
+  }, []);
 
-    const defaultColDef = useMemo(() => {
+  const mappedColDefs = useMemo(() => {
+    return colDefs.map((colDef) => {
       return {
-        cellRenderer: SkeletonCellRenderer,
-        flex: 1,
+        ...colDef,
+        // the types in ag-grid are `any` for the cellRenderers
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        cellRenderer: isLoading
+          ? (colDef.loadingCellRenderer ?? SkeletonCellRenderer)
+          : colDef.cellRenderer,
       };
-    }, []);
-
-    const mappedColDefs = useMemo(() => {
-      return colDefs.map((colDef) => {
-        return {
-          ...colDef,
-          // the types in ag-grid are `any` for the cellRenderers
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          cellRenderer: isLoading
-            ? (colDef.loadingCellRenderer ?? SkeletonCellRenderer)
-            : colDef.cellRenderer,
-        };
-      });
-    }, [colDefs, isLoading]);
-
-    const onPaginationChanged = useCallback(() => {
-      if (gridRef.current?.api) {
-        const api = gridRef.current.api;
-        setPageSize(api.paginationGetPageSize());
-        setCurrentPage(api.paginationGetCurrentPage() + 1);
-        setTotalPages(api.paginationGetTotalPages());
-      }
-    }, []);
-    const onPageChange = useCallback((newPage: number) => {
-      gridRef.current?.api.paginationGoToPage(newPage - 1);
-    }, []);
+    });
+  }, [colDefs, isLoading]);
 
-    const tableGrid = (
-      <AgGridReact<TData>
-        className={styles.tableGrid}
-        // @ts-expect-error empty row data
-        rowData={isLoading ? [[]] : rowData}
-        defaultColDef={defaultColDef}
-        columnDefs={mappedColDefs}
-        theme={themeQuartz}
-        domLayout="autoHeight"
-        pagination={pagination ?? false}
-        paginationPageSize={pageSize}
-        suppressPaginationPanel
-        onPaginationChanged={onPaginationChanged}
-        ref={gridRef}
-        {...props}
-      />
-    );
-    if (!cardProps && !pagination) {
-      return tableGrid;
+  const onPaginationChanged = useCallback(() => {
+    if (gridRef.current?.api) {
+      const api = gridRef.current.api;
+      setPageSize(api.paginationGetPageSize());
+      setCurrentPage(api.paginationGetCurrentPage() + 1);
+      setTotalPages(api.paginationGetTotalPages());
     }
-    return (
-      <Card
-        footer={
-          pagination && (
-            <Paginator
-              numPages={totalPages}
-              currentPage={currentPage}
-              onPageChange={onPageChange}
-              pageSize={pageSize}
-              onPageSizeChange={setPageSize}
-            />
-          )
-        }
-        {...cardProps}
-      >
-        {tableGrid}
-      </Card>
-    );
-  },
-);
+  }, []);
+  const onPageChange = useCallback((newPage: number) => {
+    gridRef.current?.api.paginationGoToPage(newPage - 1);
+  }, []);
 
-TableGrid.displayName = "TableGrid";
+  const tableGrid = (
+    <AgGridReact<TData>
+      className={styles.tableGrid}
+      // @ts-expect-error empty row data
+      rowData={isLoading ? [[]] : rowData}
+      defaultColDef={defaultColDef}
+      columnDefs={mappedColDefs}
+      theme={themeQuartz}
+      domLayout="autoHeight"
+      pagination={pagination ?? false}
+      paginationPageSize={pageSize}
+      suppressPaginationPanel
+      onPaginationChanged={onPaginationChanged}
+      ref={gridRef}
+      {...props}
+    />
+  );
+  if (!cardProps && !pagination) {
+    return tableGrid;
+  }
+  return (
+    <Card
+      footer={
+        pagination && (
+          <Paginator
+            numPages={totalPages}
+            currentPage={currentPage}
+            onPageChange={onPageChange}
+            pageSize={pageSize}
+            onPageSizeChange={setPageSize}
+          />
+        )
+      }
+      {...cardProps}
+    >
+      {tableGrid}
+    </Card>
+  );
+};