diff --git a/package.json b/package.json
index f72defd..9025fb2 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,10 @@
         "prepare": "husky"
     },
     "dependencies": {
+        "@ag-grid-community/client-side-row-model": "^31.3.2",
+        "@ag-grid-community/core": "^31.3.2",
+        "@ag-grid-community/react": "^31.3.2",
+        "@ag-grid-community/styles": "^31.3.2",
         "@tanstack/react-table": "^8",
         "next": "^14",
         "react": "^18",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index eadd59a..e01da68 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,6 +7,7 @@ import { ThemeContext } from "../context/ThemeContext";
 import Buttons from "../components/Buttons";
 import Progress from "../components/Progress";
 import ThemeSwitcher from "../components/ThemeSwitcher";
+import AgGrid from "../components/AgGrid";
 
 // disabled SSR render because the table data is randomly generated
 const Grid = dynamic(() => import("../components/Grid"), {
@@ -38,6 +39,8 @@ export default function Home() {
 
             <Buttons />
 
+            <AgGrid className="w-full h-[500px] ag-theme-quartz" />
+
             <Grid className="w-full overflow-hidden" />
 
             <section className="flex p-4">
diff --git a/src/components/AgGrid.tsx b/src/components/AgGrid.tsx
new file mode 100644
index 0000000..6856f60
--- /dev/null
+++ b/src/components/AgGrid.tsx
@@ -0,0 +1,124 @@
+import * as React from "react";
+import { AgGridReact } from "@ag-grid-community/react";
+import { ModuleRegistry, ColDef } from "@ag-grid-community/core";
+import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
+import "@ag-grid-community/styles/ag-grid.css";
+import "@ag-grid-community/styles/ag-theme-quartz.css";
+
+ModuleRegistry.registerModules([ClientSideRowModelModule]);
+
+interface Props {
+    [rest: string]: any;
+}
+
+export default function AgGrid({ ...rest }: Props): React.JSX.Element {
+    // setRowData
+    const [rowData] = React.useState([
+        { make: "Tesla", model: "Model Y", price: 64950, electric: true, month: "June" },
+        { make: "Ford", model: "F-Series", price: 33850, electric: false, month: "October" },
+        { make: "Toyota", model: "Corolla", price: 29600, electric: false, month: "August" },
+        { make: "Mercedes", model: "EQA", price: 48890, electric: true, month: "February" },
+        { make: "Fiat", model: "500", price: 15774, electric: false, month: "January" },
+        { make: "Nissan", model: "Juke", price: 20675, electric: false, month: "March" },
+        { make: "Vauxhall", model: "Corsa", price: 18460, electric: false, month: "July" },
+        { make: "Volvo", model: "EX30", price: 33795, electric: true, month: "September" },
+        { make: "Mercedes", model: "Maybach", price: 175720, electric: false, month: "December" },
+        { make: "Vauxhall", model: "Astra", price: 25795, electric: false, month: "April" },
+        { make: "Fiat", model: "Panda", price: 13724, electric: false, month: "November" },
+        { make: "Jaguar", model: "I-PACE", price: 69425, electric: true, month: "May" },
+        { make: "Tesla", model: "Model Y", price: 64950, electric: true, month: "June" },
+        { make: "Ford", model: "F-Series", price: 33850, electric: false, month: "October" },
+        { make: "Toyota", model: "Corolla", price: 29600, electric: false, month: "August" },
+        { make: "Mercedes", model: "EQA", price: 48890, electric: true, month: "February" },
+        { make: "Fiat", model: "500", price: 15774, electric: false, month: "January" },
+        { make: "Nissan", model: "Juke", price: 20675, electric: false, month: "March" },
+        { make: "Vauxhall", model: "Corsa", price: 18460, electric: false, month: "July" },
+        { make: "Volvo", model: "EX30", price: 33795, electric: true, month: "September" },
+        { make: "Mercedes", model: "Maybach", price: 175720, electric: false, month: "December" },
+        { make: "Vauxhall", model: "Astra", price: 25795, electric: false, month: "April" },
+        { make: "Fiat", model: "Panda", price: 13724, electric: false, month: "November" },
+        { make: "Jaguar", model: "I-PACE", price: 69425, electric: true, month: "May" },
+        { make: "Tesla", model: "Model Y", price: 64950, electric: true, month: "June" },
+        { make: "Ford", model: "F-Series", price: 33850, electric: false, month: "October" },
+        { make: "Toyota", model: "Corolla", price: 29600, electric: false, month: "August" },
+        { make: "Mercedes", model: "EQA", price: 48890, electric: true, month: "February" },
+        { make: "Fiat", model: "500", price: 15774, electric: false, month: "January" },
+        { make: "Nissan", model: "Juke", price: 20675, electric: false, month: "March" },
+        { make: "Vauxhall", model: "Corsa", price: 18460, electric: false, month: "July" },
+        { make: "Volvo", model: "EX30", price: 33795, electric: true, month: "September" },
+        { make: "Mercedes", model: "Maybach", price: 175720, electric: false, month: "December" },
+        { make: "Vauxhall", model: "Astra", price: 25795, electric: false, month: "April" },
+        { make: "Fiat", model: "Panda", price: 13724, electric: false, month: "November" },
+        { make: "Jaguar", model: "I-PACE", price: 69425, electric: true, month: "May" }
+    ]);
+
+    // setColumnDefs
+    const [columnDefs] = React.useState<ColDef[]>([
+        {
+            field: "make",
+            checkboxSelection: true,
+            editable: true,
+            cellEditor: "agSelectCellEditor",
+            cellEditorParams: {
+                values: [
+                    "Tesla",
+                    "Ford",
+                    "Toyota",
+                    "Mercedes",
+                    "Fiat",
+                    "Nissan",
+                    "Vauxhall",
+                    "Volvo",
+                    "Jaguar"
+                ]
+            }
+        },
+        { field: "model" },
+        { field: "price", filter: "agNumberColumnFilter" },
+        { field: "electric" },
+        {
+            field: "month",
+            comparator: (valueA: string, valueB: string) => {
+                const months = [
+                    "January",
+                    "February",
+                    "March",
+                    "April",
+                    "May",
+                    "June",
+                    "July",
+                    "August",
+                    "September",
+                    "October",
+                    "November",
+                    "December"
+                ];
+                const idxA = months.indexOf(valueA);
+                const idxB = months.indexOf(valueB);
+                return idxA - idxB;
+            }
+        }
+    ]);
+
+    const defaultColDef = React.useMemo(() => {
+        return {
+            filter: "agTextColumnFilter",
+            floatingFilter: true
+        };
+    }, []);
+
+    return (
+        <div {...rest}>
+            <AgGridReact
+                rowData={rowData}
+                columnDefs={columnDefs}
+                defaultColDef={defaultColDef}
+                rowSelection="multiple"
+                suppressRowClickSelection={true}
+                pagination={true}
+                paginationPageSize={10}
+                paginationPageSizeSelector={[10, 25, 50]}
+            />
+        </div>
+    );
+}
diff --git a/yarn.lock b/yarn.lock
index 3b54109..62fda6d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,6 +12,45 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ag-grid-community/client-side-row-model@npm:^31.3.2":
+  version: 31.3.2
+  resolution: "@ag-grid-community/client-side-row-model@npm:31.3.2"
+  dependencies:
+    "@ag-grid-community/core": "npm:31.3.2"
+    tslib: "npm:^2.3.0"
+  checksum: 10c0/a00df8a32c4487ad9ea7c293056b1a1108e4c05a618e9d873ae9291c13e61d08720a8b2688f69d2157271647c41f3ff6efd9248ca537e3e432e2230b67c128ee
+  languageName: node
+  linkType: hard
+
+"@ag-grid-community/core@npm:31.3.2, @ag-grid-community/core@npm:^31.3.2":
+  version: 31.3.2
+  resolution: "@ag-grid-community/core@npm:31.3.2"
+  dependencies:
+    tslib: "npm:^2.3.0"
+  checksum: 10c0/dc06409584d52bf77f0c4d7e27da8b0c5feecac10089baaacde7c3d89fb07f0478d605c9f050ab87f524ae046b7fa803ac6f60d5dd74c44213856322e8832f5a
+  languageName: node
+  linkType: hard
+
+"@ag-grid-community/react@npm:^31.3.2":
+  version: 31.3.2
+  resolution: "@ag-grid-community/react@npm:31.3.2"
+  dependencies:
+    prop-types: "npm:^15.8.1"
+  peerDependencies:
+    "@ag-grid-community/core": 31.3.2
+    react: ^16.3.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.3.0 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/4c9c5abcb37f7ecc42844c4d83ec1bb55981e4362ec4feae251b2b3795040be0e113ebeaff9e97d7f3cf79600aa75969847ec9617b355448c84a11935fff3309
+  languageName: node
+  linkType: hard
+
+"@ag-grid-community/styles@npm:^31.3.2":
+  version: 31.3.2
+  resolution: "@ag-grid-community/styles@npm:31.3.2"
+  checksum: 10c0/65ad498da1d5275c38fa4f123ffe1ce9e871038cd842ff4a34ca316727b6a354650761bd803887f4e614eaf73a4e1bf65a5d541c7cac13a5d080bfbbedbccc09
+  languageName: node
+  linkType: hard
+
 "@alloc/quick-lru@npm:^5.2.0":
   version: 5.2.0
   resolution: "@alloc/quick-lru@npm:5.2.0"
@@ -7194,7 +7233,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.4.0, tslib@npm:^2.6.2":
+"tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.6.2":
   version: 2.6.3
   resolution: "tslib@npm:2.6.3"
   checksum: 10c0/2598aef53d9dbe711af75522464b2104724d6467b26a60f2bdac8297d2b5f1f6b86a71f61717384aa8fd897240467aaa7bcc36a0700a0faf751293d1331db39a
@@ -7287,6 +7326,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "typescript-nextjs-tailwind-daisyui-starter@workspace:."
   dependencies:
+    "@ag-grid-community/client-side-row-model": "npm:^31.3.2"
+    "@ag-grid-community/core": "npm:^31.3.2"
+    "@ag-grid-community/react": "npm:^31.3.2"
+    "@ag-grid-community/styles": "npm:^31.3.2"
     "@jest/globals": "npm:^29"
     "@next/bundle-analyzer": "npm:^14"
     "@tailwindcss/typography": "npm:latest"