Next AG Grid Filter Wrapper

A powerful React wrapper component that combines AG Grid with Material UI filters in a beautifully integrated package. This component provides a seamless data grid experience with advanced filtering capabilities.

Features ✨

• 🏗️ AG Grid with Material UI design system
• 🔍 Built-in filter drawer with multiple filter types
• 📊 Supports nested data mapping
• 📱 Responsive and mobile-friendly
• ⚡ Optimized performance with virtualization
• 🎨 Customizable appearance and behavior

Installation 📦

npm install next-grid-filter-wrapper
# or
yarn add next-grid-filter-wrapper

Usage 🚀

"use client";
import dynamic from "next/dynamic";
import React, { useCallback, useState, useEffect } from "react";

const NextAgGridWrapper = dynamic(() => import("next-grid-filter-wrapper"), {
  ssr: false,
  loading: () => <p>Loading grid...</p>,
});

function MyComponent() {
  const [rowData, setRowData] = useState([]);

  // Define your column definitions
  const columnDefs = [
    { field: "id", headerName: "ID" },
    { field: "name", headerName: "Name" },
    // ... more columns
  ];

  // Define your filters
  const filters = [
    {
      field: "name",
      type: "text",
      label: "Name Search",
    },
    // ... more filters
  ];

  return (
    <NextAgGridWrapper
      rowData={rowData}
      columnDefs={columnDefs}
      filters={filters}
      pagination={true}
      paginationPageSize={10}
    />
  );
}

export default MyComponent;

Props 🛠️

| Prop | Type | Default | Description | | -------------------- | -------- | ------- | ------------------------------- | | rowData | Array | [] | Data to display in the grid | | columnDefs | Array | [] | AG Grid column definitions | | filters | Array | [] | Filter configurations | | keyFieldMapping | Object | {} | Mapping for nested data fields | | pagination | Boolean | false | Enable pagination | | paginationPageSize | Number | 10 | Items per page | | onFilterChange | Function | null | Callback when filters change | | onResetFilters | Function | null | Callback when filters are reset |

Filter Types 🔍

The component supports several filter types out of the box:

1. Text Filter - For string values
2. Number Filter - For numeric values with min/max
3. Select Filter - Dropdown with custom options
4. Checkbox Filter - Boolean values
5. Date Filter - Date values

Examples 🎨

Basic Usage

<NextAgGridWrapper rowData={data} columnDefs={columns} pagination={true} />

With Filters

<NextAgGridWrapper
  rowData={data}
  columnDefs={columns}
  filters={[
    {
      field: "status",
      type: "select",
      label: "Status",
      options: [
        { value: "active", label: "Active" },
        { value: "inactive", label: "Inactive" },
      ],
    },
  ]}
/>

With Nested Data

<NextAgGridWrapper
  rowData={data}
  columnDefs={columns}
  keyFieldMapping={{
    "user.id": "userId",
    "user.name": "userName",
  }}
/>

Customization 🎛️

You can customize the appearance by:

1. Overriding CSS classes
2. Providing custom filter components
3. Extending default column definitions

const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
  // ... your customizations
};

<NextAgGridWrapper
  defaultColDef={defaultColDef}
  // ... other props
/>;

Performance Tips ⚡

1. Use useMemo for column definitions
2. Implement server-side filtering for large datasets
3. Use pagination for datasets > 1000 rows
4. Virtualize rows for optimal rendering

Contributing 🤝

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch
3. Submit a pull request

License 📄

MIT © [HANNAN AHMED]

• Happy User