skills.rest
petyosi
petyosiCOMMUNITY
Explore all skills by this author โ†’
๐•@petyosiGitHub

data-table

Builds virtualized React data tables with grouping, sticky columns, and resizing.

6.4k|353|Updated May 3, 2019
Search Tags:#react#engineering#virtualization#data-table#datatable
One-click install
npx skills add https://github.com/petyosi/react-virtuoso --skill data-table-petyosi
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: data-table
Source: https://github.com/petyosi/react-virtuoso/tree/main/plugins/virtuoso-skills/skills/data-table
Command: npx skills add https://github.com/petyosi/react-virtuoso --skill data-table-petyosi

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes references (resource) components.

What problem does it solve?

Build scalable, high-performance data tables in React that render large datasets with features like grouping, sticky columns, resizing, visibility, and persistence, without manual virtualization boilerplate.

Core Features & Use Cases

  • Local and remote data support through declarative models (localModel / remoteModel) and column-based rendering.
  • Grouped rows, sticky columns, resizing, reordering, and visibility controls for complex dashboards.
  • State persistence and external table control via engineRefs and action streams to drive toolbars and cross-component UI.

Quick Start

Install and wire a DataTable by creating a localModel or remoteModel, declare DataTableColumn definitions, and render the table with an engineRef to drive external actions.

Frequently Asked Questions about data-table

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a virtualized React data table that handles large datasets?โ–ผ

Build a virtualized React data table by wiring declarative localModel or remoteModel data sources with DataTableColumn definitions, using an engineRef to drive rendering and external actions without manual virtualization boilerplate.

Can I use a remote data source with grouping and sticky columns in a React data table?โ–ผ

Yes, remote data sources support grouping, sticky columns, resizing, reordering, and visibility controls by configuring a remoteModel and declarative DataTableColumn definitions within your React table component.

What is the best way to persist data table state across dashboard components in React?โ–ผ

Persist data table state across React dashboards by using an engineRef and action streams to drive external toolbars and cross-component UI, maintaining synchronization without losing table configuration.

Does this React data table approach require manual virtualization setup for local data?โ–ผ

No, local data rendering uses a localModel to handle virtualization internally, eliminating manual virtualization boilerplate while maintaining high performance for large datasets.

How do I control column visibility and resizing externally in a virtualized React data table?โ–ผ

Control column visibility and resizing externally by referencing the engineRef API, which exposes action streams to manage DataTableColumn properties and drive cross-component UI interactions declaratively.

When should I choose a localModel versus a remoteModel for my React data table?โ–ผ

Choose a localModel for client-side datasets and a remoteModel for server-fetched data, both supporting grouping, sticky columns, and persistence features within the same declarative DataTableColumn structure.

Related Skills

Explore More Software Engineering Skillsโ†’
tinkermonkeytinkermonkey

LAYER_07_DATA_MODEL

Define and validate object data structures using JSON Schema Draft 7.

Community
Advanced
kimjuyoung1127kimjuyoung1127

labeling-feature-add

Integrate modular annotation features into the labeling workspace dashboard workflow.

Community
Advanced
danghungtb26danghungtb26
3

tanstack-table-guide

Implement TanStack Table data tables with sorting, filtering, pagination, and row selection in React.

Community
Intermediate
CJHarmathCJHarmath

react-performance

Reduce unnecessary React re-renders with memoization and list virtualization.

Community
Intermediate