feat: start table grid

packages/component-library/package.json

@@ -41,6 +41,7 @@
     "@amplitude/plugin-autocapture-browser": "catalog:",
     "@axe-core/react": "catalog:",
     "@next/third-parties": "catalog:",
+    "ag-grid-react": "catalog:",
     "@react-hookz/web": "catalog:",
     "bcp-47": "catalog:",
     "clsx": "catalog:",

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

@@ -0,0 +1,17 @@
+@use "../theme";
+
+.tableGrid {
+  --ag-browser-color-scheme: light-dark(light, dark);
+  --ag-background-color: #{theme.color("background", "primary")};
+  --ag-header-background-color: var(--ag-background-color);
+  --ag-foreground-color: #{theme.color("paragraph")};
+  --ag-accent-color: #{theme.color("button", "outline", "background", "active")};
+  --ag-wrapper-border: none;
+  // .ag-row-hover {
+  //   background-color: theme.color("button","outline","background","active");
+  // }
+}
+
+.tableGrid{
+  height: 100%;
+}

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

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { TableGrid as TableGridComponent } from "./index.jsx";
+
+const meta = {
+  component: TableGridComponent,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    columns: {
+      table: {
+        disable: true,
+      },
+    },
+    rows: {
+      table: {
+        disable: true,
+      },
+    },
+    renderEmptyState: {
+      table: {
+        disable: true,
+      },
+    },
+    className: {
+      table: {
+        disable: true,
+      },
+    },
+    label: {
+      table: {
+        category: "Accessibility",
+      },
+    },
+    isUpdating: {
+      control: "boolean",
+      table: {
+        category: "State",
+      },
+    },
+    isLoading: {
+      control: "boolean",
+      table: {
+        category: "State",
+      },
+    },
+    fill: {
+      control: "boolean",
+      table: {
+        category: "Variant",
+      },
+    },
+    rounded: {
+      control: "boolean",
+      table: {
+        category: "Variant",
+      },
+    },
+    dependencies: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} satisfies Meta<typeof TableGridComponent>;
+export default meta;
+
+export const TableGrid = {
+  args: {
+    colDefs: [
+      {
+        name: "PRICE FEED",
+        field: "feed",
+      },
+      {
+        name: "PRICE",
+        field: "price",
+        fill: true,
+        loadingSkeletonWidth: 30,
+      },
+      {
+        name: "CONFIDENCE",
+        field: "confidence",
+        loadingSkeletonWidth: 20,
+      },
+    ],
+    rowData: [
+      {
+        feed: "BTC/USD",
+          price: "$100,000",
+          confidence: "+/- 5%",
+      },
+      {
+        feed: "ETH/USD",
+          price: "$1,000",
+          confidence: "+/- 10%",
+      },
+      {
+        feed: "SOL/USD",
+          price: "$1,000,000,000",
+          confidence: "+/- 0.1%",
+      },
+    ],
+  },
+} satisfies StoryObj<typeof TableGridComponent>;

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

