# mleibman/slickgrid

**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/mleibman-slickgrid).**

6,945 stars · 1,931 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/mleibman/SlickGrid
- Homepage: http://wiki.github.com/mleibman/SlickGrid
- awesome-repositories: https://awesome-repositories.com/repository/mleibman-slickgrid.md

## Description

SlickGrid is a high-performance JavaScript data grid and virtualized data table designed to render large datasets in the browser. It functions as a web spreadsheet component and tabular data manager, utilizing virtual scrolling to maintain responsiveness when displaying hundreds of thousands of entries.

The library employs a canvas-based UI system to draw grid lines and elements, reducing the total number of DOM nodes. It separates raw data from visual presentation through column-based mapping and uses a formatter pipeline to transform data values into HTML strings.

Capabilities include row grouping, filtering, and custom aggregators for data summarization. The interface supports cell editing with multi-field inputs, keyboard-driven navigation, and the ability to resize, reorder, or hide grid columns.

## Tags

### User Interface & Experience

- [Virtual Grid Renderers](https://awesome-repositories.com/f/user-interface-experience/grid-based-view-rendering/virtual-grid-renderers.md) — Renders only the visible rows and columns in a scrollable two-dimensional grid to maintain high performance.
- [Web Spreadsheet Components](https://awesome-repositories.com/f/user-interface-experience/web-spreadsheet-components.md) — Provides a high-performance web spreadsheet component with cell editing, formatting, and multi-field input capabilities for large datasets.
- [HTML Value Formatters](https://awesome-repositories.com/f/user-interface-experience/field-customization/custom-data-fields/formatter-customizations/html-value-formatters.md) — Transforms raw data values into formatted HTML strings through a pipeline of JavaScript functions before rendering.
- [Virtualized Data Tables](https://awesome-repositories.com/f/user-interface-experience/virtualized-data-tables.md) — Optimizes memory and performance by rendering only the visible portion of large datasets.
- [Canvas-Based UI Rendering](https://awesome-repositories.com/f/user-interface-experience/canvas-based-ui-rendering.md) — Renders UI components directly to a canvas to bypass DOM overhead and improve performance.
- [Grid Column Management](https://awesome-repositories.com/f/user-interface-experience/data-tables/grid-column-management.md) — Allows users to resize, reorder, hide, or autosize columns to optimize the display of data. ([source](https://cdn.jsdelivr.net/gh/mleibman/slickgrid@master/README.md))
- [Interactive Data Interfaces](https://awesome-repositories.com/f/user-interface-experience/interactive-data-interfaces.md) — Facilitates user interaction with data through customizable column resizing, reordering, and visibility toggles.

### Data & Databases

- [In-Place Cell Editing](https://awesome-repositories.com/f/data-databases/in-place-cell-editing.md) — Provides capabilities for modifying the values of individual cells directly within the tabular view. ([source](https://cdn.jsdelivr.net/gh/mleibman/slickgrid@master/README.md))
- [Hierarchical Row Grouping](https://awesome-repositories.com/f/data-databases/row-expansion/hierarchical-row-grouping.md) — Converts flat data arrays into a hierarchical tree structure to allow for collapsible group rows and aggregations.
- [Tabular Data Management Interfaces](https://awesome-repositories.com/f/data-databases/tabular-data-frameworks/tabular-data-management-interfaces.md) — Provides a user interface for managing two-dimensional data arrays through grouping, filtering, and summarization.
- [Column Mappings](https://awesome-repositories.com/f/data-databases/column-mappings.md) — Separates raw data from visual presentation by mapping specific data properties to independent column definitions.
- [Keyboard Navigation](https://awesome-repositories.com/f/data-databases/in-place-cell-editing/keyboard-navigation.md) — Provides controls for moving focus and navigating between grid cells using standard keyboard inputs. ([source](https://cdn.jsdelivr.net/gh/mleibman/slickgrid@master/README.md))
- [Tabular Data Organization](https://awesome-repositories.com/f/data-databases/tabular-data-organization.md) — Groups and filters rows while applying custom aggregators to summarize information within a structured grid. ([source](https://cdn.jsdelivr.net/gh/mleibman/slickgrid@master/README.md))

### 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) — Displays hundreds of thousands of rows using adaptive virtual scrolling to prevent browser crashes and maintain speed. ([source](https://cdn.jsdelivr.net/gh/mleibman/slickgrid@master/README.md))
- [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) — Offers an interactive interface optimized for the manipulation and examination of large-scale tabular data.

### Web Development

- [JavaScript Data Grids](https://awesome-repositories.com/f/web-development/javascript-data-grids.md) — Implements a high-performance interactive tabular component built with JavaScript for web-based data management.
- [Event Delegation](https://awesome-repositories.com/f/web-development/event-delegation.md) — Attaches listeners to parent containers to manage child cell interactions, reducing memory usage.

### Part of an Awesome List

- [Keyboard-Driven Grid Navigation](https://awesome-repositories.com/f/awesome-lists/data/tables-and-grids/keyboard-driven-grid-navigation.md) — Provides state tracking and cell interaction via keyboard input for power users and data analysts.

### Graphics & Multimedia

- [Grid Line Rendering](https://awesome-repositories.com/f/graphics-multimedia/path-and-canvas-drawing/grid-line-rendering.md) — Uses a canvas-based UI system to draw grid lines, minimizing the total number of DOM nodes for better performance.