📊 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 required packages:

npm install ag-grid-community ag-grid-react


--- usage
"use client";
import React, { useCallback } from "react";
import AgGridWrapper from "aggrid-wrapper";

function App() {
  const rowData = [
    { id: 1, name: "John", age: 30, candidate: { id: "C001", name: "Gannan" } },
    { id: 2, name: "Jane", age: 25, candidate: { id: "C002", name: "Smith" } },
    ...Array.from({ length: 50 }, (_, i) => ({
      id: i + 3,
      name: `User ${i + 3}`,
      age: Math.floor(Math.random() * 50) + 20,
      candidate: {
        id: `C${(i + 3).toString().padStart(3, "0")}`,
        name: ["Alex", "Taylor", "Jordan", "Casey"][
          Math.floor(Math.random() * 4)
        ],
      },
    })),
  ];

  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",
  };

  const handleRowClick = useCallback((params) => {
    console.log("Row clicked:", params.data);
  }, []);

  const handleGridReady = useCallback((params) => {
    console.log("Grid ready:", params.api);
  }, []);

  const handlePaginationChanged = useCallback((params) => {
    console.log("Page changed:", params.newPage);
  }, []);

  return (
    <div style={{ width: "100%", height: "950vh", padding: "20px" }}>
      <h1>AG Grid Wrapper with Pagination</h1>
      <AgGridWrapper
        rowData={rowData}
        columnDefs={columnDefs}
        keyFieldMapping={keyFieldMapping}
        pagination={true}
        paginationPageSize={10}
        onGridReady={handleGridReady}
        onRowClicked={handleRowClick}
        onPaginationChanged={handlePaginationChanged}
        containerStyle={{ padding: "20px", backgroundColor: "#f8f9fa" }}
        gridStyle={{ height: "600px", borderRadius: "8px" }}
        headerStyle={{ fontWeight: "bold", fontSize: "14px" }}
        rowStyle={{ fontSize: "13px" }}
        themeOverrides={{
          headerBackground: "#3498db",
          rowHoverColor: "#e8f4fc",
          oddRowColor: "#f9f9f9",
          evenRowColor: "#ffffff",
        }}
      />
    </div>
  );
}

export default App;