# syncfusion-react-grid

Guides AI coding agents through configuring Syncfusion React Grid tables with sorting, filtering, editing, and virtual scrolling.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 823 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-grid/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-grid

## What it does

This skill guides assistants on how to build data grids using Syncfusion React components. It covers column setup, grouping, summary aggregates, and exporting records to Excel or PDF. It also details row editing across inline, batch, and dialog modes.

Component features rely on explicit module injection. If a service like `Sort` or `Page` is not passed to `<Inject services={[...]} />`, programmatic method calls fail silently without raising any errors. Component options belong in JSX props, while methods must be invoked through a `ref`.

The grid handles presentation and layout on the client. It does not fetch remote data on its own, leaving external network requests to a separate DataManager module.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-grid -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-grid/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-grid/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-grid -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-grid/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-grid -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-grid/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-grid
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-grid/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-grid -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-grid
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-grid/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-grid -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-grid/SKILL.md

## When to use it
- set up virtual or infinite scrolling for large data tables
- configure multi-column filtering via filter bars or Excel-style menus
- implement batch, inline, or dialog record editing
- export grid rows and headers into Excel and PDF formats

## Example prompts
- Build a Syncfusion React data table with pagination and column sorting
- Configure Excel-like filtering with footer aggregates for numeric values
- Set up inline row editing with validation using the Edit module

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 57 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md