mcpField
A
ag-grid

ag-grid

github.com/joabgonzalezDevelopment9124 installsUpdated 19w ago
Repository

About ag-grid

A skill for building React data grids with AG Grid, covering typed column definitions, editing, filtering, accessibility, and performance patterns. It suits developers implementing feature-rich tabular interfaces rather than simple tables or non-tabular visualizations.

Key features

  1. 01Configure sorting, filtering, and pagination
  2. 02Support inline editing and custom cells
  3. 03Use TypeScript column definitions
  4. 04Apply virtualization for performance
  5. 05Follow keyboard and screen-reader accessibility

Use cases

  1. 01Build an editable data grid
  2. 02Add filtering and pagination to tabular data
  3. 03Create grouped or aggregated grids
  4. 04Improve rendering for large tables

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/joabgonzalez/ai-agents-skills --skill ag-grid

After installing, type/ag-gridin Claude Code to confirm it loaded.

Details

From the project README

AG Grid

React data tables with sorting, filtering, pagination, inline editing, and Excel-like features. TypeScript typing, accessibility, and virtualization.

Examples use ag-grid-react. Column config API (ColDef, onGridReady) is framework-agnostic — adapt cell renderers to your framework's component syntax for Angular/Vue.

When to Use

  • Data tables with sorting/filtering/pagination
  • Editable grids with inline editing
  • Complex grids with grouping/aggregation
  • High-performance with virtualization
  • Excel-like functionality

Don't use for:

  • Simple tables (use HTML/MUI Table)
  • Non-tabular viz (use charts)
  • Mobile-first (consider simpler)

Critical Patterns

✅ REQUIRED: Use TypeScript Interfaces for Type Safety
// ✅ CORRECT: Typed column definitions
import { ColDef } from "ag-grid-community";

interface RowData {
  id: number;
  name: string;
}

const columnDefs: ColDef<RowData>[] = [{ field: "id" }, { field: "name" }];

// ❌ WRONG: Untyped columns
const columnDefs = [{ field: "id" }, { field: "name" }];
✅ REQUIRED: Use defaultColDef for Common Settings
// ✅ CORRECT: DRY column configuration
const defaultColDef: ColDef = {
  sortable: true,
  filter: true,
  resizable: true,
};

<AgGridReact defaultColDef={defaultColDef} />

// ❌ WRONG: Repeating config for each column
const columnDefs = [
  { field: 'id', sortable: true, filter: true, resizable: true },
  { field: 'name', sortable: true, filter: true, resizable: true },
];
✅ REQUIRED: Enable Accessibility Features
// ✅ CORRECT: Accessibility enabled
<AgGridReact
  enableAccessibility={true}
  suppressMenuHide={false}
/>

Conventions

AG Grid Specific
  • TypeScript interfaces for columns
  • Cell renderers for custom content
  • Apply accessibility best practices: keyboard navigation, screen reader support, ARIA attributes
  • Built-in features over custom
  • Handle loading/error states

Decision Tree

Custom cells?
  → Use cellRenderer/cellRendererFramework

Editable?
  → editable: true, handle onCellValueChanged

Filtering?
  → filter: true or specify type (agTextColumnFilter, agNumberColumnFilter)

Large dataset?
  → rowModelType: 'infinite' for server pagination

Grouping?
  → rowGroup: true on columns

Export?
  → exportDataAsCsv()/exportDataAsExcel()

Performance?
  → Virtualization (default), immutableData: true for React

Example

import { ColDef } from 'ag-grid-community';
import { AgGridReact } from 'ag-grid-react';

interface RowData {
  id: number;
  name: string;
  value: number;
}

const columnDefs: ColDef<RowData>[] = [
  { field: 'id', headerName: 'ID' },
  { field: 'name', headerName: 'Name', sortable: true },
  { field: 'value', headerName: 'Value', filter: 'agNumberColumnFilter' }
];

<AgGridReact<RowData>
  rowData={data}
  columnDefs={columnDefs}
  defaultColDef={{ flex: 1, minWidth: 100 }}
/>

Edge Cases

  • Empty data → appropriate messaging
  • Loading states during fetch
  • Error boundaries for failures
  • Resize events properly
  • Test keyboard navigation

Resources

Comments

Markdown supported