# react-component/table

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/react-component-table).**

1,372 stars · 621 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/react-component/table
- Homepage: https://table-react-component.vercel.app
- awesome-repositories: https://awesome-repositories.com/repository/react-component-table.md

## Description

This library is a React component designed for rendering high-performance data grids. It provides a structured framework for displaying large datasets by utilizing window-based row virtualization, which ensures that only the visible portion of the data is rendered to the document object model.

The component distinguishes itself through advanced layout and navigation capabilities, including native support for sticky headers and columns that remain anchored during scrolling. Developers can exercise imperative control over the table viewport to navigate to specific indices or pixel offsets, while managing complex grid states such as column visibility, sorting, and row expansion through a centralized configuration.

The library supports a wide range of interactive features, including custom cell rendering, column pinning, and the ability to append summary rows for aggregate data. It handles dense information sets by offering flexible column alignment, width control, and text truncation, allowing for the creation of interactive tables that respond to user events like clicks and hovers.

## Tags

### User Interface & Experience

- [High Performance Table Rendering](https://awesome-repositories.com/f/user-interface-experience/high-performance-table-rendering.md) — Implements high-performance virtualized rendering to display large tabular datasets smoothly within the browser. ([source](https://github.com/react-component/table#readme))
- [Data Grid Components](https://awesome-repositories.com/f/user-interface-experience/text-rendering/dom-based-rendering/grid-layout-rendering/data-grid-components.md) — The library presents structured information in a grid format with support for custom column definitions, cell rendering, and flexible layout configurations to suit various data types. ([source](https://github.com/react-component/table/blob/master/CHANGELOG.md))
- [Window-Based Virtualizers](https://awesome-repositories.com/f/user-interface-experience/viewport-based-virtualization/window-based-virtualizers.md) — Implements window-based row virtualization to render only visible data, ensuring high performance with large datasets.
- [Data Grid Customization](https://awesome-repositories.com/f/user-interface-experience/data-grid-customization.md) — Provides a comprehensive framework for building complex, interactive data grids in React applications.
- [Data Table State Managers](https://awesome-repositories.com/f/user-interface-experience/data-table-state-managers.md) — Manages complex grid states like sorting, visibility, and expansion through a centralized configuration object.
- [Column Pinning](https://awesome-repositories.com/f/user-interface-experience/data-tables/column-pinning.md) — Enables locking specific columns to the viewport edges to maintain context while scrolling. ([source](https://github.com/react-component/table/blob/master/README.md))
- [Row Detail Expansion](https://awesome-repositories.com/f/user-interface-experience/expanding-content-cells/row-detail-expansion.md) — Enables row expansion to reveal nested information for specific records. ([source](https://github.com/react-component/table/blob/master/CHANGELOG.md))
- [Table Scrolling Controls](https://awesome-repositories.com/f/user-interface-experience/horizontal-scrolling-utilities/editor-horizontal-scrolling/content-scrolling-controls/table-scrolling-controls.md) — Offers programmatic commands to navigate the table view to specific rows or offsets. ([source](https://github.com/react-component/table/blob/master/README.md))
- [Interactive Table Components](https://awesome-repositories.com/f/user-interface-experience/interactive-table-components.md) — Facilitates dynamic user interactions like row expansion, click events, and programmatic navigation.
- [Layout Positioning Utilities](https://awesome-repositories.com/f/user-interface-experience/layout-positioning-utilities.md) — Uses native browser sticky positioning to anchor headers and columns during scroll interactions.
- [Complex Table Builders](https://awesome-repositories.com/f/user-interface-experience/master-detail-layouts/nested-data-tables/complex-table-builders.md) — Supports complex layouts with sticky headers, fixed columns, and nested row details for dense information.
- [Imperative Scroll Controllers](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-to-index-mappers/imperative-scroll-controllers.md) — Provides imperative APIs to programmatically scroll the viewport to specific indices or pixel offsets.
- [Summary Rows](https://awesome-repositories.com/f/user-interface-experience/summary-rows.md) — Provides specialized rows for displaying aggregate totals or summary information that can remain fixed or scroll with the table content. ([source](https://github.com/react-component/table/blob/master/README.md))
- [Component-Based Cell Rendering](https://awesome-repositories.com/f/user-interface-experience/view-customizations/component-based-cell-rendering.md) — Allows developers to inject custom React components into grid cells for flexible and complex data visualization.

### Part of an Awesome List

- [Data Grid Components](https://awesome-repositories.com/f/awesome-lists/devtools/react-components/data-grid-components.md) — Ships a high-performance React component for rendering complex, virtualized data grids.

### Software Engineering & Architecture

- [Large Dataset Optimizations](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations.md) — Optimizes performance for large datasets by rendering only the visible portion of the data.
- [Virtualized Rendering](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations/virtualized-rendering.md) — Uses virtualized rendering to maintain smooth scrolling performance when handling large data sets.