AG Grid
This commit is contained in:
parent
94582a522b
commit
330016c516
1992
package-lock.json
generated
1992
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -10,7 +10,10 @@
|
|||||||
"format": "npx prettier src --write"
|
"format": "npx prettier src --write"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"ag-grid-community": "^33.1.1",
|
||||||
|
"ag-grid-react": "^33.1.1",
|
||||||
"next": "15.2",
|
"next": "15.2",
|
||||||
|
"next-themes": "^0.4.6",
|
||||||
"react": "^19.0",
|
"react": "^19.0",
|
||||||
"react-dom": "^19.0"
|
"react-dom": "^19.0"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -14,6 +14,7 @@ html,
|
|||||||
body {
|
body {
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import type { Metadata } from 'next'
|
import type { Metadata } from 'next'
|
||||||
import './globals.css'
|
import './globals.css'
|
||||||
|
import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community'
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: 'Create Next App',
|
title: 'Create Next App',
|
||||||
@ -11,6 +12,7 @@ export default function RootLayout({
|
|||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
}>) {
|
}>) {
|
||||||
|
ModuleRegistry.registerModules([AllCommunityModule])
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|||||||
@ -1,10 +1,29 @@
|
|||||||
import Image from 'next/image'
|
'use client'
|
||||||
|
import { AgGridReact } from 'ag-grid-react'
|
||||||
import styles from './page.module.css'
|
import styles from './page.module.css'
|
||||||
|
import { AllCommunityModule, themeQuartz } from 'ag-grid-community'
|
||||||
|
import { useMemo } from 'react'
|
||||||
|
import { colorSchemeDark } from 'ag-grid-community'
|
||||||
|
import { useTheme } from 'next-themes'
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
|
const { theme } = useTheme()
|
||||||
|
const agTheme = useMemo(() => (theme === 'dark' ? themeQuartz.withPart(colorSchemeDark) : themeQuartz), [theme])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page} style={{ height: '500px' }}>
|
||||||
<p>Hiii :3</p>
|
<AgGridReact
|
||||||
|
theme={agTheme}
|
||||||
|
modules={[AllCommunityModule]}
|
||||||
|
rowData={[
|
||||||
|
{ id: 1, col1: 'Hello', col2: 'AG Grid' },
|
||||||
|
{ id: 2, col1: 'Dark Mode', col2: 'Support' },
|
||||||
|
]}
|
||||||
|
columnDefs={[
|
||||||
|
{ field: 'col1', headerName: 'Column 1', filter: 'agTextColumnFilter' },
|
||||||
|
{ field: 'col2', headerName: 'Column 2' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user