# grid-js/gridjs

**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/grid-js-gridjs).**

4,692 stars · 257 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/grid-js/gridjs
- Homepage: https://gridjs.io
- awesome-repositories: https://awesome-repositories.com/repository/grid-js-gridjs.md

## Topics

`filter` `grid` `pagination` `sort` `table`

## Description

Grid.js is a framework-agnostic JavaScript library for rendering interactive data grids. It allows for the display of structured information in tabular formats across different frontend environments, supporting data population from static arrays or JSON imports.

The library features a plugin system for extending user interface components and logic, as well as a custom data pipeline for transforming information before it is displayed. It includes built-in support for multilingual localization to translate interface elements and messages.

The project covers core data visualization capabilities including sorting, filtering, and dynamic grid visualization. It provides tools for managing configuration settings and integrating with various JavaScript environments.

## Tags

### Data & Databases

- [Tabular Grids](https://awesome-repositories.com/f/data-databases/client-side-data-processing/tabular-grids.md) — Implements a client-side grid for populating and managing tabular data from static arrays or JSON imports.
- [Data Grids](https://awesome-repositories.com/f/data-databases/data-grids.md) — Renders structured tabular data in a grid format across various JavaScript environments. ([source](https://cdn.jsdelivr.net/gh/grid-js/gridjs@master/README.md))
- [Data Processing Pipelines](https://awesome-repositories.com/f/data-databases/data-processing-pipelines.md) — Transforms and modifies information through a processing sequence before grid display.

### Software Engineering & Architecture

- [Data Processing Pipelines](https://awesome-repositories.com/f/software-engineering-architecture/data-processing-pipelines.md) — Transforms raw input data through a modular sequence of modifiers before final visual mapping.
- [Extensible Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/extensible-plugin-architectures.md) — Provides an extensible architecture allowing custom components and logic to be injected into the table lifecycle.
- [Configuration State Managers](https://awesome-repositories.com/f/software-engineering-architecture/configuration-state-managers.md) — Implements a centralized settings object to control column definitions and row data dynamically.
- [UI Component Injections](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/dependency-injection/ui-component-injection/logic-component-injection/ui-component-injections.md) — Allows the injection of custom UI components at predefined hook points to extend grid functionality. ([source](https://gridjs.io/docs/plugins/basics))
- [Table Plugin Systems](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/plugin-based-architectures/telemetry-table-plugins/table-plugin-systems.md) — Includes a plugin system that allows developers to extend the table's behavior and user interface components.

### User Interface & Experience

- [Data Tables](https://awesome-repositories.com/f/user-interface-experience/data-tables.md) — Renders structured data in tabular formats with built-in sorting and filtering in web browsers.
- [Data Transformation Pipelines](https://awesome-repositories.com/f/user-interface-experience/data-tables/data-entry-forms/data-transformation-pipelines.md) — Modifies record data through a processing sequence before it is displayed in the grid. ([source](https://gridjs.io/))
- [Data Tables](https://awesome-repositories.com/f/user-interface-experience/data-tables/table-data-syncers/data-tables.md) — Provides interactive interfaces for displaying tabular datasets with search and pagination capabilities. ([source](https://gridjs.io/docs/philosophy))
- [Dynamic Data Tables](https://awesome-repositories.com/f/user-interface-experience/dynamic-data-tables.md) — Generates tabular views at runtime using structured data arrays and JSON imports. ([source](https://gridjs.io/docs/config/data))
- [Framework-Agnostic UI Components](https://awesome-repositories.com/f/user-interface-experience/framework-agnostic-ui-components.md) — Provides a tabular display component that renders consistently across different frontend environments without requiring a specific framework.
- [Dynamic Data Table Visualizers](https://awesome-repositories.com/f/user-interface-experience/grid-layout-visualizers/dynamic-data-table-visualizers.md) — Creates interactive tables that populate from JSON or static arrays to present information.
- [Framework-Agnostic Rendering](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/framework-agnostic-rendering.md) — Generates table elements using standard web APIs to ensure compatibility across different JavaScript frameworks.
- [Table Interface Language Translators](https://awesome-repositories.com/f/user-interface-experience/configurable-data-tables/table-interface-language-translators.md) — Provides configuration-based translation of user interface labels and messages into different languages.
- [Interface Localizations](https://awesome-repositories.com/f/user-interface-experience/interface-localizations.md) — Manages regional translation files to adapt the table interface for multiple languages. ([source](https://gridjs.io/docs/localization/locales))

### Web Development

- [Dynamic Content Resolution](https://awesome-repositories.com/f/web-development/dynamic-content-resolution.md) — Resolves data sources from static arrays and asynchronous JSON requests to populate the grid.
- [Frontend Framework Integrations](https://awesome-repositories.com/f/web-development/frontend-framework-integrations.md) — Ensures consistent data grid implementation across different JavaScript UI frameworks.
- [JavaScript Data Grids](https://awesome-repositories.com/f/web-development/javascript-data-grids.md) — Provides interactive tabular components built with JavaScript for web-based data management. ([source](https://gridjs.io/docs/index))

### Part of an Awesome List

- [Dynamic Configuration Updates](https://awesome-repositories.com/f/awesome-lists/data/charts-and-visualization/dynamic-configuration-updates.md) — Updates visual properties and data without requiring the entire grid component to be recreated. ([source](https://gridjs.io/docs/examples/hello-world))
- [Data Grid Components](https://awesome-repositories.com/f/awesome-lists/devtools/react-components/data-grid-components.md) — Supports the rendering of interactive data grids within React environments via simple configuration. ([source](https://gridjs.io/docs/integrations/react))

### Development Tools & Productivity

- [Locale Mappings](https://awesome-repositories.com/f/development-tools-productivity/localization-support/locale-mappings.md) — Maps internal interface keys to language-specific translation files based on user locale settings.