📊 AgGridWrapper - A Customizable AG Grid React Component

AgGridWrapper is a powerful, reusable, and highly customizable wrapper around AG Grid that simplifies the integration of tabular data into your React (and Next.js) applications.

It enhances the base AG Grid functionality by introducing:

• Easy nested field mapping
• Seamless pagination
• Dynamic styling and theming
• Cleaner API for developers
• Built-in sensible defaults

🚀 Features

• ✅ Nested Data Mapping - Map deeply nested fields to flat columns easily using keyFieldMapping.
• ✅ Built-in Pagination - Supports pagination out of the box with auto or fixed page sizes.
• ✅ Theming Support - Customize headers, rows, hover effects, and alternating row colors.
• ✅ Composable Props - Extend grid features via gridOptions, defaultColDef, and event hooks.
• ✅ Responsive and Custom Styles - Pass style or className props to match your UI.
• ✅ TypeScript Friendly - Written with strong typings for safety (if using TypeScript).

📦 Installation

Install ag-grid packages and import the wrapper in your project.

npm install ag-grid-community ag-grid-react
Then create and use the AgGridWrapper component.

🧠 Usage Example
jsx
Copy
Edit
'use client';
import React from 'react';
import AgGridWrapper from './AgGridWrapper'; // Adjust path accordingly

const App = () => {
  const rowData = [
    { id: 1, name: 'John', age: 30, candidate: { id: 'C001', name: 'Gannan' } },
    // Add more entries...
  ];

  const columnDefs = [
    { field: 'userId', headerName: 'ID' },
    { field: 'userName', headerName: 'Name' },
    { field: 'userAge', headerName: 'Age' },
    { field: 'candidateId', headerName: 'Candidate ID' },
    { field: 'candidateName', headerName: 'Candidate Name' }
  ];

  const keyFieldMapping = {
    id: 'userId',
    name: 'userName',
    age: 'userAge',
    'candidate.id': 'candidateId',
    'candidate.name': 'candidateName'
  };

  return (
    <AgGridWrapper
      rowData={rowData}
      columnDefs={columnDefs}
      keyFieldMapping={key







You said:
everyting provide in readme


ChatGPT said:
Absolutely! Here's a full-fledged, well-organized README.md that covers everything — introduction, features, installation, usage, props, customization options, and contribution guide.

markdown
Copy
Edit
# 📊 AgGridWrapper

A powerful, reusable, and customizable React component built on top of [AG Grid](https://www.ag-grid.com/). `AgGridWrapper` simplifies working with tabular data, especially when dealing with nested objects, pagination, and consistent UI styling — making it ideal for scalable enterprise-level applications.

---

## ✨ Features

- ✅ **Nested Data Mapping** – Easily flatten nested fields using `keyFieldMapping`
- ✅ **Built-in Pagination** – Optional pagination with auto or fixed page sizes
- ✅ **Flexible Theming** – Customize header, row hover color, alternating rows, and more
- ✅ **Reusable API** – Intuitive props for `rowData`, `columnDefs`, and events
- ✅ **Custom Styling** – Control layout and appearance via `style`/`className` props
- ✅ **Event Hooks** – Listen for grid events like row clicks, pagination changes, and more
- ✅ **Drop-in Usage** – Works great in React or Next.js (`'use client'` compatible)

---

## 📦 Installation

Install `ag-grid` dependencies:

```bash
npm install ag-grid-community ag-grid-react
Clone or copy the AgGridWrapper component into your project.

🚀 Basic Usage
tsx
Copy
Edit
'use client';

import React from 'react';
import AgGridWrapper from './AgGridWrapper'; // Adjust import path

const App = () => {
  const rowData = [
    {
      id: 1,
      name: 'John',
      age: 30,
      candidate: { id: 'C001', name: 'Gannan' }
    },
    // more rows...
  ];

  const columnDefs = [
    { field: 'userId', headerName: 'ID' },
    { field: 'userName', headerName: 'Name' },
    { field: 'userAge', headerName: 'Age' },
    { field: 'candidateId', headerName: 'Candidate ID' },
    { field: 'candidateName', headerName: 'Candidate Name' }
  ];

  const keyFieldMapping = {
    id: 'userId',
    name: 'userName',
    age: 'userAge',
    'candidate.id': 'candidateId',
    'candidate.name': 'candidateName'
  };

  return (
    <AgGridWrapper
      rowData={rowData}
      columnDefs={columnDefs}
      keyFieldMapping={keyFieldMapping}
      pagination={true}
      paginationPageSize={10}
      onRowClicked={(params) => console.log(params.data)}
      themeOverrides={{
        headerBackground: '#3498db',
        rowHoverColor: '#e8f4fc',
        oddRowColor: '#f9f9f9',
        evenRowColor: '#ffffff'
      }}
    />
  );
};

export default App;
🔧 Props API

Prop	Type	Description
rowData	array	Your table data (flat or nested)
columnDefs	array	Column definitions for AG Grid
keyFieldMapping	object	Map nested fields to flat keys (e.g., { 'user.id': 'userId' })
defaultColDef	object	Default configuration for all columns
gridOptions	object	AG Grid's native gridOptions
pagination	boolean	Enable/disable pagination
paginationPageSize	number	Page size for pagination
paginationAutoPageSize	boolean	Auto-size pagination
className	string	CSS class for grid wrapper
containerStyle	object	Inline style for the outer container
gridStyle	object	Inline style for the grid itself
headerStyle	object	Inline style for grid headers
rowStyle	object	Inline style for grid rows
cellStyle	object	Inline style for grid cells
paginationStyle	object	Inline style for pagination footer
themeOverrides	object	Theme overrides for grid styling
onGridReady	function	Called when the grid is ready
onRowClicked	function	Called when a row is clicked
onCellClicked	function	Called when a cell is clicked
onSelectionChanged	function	Called when row selection changes
onPaginationChanged	function	Called when pagination changes
🎨 Theming Options
You can override default styles using the themeOverrides prop.

js
Copy
Edit
themeOverrides={{
  headerBackground: '#3498db',
  rowHoverColor: '#f4f8fb',
  oddRowColor: '#f9f9f9',
  evenRowColor: '#ffffff'
}}
Additionally, you can pass rowStyle, headerStyle, and cellStyle for custom inline styles.

🧠 Benefits
Speeds up development by reducing AG Grid boilerplate

Ensures consistent table styling across your app

Great for enterprise dashboards and reporting tools

Reusable and easily extendable

Works with large datasets and nested JSON structures

📁 File Structure Suggestion
css
Copy
Edit
src/
├── components/
│   └── AgGridWrapper.jsx
├── pages/
│   └── index.jsx
🛠 Advanced Usage
Want to customize columns further? Use defaultColDef or add specific properties to columnDefs:

js
Copy
Edit
defaultColDef={{
  sortable: true,
  filter: true,
  resizable: true
}}

columnDefs={[
  {
    field: 'userName',
    headerName: 'Name',
    cellRenderer: (params) => <strong>{params.value}</strong>
  }
]}
🤝 Contributing
Feel free to fork this component and improve it! Suggestions and pull requests are welcome.

Clone the repo

Add new features or fix bugs

Test your changes

Open a pull request 🚀

📄 License
MIT License.

❤️ Credits
Built on top of AG Grid

Inspired by the need to simplify complex grid configurations in React apps

📬 Contact
Have questions or ideas? Feel free to reach out via GitHub Issues or send a PR!

yaml
Copy
Edit

---

Let me know if you want a separate `example` directory setup or want to publish this to npm — I can help generate a `package.json`, build setup, etc.