feat(ag-grid): init column search table with AG-Grid

package.json

@@ -7,13 +7,17 @@
     "access": "public"
   },
   "dependencies": {
+    "@ag-grid-community/client-side-row-model": "^32.0.0",
+    "@ag-grid-community/react": "^32.0.0",
     "@scania/tegel-react": "1.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.11",
     "@types/react-dom": "^18.0.10",
+    "ag-grid-community": "^32.0.0",
+    "ag-grid-react": "^32.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/components/AgGrid/AgGridColumnSearch.tsx

@@ -0,0 +1,67 @@
+import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+// Theme
+import { ColDef, ModuleRegistry, GridReadyEvent } from '@ag-grid-community/core';
+import { AgGridReact } from '@ag-grid-community/react';
+// React Grid Logic
+import 'ag-grid-community/styles/ag-grid.css';
+// Core CSS
+import 'ag-grid-community/styles/ag-theme-quartz.css';
+import React, { useCallback, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+ModuleRegistry.registerModules([ClientSideRowModelModule]);
+
+// Row Data Interface
+interface IRow {
+  make: string;
+  model: string;
+  price: number;
+}
+
+// Create new GridExample component
+const AgGridColumnSearch = () => {
+  // Row Data: The data to be displayed.
+  const [rowData, setRowData] = useState<IRow[]>([
+    { make: 'Tesla', model: 'Model Y', price: 64950 },
+    { make: 'Ford', model: 'F-Series', price: 33850 },
+    { make: 'Toyota', model: 'Corolla', price: 29600 },
+    { make: 'Mercedes', model: 'EQA', price: 48890 },
+    { make: 'Fiat', model: '500', price: 15774 },
+    { make: 'Nissan', model: 'Juke', price: 20675 },
+  ]);
+
+  // Column Definitions: Defines & controls grid columns.
+  const [colDefs, setColDefs] = useState<ColDef<IRow>[]>([
+    { field: 'make' },
+    { field: 'model' },
+    { field: 'price' },
+  ]);
+
+  const defaultColDef: ColDef = {
+    flex: 1,
+  };
+
+  const onGridReady = useCallback((params: GridReadyEvent) => {
+    fetch('https://www.ag-grid.com/example-assets/row-data.json')
+      .then((resp) => resp.json())
+      .then((data: IRow[]) => setRowData(data));
+  }, []);
+
+  // Container: Defines the grid's theme & dimensions.
+  return (
+    <div className={'ag-theme-quartz-dark'} style={{ width: '100%', height: '100%' }}>
+      <AgGridReact
+        rowData={rowData}
+        columnDefs={colDefs}
+        defaultColDef={defaultColDef}
+        onGridReady={onGridReady}
+      />
+    </div>
+  );
+};
+
+// Render GridExample
+const root = createRoot(document.getElementById('root')!);
+root.render(<AgGridColumnSearch />);
+
+export default AgGridColumnSearch;

src/components/Navigation/SideMenu.tsx

@@ -45,12 +45,21 @@ const SideMenu = ({ style, className, pathname, toggleMobileNav, sideMenuRef }:
             Stepper
           </Link>
         </TdsSideMenuItem>
-        <TdsSideMenuItem selected={pathname === '/table'}>
-          <Link to={'/table'} onClick={() => toggleMobileNav()}>
-            <TdsIcon name="document_tool" size="24"></TdsIcon>
-            Table
-          </Link>
-        </TdsSideMenuItem>
+        <TdsSideMenuDropdown
+          default-open={pathname.includes('/table')}
+          selected={pathname.includes('/table')}
+        >
+          <TdsIcon slot="icon" name="document_tool" size="24"></TdsIcon>
+          <span slot="label">Table</span>
+          <TdsSideMenuDropdownList>
+            <TdsSideMenuDropdownListItem selected={pathname.includes('/table')}>
+              <Link to="/table">Tegel Table</Link>
+            </TdsSideMenuDropdownListItem>
+            <TdsSideMenuDropdownListItem selected={pathname.includes('ag-grid')}>
+              <Link to="/ag-grid">Tegel + AG-Grid</Link>
+            </TdsSideMenuDropdownListItem>
+          </TdsSideMenuDropdownList>
+        </TdsSideMenuDropdown>
         <TdsSideMenuItem selected={pathname === '/web-components'}>
           <Link to={'/web-components'} onClick={() => toggleMobileNav()}>
             <TdsIcon name="tool" size="24"></TdsIcon>

src/index.tsx

@@ -18,7 +18,11 @@ import StepperPage from './pages/StepperPage';
 import NotificationPage from './pages/NotificationPage';
 import MainLayout from './MainLayout';
 import NotFound from './pages/NotFoundPage/NotFound';
+import AgGridPage from './pages/AgGridPage';
 import { defineCustomElements } from '@scania/tegel-react';
+import { AgGridReact } from 'ag-grid-react'; // React Data Grid Component
+import 'ag-grid-community/styles/ag-grid.css'; // Mandatory CSS required by the Data Grid
+import 'ag-grid-community/styles/ag-theme-quartz.css'; // Optional Theme applied to the Data Grid
 
 export const mainRoutes: RouteObject[] = [
   {
@@ -37,6 +41,10 @@ export const mainRoutes: RouteObject[] = [
         path: 'table',
         element: <TablePage />,
       },
+      {
+        path: 'ag-grid',
+        element: <AgGridPage />,
+      },
       {
         path: 'form',
         element: <FormPage />,

src/pages/AgGridPage.tsx

@@ -0,0 +1,7 @@
+import AgGridColumnSearch from '../components/AgGrid/AgGridColumnSearch';
+
+const AgGridPage = () => {
+  return <AgGridColumnSearch />;
+};
+
+export default AgGridPage;