@@ -0,0 +1,59 @@
+import { AllCommunityModule, ModuleRegistry, type ColDef } from 'ag-grid-community';
+import { AgGridReact, type CustomLoadingCellRendererProps } from 'ag-grid-react'; // React Data Grid Component
+import { useCallback, useMemo, useState } from 'react';
+import styles from './index.module.scss';
+import { themeQuartz } from 'ag-grid-community';
+import type { CustomLoadingCellRendererProps } from 'ag-grid-react';
+import { Skeleton } from '../Skeleton';
+
+// Register all Community features
+ModuleRegistry.registerModules([AllCommunityModule,]);
+
+const SkeletonCellRenderer = (props) => {
+    console.log(props);
+  if (!props.value) {
+    return <Skeleton fill />;
+  }
+  return <span>{props.value}</span>;
+};
+
+type ExtendedColDef = ColDef & {
+    loadingSkeletonWidth?: number;
+}
+
+export type TableGridProps = {
+    rowData: Record<string, unknown>[];
+    colDefs: ExtendedColDef[];
+}
+export const TableGrid = ({ rowData, colDefs }: TableGridProps) => {
+   // Row Data: The data to be displayed.
+    // const [rowData, setRowData] = useState([
+    //     { make: undefined, model: "Model Y", price: 64950, electric: true },
+    //     { make: "Ford", model: "F-Series", price: 33850, electric: false },
+    //     { make: "Toyota", model: "Corolla", price: 29600, electric: false },
+    // ]);
+
+    // // Column Definitions: Defines the columns to be displayed.
+    // const [colDefs, setColDefs] = useState([
+    //     { field: "make", cellRenderer: SkeletonCellRenderer },
+    //     { field: "model", cellRenderer: SkeletonCellRenderer },
+    //     { field: "price", cellRenderer: SkeletonCellRenderer },
+    //     { field: "electric", cellRenderer: SkeletonCellRenderer }
+    // ]);
+
+  const defaultColDef = useMemo(() => {
+    return {
+      cellRenderer: SkeletonCellRenderer,
+    };
+  }, []);
+    return <div className={styles.tableGrid}>
+        <AgGridReact
+        // loadingCellRenderer={loadingCellRenderer}
+        // loadingCellRendererParams={loadingCellRendererParams}
+            rowData={rowData}
+            defaultColDef={defaultColDef}
+            columnDefs={colDefs}
+            theme={themeQuartz}
+        />
+    </div>
+}

pnpm-lock.yaml

@@ -147,6 +147,9 @@ catalogs:
     '@vercel/functions':
       specifier: ^2.0.0
       version: 2.0.0
+    ag-grid-react:
+      specifier: ^34.2.0
+      version: 34.2.0
     async-cache-dedupe:
       specifier: ^3.0.0
       version: 3.0.0
@@ -2163,6 +2166,9 @@ importers:
       '@react-hookz/web':
         specifier: 'catalog:'
         version: 25.1.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      ag-grid-react:
+        specifier: 'catalog:'
+        version: 34.2.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       bcp-47:
         specifier: 'catalog:'
         version: 2.1.0
@@ -12001,6 +12007,18 @@ packages:
   aes-js@4.0.0-beta.5:
     resolution: {integrity: sha512-G965FqalsNyrPqgEGON7nIx1e/OVENSgiEIzyC63haUMuvNnwIgIjMs52hlTCKhkBny7A2ORNlfY9Zu+jmGk1Q==}
 
+  ag-charts-types@12.2.0:
+    resolution: {integrity: sha512-d2qQrQirt9wP36YW5HPuOvXsiajyiFnr1CTsoCbs02bavPDz7Lk2jHp64+waM4YKgXb3GN7gafbBI9Qgk33BmQ==}
+
+  ag-grid-community@34.2.0:
+    resolution: {integrity: sha512-peS7THEMYwpIrwLQHmkRxw/TlOnddD/F5A88RqlBxf8j+WqVYRWMOOhU5TqymGcha7z2oZ8IoL9ROl3gvtdEjg==}
+
+  ag-grid-react@34.2.0:
+    resolution: {integrity: sha512-dLKFw6hz75S0HLuZvtcwjm+gyiI4gXVzHEu7lWNafWAX0mb8DhogEOP5wbzAlsN6iCfi7bK/cgZImZFjenlqwg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   agent-base@6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
@@ -38270,6 +38288,19 @@ snapshots:
 
   aes-js@4.0.0-beta.5: {}
 
+  ag-charts-types@12.2.0: {}
+
+  ag-grid-community@34.2.0:
+    dependencies:
+      ag-charts-types: 12.2.0
+
+  ag-grid-react@34.2.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      ag-grid-community: 34.2.0
+      prop-types: 15.8.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   agent-base@6.0.2:
     dependencies:
       debug: 4.4.0(supports-color@8.1.1)

pnpm-workspace.yaml

@@ -51,6 +51,7 @@ catalog:
   "@amplitude/analytics-browser": ^2.13.0
   "@amplitude/plugin-autocapture-browser": ^1.0.0
   "@axe-core/react": ^4.10.1
+  "ag-grid-react": ^34.2.0
   "@babel/cli": ^7.27.2
   "@babel/core": ^7.27.1
   "@babel/preset-typescript": ^7.27.1