use ref

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

@@ -1,11 +1,13 @@
 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,
@@ -106,10 +108,14 @@ 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 <TableGridComponent {...props} />;
+    return <Comp {...props} />;
   },
   args: {
     ...args,

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

@@ -7,8 +7,9 @@ import {
 } from "ag-grid-community";
 import { AgGridReact } from "ag-grid-react";
 import {
+  type ForwardedRef,
   forwardRef,
-  ReactNode,
+  type ReactNode,
   useCallback,
   useImperativeHandle,
   useMemo,
@@ -46,13 +47,14 @@ export const TableGrid = forwardRef(
       pagination,
       ...props
     }: TableGridProps<TData>,
-    ref: React.Ref<AgGridReact<TData> | null>,
+    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);
-    useImperativeHandle(ref, () => gridRef.current);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    useImperativeHandle(ref, () => gridRef.current!);
 
     const defaultColDef = useMemo(() => {
       return {
@@ -89,7 +91,6 @@ export const TableGrid = forwardRef(
     const tableGrid = (
       <AgGridReact<TData>
         className={styles.tableGrid}
-        ref={gridRef}
         // @ts-expect-error empty row data
         rowData={isLoading ? [[]] : rowData}
         defaultColDef={defaultColDef}
@@ -100,6 +101,7 @@ export const TableGrid = forwardRef(
         paginationPageSize={pageSize}
         suppressPaginationPanel
         onPaginationChanged={onPaginationChanged}
+        ref={gridRef}
         {...props}
       />
     );