# nhn/tui.grid

**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/nhn-tui-grid).**

_How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._

2,565 stars · 409 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/nhn/tui.grid
- Homepage: http://ui.toast.com/tui-grid/
- awesome-repositories: https://awesome-repositories.com/repository/nhn-tui-grid.md

## Topics

`datagrid` `datatable` `excel` `grid` `javascript` `preact` `reactivity` `spreadsheet` `tabular-data` `toast-ui` `treegrid` `typescript`

## Description

Tui Grid is a JavaScript data grid component designed for rendering, editing, and organizing structured tabular information and hierarchical tree views within web applications. It provides inline data editing, validation rules, spreadsheet-style keyboard navigation, and virtualized rendering to handle extensive datasets efficiently.

The library distinguishes itself through structural capabilities including command-based keyboard shortcuts for range selection and clipboard synchronization, a declarative cell renderer architecture, and virtual column pinning. It supports asynchronous remote data communication with server-side pagination, summary statistics calculations, cascading row selections, and dynamic column state linking.

Additional functionality covers layout management for column resizing, reordering, and merging, along with custom visual themes and framework adapter components for integration into various frontend component trees.

## Tags

### User Interface & Experience

- [DOM Virtualization](https://awesome-repositories.com/f/user-interface-experience/dom-virtualization.md) — Maintains high performance with massive datasets by reusing and repositioning a small window of DOM elements during scrolling.
- [Keyboard Navigation](https://awesome-repositories.com/f/user-interface-experience/keyboard-navigation.md) — Enables spreadsheet-style keyboard navigation, range selection, and clipboard operations.
- [Tabular Data Components](https://awesome-repositories.com/f/user-interface-experience/tabular-data-components.md) — Displays large amounts of structured data in rows and columns with high-performance virtual rendering. ([source](https://github.com/nhn/tui.grid/blob/master/README.md))
- [Tabular Editors](https://awesome-repositories.com/f/user-interface-experience/tabular-data-components/tabular-editors.md) — Provides inline data editing with custom cell renderers and validation rules for tabular records.
- [Component-Based Cell Rendering](https://awesome-repositories.com/f/user-interface-experience/view-customizations/component-based-cell-rendering.md) — Replaces standard inputs with custom UI components and lifecycle hooks mounted dynamically inside individual table cells.
- [Hierarchical Data Displays](https://awesome-repositories.com/f/user-interface-experience/data-display-components/hierarchical-data-displays.md) — Organizes and renders complex records in expandable parent-child tree layouts with cascading selections.
- [Data Grid Configurations](https://awesome-repositories.com/f/user-interface-experience/data-grid-configurations.md) — Passes configuration options and localized settings as component properties to customize the appearance and interactivity of tables. ([source](https://github.com/nhn/tui.grid/tree/master/packages/toast-ui.vue-grid))
- [Hierarchical Grids](https://awesome-repositories.com/f/user-interface-experience/data-grids/hierarchical-grids.md) — Organizes and displays nested parent-child relationships and grouped rows in structured tables.
- [Column Pinning](https://awesome-repositories.com/f/user-interface-experience/data-tables/column-pinning.md) — Splits the table layout into independent scrollable and fixed viewports to keep key columns visible during horizontal scrolling.
- [Grid Column Management](https://awesome-repositories.com/f/user-interface-experience/data-tables/grid-column-management.md) — Allows users to resize, reorder, show, hide, and merge columns dynamically to customize the layout. ([source](https://github.com/nhn/tui.grid#readme))
- [Date and Time Pickers](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers.md) — Provides interactive date and time selection controls directly within table cells. ([source](https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/date-picker.md))
- [Row Selection Interfaces](https://awesome-repositories.com/f/user-interface-experience/floating-action-buttons/row-action-triggers/clickable-rows/row-selection-interfaces.md) — Synchronizes checkbox selection states between parent and child rows automatically. ([source](https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/tree.md))
- [Cell Validation Rules](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/form-validation/input-validation-rules/cell-validation-rules.md) — Enforces data integrity rules and validation constraints on cell values during editing.
- [Form Input Controls](https://awesome-repositories.com/f/user-interface-experience/form-input-controls.md) — Modifies cell values directly using standard form inputs like text fields and checkboxes. ([source](https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/custom-editor.md))
- [Hierarchical Tree Views](https://awesome-repositories.com/f/user-interface-experience/hierarchical-tree-views.md) — Represents structured records in a parent-child tree layout to visualize nested relationships. ([source](https://github.com/nhn/tui.grid#readme))
- [Server-Side Paging](https://awesome-repositories.com/f/user-interface-experience/pagination-navigation/server-side-paging.md) — Manages dataset chunking and page navigation parameters automatically when fetching records from a server. ([source](https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/data-source.md))
- [Custom Cell Editors](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management/cell-lifecycles/cell-content-injection/custom-cell-editors.md) — Replaces standard cell presentation with custom elements and lifecycle hooks inside table cells. ([source](https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/custom-renderer.md))

### Web Development

- [JavaScript Data Grids](https://awesome-repositories.com/f/web-development/javascript-data-grids.md) — Renders, edits, and sorts tabular data in web applications with virtual scrolling and remote data binding.

### Part of an Awesome List

- [Keyboard and Navigation](https://awesome-repositories.com/f/awesome-lists/devtools/keyboard-and-navigation.md) — Enables spreadsheet-style keyboard navigation, range selection, and clipboard copy-paste operations. ([source](http://ui.toast.com/tui-grid/))
- [Data Tables and Grids](https://awesome-repositories.com/f/awesome-lists/devtools/data-tables-and-grids.md) — Organizes table rows based on column values and relational dependencies to locate information quickly. ([source](https://github.com/nhn/tui.grid#readme))
- [Framework Component Wrappers](https://awesome-repositories.com/f/awesome-lists/devtools/framework-component-wrappers.md) — Adapts native interface components into framework-specific lifecycle wrappers to enable seamless embedding within popular component trees.

### Data & Databases

- [Data-Driven State Management](https://awesome-repositories.com/f/data-databases/data-driven-state-management.md) — Centralises row data, selection states, and column definitions in a dedicated store that drives all user interface updates.
- [Data Persistence](https://awesome-repositories.com/f/data-databases/data-persistence.md) — Sends created, updated, or deleted row changes back to remote server endpoints using dedicated CRUD request methods. ([source](https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/data-source.md))
- [In-Place Cell Editing](https://awesome-repositories.com/f/data-databases/in-place-cell-editing.md) — Modifies cell contents through built-in input types, custom editors, and built-in validation rules to maintain data integrity. ([source](http://ui.toast.com/tui-grid/))
- [Inline Data Editing](https://awesome-repositories.com/f/data-databases/inline-data-editing.md) — Enables direct modification of records and cell contents inline within a tabular interface. ([source](https://github.com/nhn/tui.grid/blob/master/README.md))
- [Remote Data Fetching](https://awesome-repositories.com/f/data-databases/remote-data-fetching.md) — Loads tabular data asynchronously from remote server endpoints by configuring read requests with custom parameters and initial loading behavior. ([source](https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/data-source.md))
- [Keyboard Navigation](https://awesome-repositories.com/f/data-databases/in-place-cell-editing/keyboard-navigation.md) — Intercepts keypress combinations to execute directional focus movement, range selection, and clipboard operations like a spreadsheet.
- [Pagination](https://awesome-repositories.com/f/data-databases/pagination.md) — Splits extensive collections of records across multiple pages to improve load times. ([source](https://github.com/nhn/tui.grid#readme))
- [Configurations](https://awesome-repositories.com/f/data-databases/remote-data-source-connectors/configurations.md) — Connects to remote endpoints using data source configuration objects to fetch and display external information dynamically. ([source](https://github.com/nhn/tui.grid/tree/master/packages/toast-ui.react-grid))
- [Tree Structures](https://awesome-repositories.com/f/data-databases/row-expansion/tree-structures.md) — Executes programmatic methods to expand, collapse, and manage hierarchical row relationships. ([source](https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/tree.md))
- [Programmatic Table and Index Managements](https://awesome-repositories.com/f/data-databases/table-indexing-systems/programmatic-table-and-index-managements.md) — Invokes underlying table operations and retrieves root DOM elements through reference handles attached to the component instance. ([source](https://github.com/nhn/tui.grid/tree/master/packages/toast-ui.vue-grid))
- [Clipboard Pasting](https://awesome-repositories.com/f/data-databases/tabular-data-managers/clipboard-pasting.md) — Enables seamless copying and pasting of content between table cells and external spreadsheet applications. ([source](https://github.com/nhn/tui.grid#readme))

### Software Engineering & Architecture

- [Virtualized Rendering](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations/virtualized-rendering.md) — Renders extensive datasets smoothly using virtualized rendering techniques to maintain performance and prevent UI lag. ([source](https://github.com/nhn/tui.grid#readme))
- [Event Bus Systems](https://awesome-repositories.com/f/software-engineering-architecture/event-bus-systems.md) — Coordinates decoupled internal modules by broadcasting user interactions and data changes across a centralized observer pipeline.

### Scientific & Mathematical Computing

- [Column Summary Calculators](https://awesome-repositories.com/f/scientific-mathematical-computing/numerical-mathematical-foundations/statistics-probability/statistical-analysis-libraries/statistical-metric-calculators/column-summary-calculators.md) — Computes totals, averages, and extreme values across rows and columns that update automatically when underlying data changes. ([source](http://ui.toast.com/tui-grid/))

### System Administration & Monitoring

- [Remote Data Synchronization](https://awesome-repositories.com/f/system-administration-monitoring/remote-data-synchronization.md) — Fetches, paginates, and synchronizes tabular datasets asynchronously against remote server endpoints.