From f2db1aeaec22ef093f780472d03ce63017d1ddd6 Mon Sep 17 00:00:00 2001 From: Joe Choi Date: Tue, 11 Jun 2024 10:16:04 -0400 Subject: [PATCH 1/2] ag grid --- package.json | 4 ++ src/app/page.tsx | 3 + src/components/Grid.tsx | 124 ++++++++++++++++++++++++++++++++++++++++ yarn.lock | 45 ++++++++++++++- 4 files changed, 175 insertions(+), 1 deletion(-) create mode 100644 src/components/Grid.tsx diff --git a/package.json b/package.json index 6f9df76..c52496e 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,10 @@ "test": "jest" }, "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", "next": "^14", "react": "^18", "react-dom": "^18" diff --git a/src/app/page.tsx b/src/app/page.tsx index a972ba5..cf529d4 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -6,6 +6,7 @@ import { ThemeContext } from "../context/ThemeContext"; import Buttons from "../components/Buttons"; import Progress from "../components/Progress"; import ThemeSwitcher from "../components/ThemeSwitcher"; +import Grid from "../components/Grid"; export default function Home() { const { theme } = React.useContext(ThemeContext); @@ -31,6 +32,8 @@ export default function Home() { + +
diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx new file mode 100644 index 0000000..4b65a61 --- /dev/null +++ b/src/components/Grid.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 "@ag-grid-community/styles/ag-grid.css"; +import "@ag-grid-community/styles/ag-theme-quartz.css"; +import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model"; + +ModuleRegistry.registerModules([ClientSideRowModelModule]); + +interface Props { + [rest: string]: any; +} + +export default function Grid({ ...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([ + { + 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 ( +
+ +
+ ); +} diff --git a/yarn.lock b/yarn.lock index fdf10b6..e8a8d2d 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" @@ -6918,7 +6957,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 @@ -7011,6 +7050,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" "@next/bundle-analyzer": "npm:^14" "@tailwindcss/typography": "npm:latest" "@testing-library/jest-dom": "npm:^6" From ba8d1ea03a3dcf0563ac415d7aed20cda244b99a Mon Sep 17 00:00:00 2001 From: Joe Choi Date: Tue, 11 Jun 2024 10:22:19 -0400 Subject: [PATCH 2/2] ag grid --- src/components/Grid.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx index 4b65a61..7ef4974 100644 --- a/src/components/Grid.tsx +++ b/src/components/Grid.tsx @@ -1,9 +1,9 @@ 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"; -import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model"; ModuleRegistry.registerModules([ClientSideRowModelModule]); @@ -108,7 +108,7 @@ export default function Grid({ ...rest }: Props): React.JSX.Element { }, []); return ( -
+