Add ag-grid package

package-lock.json

@@ -15,6 +15,8 @@
         "@mantine/core": "^5.0.0",
         "@mantine/form": "^5.0.0",
         "@mantine/hooks": "^5.0.0",
+        "ag-grid-community": "^28.0.2",
+        "ag-grid-react": "^28.0.0",
         "axios": "^0.26.1",
         "electron-debug": "^3.2.0",
         "electron-log": "^4.4.6",
@@ -3501,6 +3503,24 @@
         "node": ">= 0.12.0"
       }
     },
+    "node_modules/ag-grid-community": {
+      "version": "28.0.2",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-28.0.2.tgz",
+      "integrity": "sha512-yMcDf6QhoKsuUBNklVOS2pAPzG697aNwffaCYr6HKCqEDBqhW7fTtX2iQPD4SZ7/fk/sNX8RSFAI+nTrrjDKFw=="
+    },
+    "node_modules/ag-grid-react": {
+      "version": "28.0.0",
+      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-28.0.0.tgz",
+      "integrity": "sha512-voKc4Q44YAVRZXUQeOPXfO049ak67t5AOy8RTjf1sIv9eZ9O6liVZzNjkWY3pel1cGgTMTqNPWSpQYxBhOe0UA==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "ag-grid-community": "~28.0.0",
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -25913,6 +25933,19 @@
       "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
       "dev": true
     },
+    "ag-grid-community": {
+      "version": "28.0.2",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-28.0.2.tgz",
+      "integrity": "sha512-yMcDf6QhoKsuUBNklVOS2pAPzG697aNwffaCYr6HKCqEDBqhW7fTtX2iQPD4SZ7/fk/sNX8RSFAI+nTrrjDKFw=="
+    },
+    "ag-grid-react": {
+      "version": "28.0.0",
+      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-28.0.0.tgz",
+      "integrity": "sha512-voKc4Q44YAVRZXUQeOPXfO049ak67t5AOy8RTjf1sIv9eZ9O6liVZzNjkWY3pel1cGgTMTqNPWSpQYxBhOe0UA==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",

package.json

@@ -252,6 +252,8 @@
     "@mantine/core": "^5.0.0",
     "@mantine/form": "^5.0.0",
     "@mantine/hooks": "^5.0.0",
+    "ag-grid-community": "^28.0.2",
+    "ag-grid-react": "^28.0.0",
     "axios": "^0.26.1",
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.6",

src/renderer/app.tsx

@@ -13,6 +13,8 @@ import { BrowserRouter, HashRouter } from 'react-router-dom';
 import { useDefaultSettings } from './features/settings';
 import { AppRouter } from './router/AppRouter';
 import './styles/global.scss';
+import 'ag-grid-community/styles/ag-grid.css';
+import './styles/ag-grid.scss';
 
 const SelectRouter = ({ children }: { children: ReactNode }) => {
   if (isElectron()) {

src/renderer/styles/ag-grid.scss

@@ -0,0 +1,8 @@
+.ag-theme-alpine-dark {
+  --ag-borders: none;
+  --ag-background-color: #101010;
+  --ag-odd-row-background-color: #1d1d1d;
+  --ag-font-size: 12px;
+  --ag-foreground-color: #ffffff;
+  --ag-font-family: Poppins;
+}