Skip to content

Ag grid #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Ag grid #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f2db1ae
ag grid
joechoi-git Jun 11, 2024
ba8d1ea
ag grid
joechoi-git Jun 11, 2024
0cd4c4a
merged
joechoi-git Jun 11, 2024
2b37292
update
joechoi-git Jun 12, 2024
6366488
resolve conflict
joechoi-git Jun 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 3 additions & 0 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"), {
Expand Down Expand Up @@ -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">
Expand Down
124 changes: 124 additions & 0 deletions src/components/AgGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
45 changes: 44 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand Down