materialreacttable-mastery_skill

This skill helps you build production-grade data tables with MRT V3 and MUI, covering server-side ops, CRUD, virtualization, and advanced filtering.

Python

9

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill georgekhananaev/claude-skills-vault --skill materialreacttable-mastery

SKILL.md10.2 KB

Overview

This skill is a Material React Table V3 expert guide and generator for building production-grade data tables with MUI styling. It focuses on server-side operations, CRUD editing, virtualization, complex filtering, and migration guidance between MRT versions. Use it to accelerate correct defaults and patterns for high-performance, accessible tables.

How this skill works

The skill inspects table requirements (dataset size, editing mode, server constraints) and emits configured MRT V3 code snippets, typed column definitions, and integration examples for React Query and MUI. It provides presets for server-side pagination/filtering/sorting, virtualization for large datasets, and common toolbar/row-action customizations. It also surfaces migration notes and anti-patterns to prevent performance or compatibility issues.

When to use it

Building MUI-styled tables with rich interactions and accessibility
Implementing server-side pagination, filtering, or sorting for >100 rows
Adding CRUD editing modes: inline, modal, cell, or row
Handling very large datasets (10k+ rows) with virtualization
Migrating code from MRT V1/V2 to V3 or resolving MUI v7 quirks

Best practices

Wrap column definitions in useMemo to avoid re-renders
Use server-side mode (manualPagination/filtering/sorting) for >100 rows
Enable row virtualization and fixed row height for 10k+ rows
Map filterVariant per column type (select, range, date, autocomplete)
Connect isLoading and error states to showAlertBanner and UX feedback
Keep localization and z-index configuration when embedding tables in modals/drawers

Example use cases

Users admin table with server-side search, sorting, and bulk actions
Financial grid with range-slider filters, aggregation, and export to CSV/Excel
Editable product list using row edit mode and optimistic updates via React Query
Activity log viewer with virtualization and date-range faceted filters
Migration script to update column props and keyboard navigation defaults from V2→V3

FAQ

Client-side is fine for under ~100 rows. Use server-side pagination/filtering/sorting for 100–10,000 rows. For >10,000 rows combine server-side operations with row virtualization.

How do I prevent slow renders on large tables?

Wrap columns in useMemo, enable enableRowVirtualization with fixed row height, limit DOM actions, and push heavy work to the server (pagination, aggregation). Use overscan sparingly.