# autodesk/react-base-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/autodesk-react-base-table).**

1,536 stars · 170 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/Autodesk/react-base-table
- Homepage: https://autodesk.github.io/react-base-table/
- awesome-repositories: https://awesome-repositories.com/repository/autodesk-react-base-table.md

## Topics

`component` `grid` `react` `table` `virtualized`

## Description

React Base Table is a library of reusable interface components designed for building complex, responsive data grids within web applications. It provides a high-performance foundation for rendering large datasets by utilizing window-based row virtualization, which ensures the user interface remains responsive even when displaying extensive collections of data.

The library distinguishes itself through flexible layout and navigation capabilities, including support for hierarchical data structures that can be rendered as expandable tree rows. It allows for precise control over table geometry through proportional column sizing and automatic container tracking, while enabling users to pin specific columns to the viewport edges to maintain visibility during horizontal scrolling.

Developers can create highly tailored data displays by injecting custom components directly into table cells and applying styling overrides to meet specific design requirements. The system automatically adjusts to changes in the parent container size, ensuring that the table layout remains consistent across different screen dimensions and interface configurations.

## Tags

### User Interface & Experience

- [React UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/react-ui-component-libraries.md) — Provides a collection of reusable interface components for building complex, responsive data tables.
- [Component-Based Cell Rendering](https://awesome-repositories.com/f/user-interface-experience/view-customizations/component-based-cell-rendering.md) — Allows developers to inject custom components directly into table cells for highly tailored data displays.
- [Virtualization Scroll Calculators](https://awesome-repositories.com/f/user-interface-experience/viewport-based-virtualization/window-based-virtualizers/virtualization-scroll-calculators.md) — Renders only the visible subset of data rows by calculating scroll offsets to maintain high performance.
- [Virtualized Data Grids](https://awesome-repositories.com/f/user-interface-experience/virtualized-data-grids.md) — Offers a flexible virtualized data grid library with support for column pinning and hierarchical tree structures.
- [Virtualized Data Tables](https://awesome-repositories.com/f/user-interface-experience/virtualized-data-tables.md) — Optimizes performance by rendering only the visible portion of large datasets to maintain a responsive user interface. ([source](https://github.com/autodesk/react-base-table#readme))
- [Table Column Sizing](https://awesome-repositories.com/f/user-interface-experience/column-layout-configurations/predefined-column-layouts/table-column-sizing.md) — Distributes column widths proportionally across the container to ensure content fills available space. ([source](https://autodesk.github.io/react-base-table/examples/flex-column))
- [Customizable UI Components](https://awesome-repositories.com/f/user-interface-experience/customizable-ui-components.md) — Provides high levels of visual and functional customization for data displays through component injection and style overrides.
- [Column Pinning](https://awesome-repositories.com/f/user-interface-experience/data-tables/column-pinning.md) — Fixes specific columns in place during horizontal scrolling to ensure critical data remains visible. ([source](https://autodesk.github.io/react-base-table/playground))
- [Dynamic Component Layouts](https://awesome-repositories.com/f/user-interface-experience/dynamic-component-layouts.md) — Adjusts child element dimensions automatically to match parent containers for responsive layouts. ([source](https://autodesk.github.io/react-base-table/api/autoresizer))
- [Flexible Layout Systems](https://awesome-repositories.com/f/user-interface-experience/flexible-layout-systems.md) — Allows adjusting column widths using fixed or flexible sizing to ensure the table fits its parent element. ([source](https://github.com/autodesk/react-base-table#readme))
- [Layout Observation](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/element-resizers/layout-observation.md) — Monitors parent container dimensions to trigger automatic layout recalculations using observer patterns.
- [Responsive Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts.md) — Builds flexible table interfaces that automatically adjust to fit various screen sizes and layouts.
- [Responsive Table Containers](https://awesome-repositories.com/f/user-interface-experience/table-components/responsive-table-containers.md) — Updates table dimensions automatically in response to parent container size changes. ([source](https://autodesk.github.io/react-base-table/examples/auto-resize))
- [Proportional Sizing Logic](https://awesome-repositories.com/f/user-interface-experience/widget-arrangement-systems/row-and-column-layouts/box-based-layouts/proportional-sizing-logic.md) — Determines column widths and table dimensions by applying proportional sizing logic.

### Software Engineering & Architecture

- [Large Dataset Explorers](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations/large-dataset-explorers.md) — Optimizes the display of thousands of rows using virtualization to keep the interface responsive.

### Data & Databases

- [Tree-Based Table Renderers](https://awesome-repositories.com/f/data-databases/dataframe-integration/interactive-table-rendering/tree-based-table-renderers.md) — Organizes and renders nested data structures as expandable tree rows to allow exploration of parent-child relationships. ([source](https://autodesk.github.io/react-base-table/playground))

### Development Tools & Productivity

- [Hierarchical Data Explorers](https://awesome-repositories.com/f/development-tools-productivity/hierarchical-data-explorers.md) — Organizes and renders complex nested data structures as expandable tree rows for hierarchical navigation.

### Scientific & Mathematical Computing

- [Hierarchical Tree Traversers](https://awesome-repositories.com/f/scientific-mathematical-computing/recursive-tree-traversal-algorithms/hierarchical-tree-traversers.md) — Processes nested data structures into a flat list of renderable rows to support expandable tree rows.