For data view customization, the strongest matches are swimlane/ngx-datatable (This Angular component library provides high-performance data tables with), olifolkerd/tabulator (Tabulator is a high-performance JavaScript data table and grid) and alibaba/ali-react-table (This repository provides a high-performance React data grid component). angular-ui/ui-grid and adazzle/react-data-grid round out the shortlist. Each is ranked by relevance to your query, popularity and recent activity.
Hand-picked open-source data grid components for advanced data view customization, ranked by GitHub stars and activity. Compare and pick the right one.
ngx-datatable is a feature-rich data table component for Angular applications designed to display and manage large datasets. It functions as a customizable data grid that supports sorting, pagination, and the use of custom Angular templates for styling data cells. The component is distinguished by its high-performance virtual scrolling grid, which renders only visible rows to optimize memory and CPU usage. It provides an interactive interface for managing data through row selection, column reordering, and expandable detail views. The project covers a broad set of capabilities including colum
This Angular component library provides high-performance data tables with virtual scrolling, sorting, and pagination, though it focuses primarily on table and grid layouts rather than multiple view types like kanbans or calendars.
Tabulator is an interactive data table library and virtual DOM data grid used to create high-performance tables from JSON or arrays. It functions as a hierarchical data viewer and a spreadsheet interface component, capable of rendering thousands of records efficiently through viewport-based virtualization and progressive loading. The library distinguishes itself by providing a full spreadsheet interface mode with multi-sheet management, cell range selection, and bulk copy-paste capabilities. It supports complex data architectures, including nested data field mapping, expandable tree structure
Tabulator is a high-performance JavaScript data table and grid library that fully supports column customization, advanced filtering, virtual scrolling, and multiple view interactions for structured data.
This library is a high-performance data grid component for React applications, designed to manage and display large datasets. It provides a declarative configuration system that allows developers to define table structures, data sources, and feature toggles through a structured object schema. The library distinguishes itself through a flexible layout engine that supports complex UI requirements, such as pinning headers and specific columns to viewport edges during scrolling. It utilizes virtualized rendering to maintain interface responsiveness by displaying only the visible subset of data, e
This repository provides a high-performance React data grid component equipped with virtual scrolling and declarative column configurations, though it focuses primarily on table views rather than multiple alternative view layouts like kanban boards or calendars.
ui-grid is an enterprise data grid component for Angular applications designed to display tabular data. It functions as an interactive data table that supports virtualization to maintain performance when rendering large datasets. The grid provides specialized capabilities for professional data management, including row grouping, column pinning, and state persistence. It allows for the organization of complex data hierarchies and the transformation of flat records into grouped or tree structures. The component covers a broad range of data management features, including in-place cell editing,
This repository is a dedicated data grid component library for Angular that provides virtualization, row grouping, and in-place cell editing, matching the requested category even though it is tied to a specific framework ecosystem.
react-data-grid is a high-performance tabular interface for rendering and manipulating large datasets within a React application. It functions as a virtualized data table and editable spreadsheet component that supports hierarchical data grids with expandable and collapsible row groupings. The component maintains performance with massive datasets by rendering only the rows and columns currently visible in the viewport. It provides spreadsheet-like data manipulation, including cell editing and the ability to copy, paste, or drag values between cells. The grid supports advanced layout capabili
This repository provides a high-performance, virtualized data grid component with editable cells, column resizing, and row grouping, making it a strong fit for tabular views even though it focuses specifically on grids rather than multi-view layouts like kanban boards or calendars.
Bootstrap Table is a jQuery plugin for rendering interactive data grids with sorting, pagination, and filtering. It features a remote data integration system for fetching and synchronizing content from JSON endpoints using AJAX and server-side processing. The project includes a styling layer that adapts markup to work with various CSS frameworks, such as Bootstrap, Semantic UI, Bulma, and Material Design. It provides specialized rendering modes, including a hierarchical tree grid for parent-child row relationships and a responsive card-view table that transforms grids into mobile-friendly lay
Bootstrap Table is an interactive jQuery grid plugin that supports sorting, pagination, and filtering to help render structured data tabularly.
react-data-grid is a high-performance table component for React designed to render large datasets using virtualization. It functions as a virtualizing data table that optimizes memory and performance by rendering only the rows and columns currently visible on the screen. The project provides a customizable spreadsheet interface featuring cell editing, column resizing, and pinned rows. It also acts as a hierarchical data grid, supporting row grouping and tree structures to organize complex nested information. The grid covers wide-ranging data management and display capabilities, including mul
This repository is a high-performance React data grid component featuring virtualized rendering, cell editing, and row grouping, making it a strong building block for structured data views though it lacks some alternative layout views like kanban boards or calendars.
MUI X is a collection of advanced React UI components for building data-rich applications, including a data grid, charting library, date and time pickers, scheduler, and tree view. The library is built with accessibility as a core principle, ensuring all components meet WCAG and WAI-ARIA standards for keyboard navigation and screen reader announcements. The components are designed for extensibility and performance. The data grid offers comprehensive data management with sorting, filtering, pagination, column pinning, row grouping, inline editing, and Excel export. The charting library support
MUI X is a comprehensive React UI component library featuring an advanced data grid, scheduler, and multi-view layouts that natively support column customization, filtering, grouping, and inline editing for data-rich applications.
Vue-easytable is a high-performance data grid component designed for the Vue.js framework. It provides a comprehensive interface for displaying and managing large-scale tabular data, utilizing virtual scrolling to maintain responsiveness by rendering only the visible subset of rows within the browser. The component offers spreadsheet-style interaction, enabling users to perform direct, in-place data editing and manipulation. It supports complex grid configurations, including column pinning, row expansion, and data filtering, allowing for the organization of structured information to improve r
Vue-easytable is a high-performance data grid component for Vue that supports virtual scrolling, spreadsheet-style editing, and column pinning, though it focuses primarily on tabular views rather than multi-layout dashboards.
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
SlickGrid is a high-performance JavaScript data grid library offering virtualized rendering, in-place cell editing, and tabular data management, though it focuses primarily on grid views rather than multiple alternative layout types.
Ant Design is an enterprise-grade component library and design system framework built for developing complex, data-heavy web applications. It provides a comprehensive collection of pre-built, state-driven interface elements that map data properties to rendered components, ensuring consistent interaction patterns and visual language across large-scale projects. The library distinguishes itself through a robust styling architecture that utilizes design tokens and hierarchical configuration providers to propagate global settings like themes, locale, and layout direction. By employing component-l
Ant Design is a comprehensive enterprise-grade component library for React that provides robust data tables, grids, pagination, and UI elements tailored for structured data-heavy applications.
AG Grid is a JavaScript data grid library designed for rendering and manipulating large datasets within web applications. It functions as a comprehensive toolset for building interactive tables that support complex data visualization, enabling the display of massive volumes of information while maintaining responsive user interactions. The library distinguishes itself through a column-oriented layout engine and a plugin-based architecture that allows for modular extensions. It utilizes a cell-based component lifecycle and an expression-based evaluation engine to manage data updates and format
AG Grid is a comprehensive data grid library that provides advanced filtering, sorting, grouping, pivoting, pagination, virtual scrolling, and editable cells, making it a flagship tool for building customizable tabular and structured data interfaces.
DataTables is a feature-rich HTML table library that transforms static HTML tables into interactive data grids with sorting, paging, filtering, and server-side processing support. It provides a client-side rendering engine that handles table rows, pagination, and sorting entirely in the browser, while also offering a server-side processing pipeline that offloads sorting, filtering, and paging operations to a backend for efficient handling of large datasets. The library distinguishes itself through its plugin-based extension system, which allows custom functions and widgets to modify table beh
DataTables is a mature HTML table library providing sorting, pagination, filtering, and extension capabilities, though it focuses primarily on table and grid views rather than multi-layout suites like kanban boards or calendars.
Fixed-data-table is a React component library designed for rendering large datasets within structured, scrollable grid interfaces. It functions as a virtualized table, optimizing performance by rendering only the rows currently visible within the viewport. The library distinguishes itself through its focus on maintaining context during navigation, utilizing fixed-header layouts and synchronized scroll state management. It employs index-based data access to map information to specific grid coordinates, allowing for modular cell customization and flexible column configuration. The component su
This is a React data table library providing virtualized grid interfaces and column customization for large datasets, though it focuses primarily on high-performance scrolling rather than multi-view layouts like kanban or calendars.
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, whil
This library provides a high-performance React data grid with window-based virtualization and pinned columns, though it serves primarily as a foundational table building block rather than offering multiple out-of-the-box view layouts like kanban or calendars.
react-datasheet is a React data grid component and tabular editor that provides an interactive spreadsheet interface. It is designed for managing tabular data with built-in support for cell editing and keyboard navigation. The project is distinguished by its flexibility in rendering and structure, allowing the replacement of standard table elements with custom markup such as lists or divs. It supports custom cell rendering through a mapping system that swaps default cells with specialized components based on cell metadata. The component covers broad capabilities for tabular data management,
This repository is a React data grid component designed for interactive spreadsheet editing and tabular data management, though it focuses primarily on the spreadsheet interface rather than multiple high-level view layouts like kanban or calendars.
NocoDB is a visual platform that transforms relational databases into collaborative, spreadsheet-style workspaces. By acting as a headless database backend, it provides a unified environment for designing database structures, managing record relationships, and interacting with data without requiring manual SQL queries. The platform normalizes interactions across various SQL and NoSQL data sources, allowing users to manage complex datasets through a centralized interface. The project distinguishes itself by automatically generating RESTful and GraphQL APIs from existing database schemas, enabl
NocoDB provides a spreadsheet-style workspace and database frontend with multiple view layouts like grids, kanban, and calendars, though it is a full no-code platform rather than a lightweight UI component library.
This project is a JavaScript spreadsheet component and web-based data table that provides an interactive grid for managing tabular data. It functions as a cross-framework UI component compatible with React, Vue, and jQuery, and can also be embedded as a standalone web component. The grid is specifically designed for XLSX interoperability, allowing users to import and export XLSX files while preserving formulas and styles. It distinguishes itself through real-time collaboration for simultaneous multi-user editing and a flexible system for creating custom cell editors and specialized column typ
This project is an interactive JavaScript spreadsheet component that provides data grid functionality for embedding within web frameworks, though it lacks some of the broader multi-view layout options like kanban or calendar boards.
React-admin is a framework for building data-driven administrative interfaces that connect to REST or GraphQL backends. It provides a comprehensive suite of tools for managing the full lifecycle of administrative applications, including resource-oriented routing, declarative form scaffolding, and context-driven state management. By utilizing a modular adapter-based architecture, the framework abstracts backend communication, allowing developers to build consistent CRUD interfaces that handle data fetching, authentication, and synchronization automatically. The project distinguishes itself thr
React-admin provides rich data grids, list views, filtering, and editable inputs as part of a complete admin framework, though it is heavier than a pure component-only library.
dcat-admin is a Laravel admin panel framework used to rapidly build data-driven administration interfaces. It functions as a CRUD generator and backend scaffolding tool that automatically produces create, read, update, and delete interfaces based on database table schemas. The system distinguishes itself through a plugin-based extension architecture and the ability to run multiple independent administrative instances within a single installation. It provides specialized tools for mapping external APIs to forms and tables, as well as an event-driven form lifecycle for executing custom logic du
This Laravel admin panel framework provides robust CRUD generation, data grids, and UI components for managing structured backend data, though it focuses on complete admin interfaces rather than a standalone component library.
Handsontable is a JavaScript data grid that provides a spreadsheet-like interface for managing and editing large datasets within web applications. It functions as a virtualized data table that renders only visible cells to maintain performance, paired with a synchronization layer that binds the grid to underlying data structures. The project distinguishes itself through a built-in spreadsheet calculation engine for evaluating mathematical and logical expressions and a dedicated tool for exporting grid content into Excel XLSX files. It ensures interoperability with external spreadsheet softwar
Handsontable is a JavaScript data grid library that offers virtualized table views, data editing, sorting, and export capabilities, fitting the requested UI component category well while focusing heavily on a spreadsheet-like experience rather than diverse multi-layout views like kanban or calendars.
This project is a headless UI table library and state manager for building data grids. It functions as a type-safe logic engine that manages table state and data grid behavior without providing pre-defined styles or HTML markup. The library employs a headless pattern, separating internal logic and state from visual presentation. By providing hooks rather than styled components, it allows developers to maintain full control over the markup, styles, and interaction behavior of their tables. The core engine covers complex datagrid implementation, including the management of sorting, filtering,
This headless table library provides core logic and state management for sorting, filtering, and pagination, but requires custom implementation for multiple view layouts and advanced groupings.
Datatable for React based on material-ui's table with additional features
This React data table component library is built on material-ui and provides built-in filtering, sorting, and editing capabilities, making it a fitting tool for customizable structured data views despite lacking some advanced layout options like kanban boards.
Datatables for React using Material-UI
This React table component built with Material-UI provides robust data grid and filtering features, though it lacks the multi-view layout support like kanban or calendar boards needed for full view customization.
Data table filters is a TypeScript library for building interactive data tables with server-side filtering, faceted search, and virtualized rows. It provides a backend data querying system for filtering, sorting, and paginating large datasets directly in the database, alongside UI components for filtering using checkboxes, sliders, and date ranges. The library supports dynamic record refinement through text search, numerical sliders, and date range pickers, handling filter and table state via interchangeable storage adapters including URL parameters, client stores, or memory. It synchronizes
This repository provides a set of React data table filters built on top of TanStack Table and Shadcn, making it a useful UI component for organizing and filtering structured data despite its lack of a description.
Ember Table is a component library designed for rendering high-performance data grids and virtualized lists within Ember applications. It provides the UI primitives necessary to display hundreds of thousands of records smoothly by recycling DOM nodes and rendering only the items visible in the viewport. The library includes advanced layout management tools that support live column resizing, reordering, scaling, and structural region pinning to lock headers, footers, and specific columns in place during scrolling. It also features hierarchical row flattening, transforming nested tree structur
This Ember addon provides a performant table component capable of handling large datasets, fitting the category although it is specifically tailored to the Ember ecosystem and lacks broader framework support.
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 dat
This TypeScript data grid library provides powerful tabular data display, editing, and pagination features, though it focuses primarily on grid and spreadsheet layouts rather than offering multiple view types like kanban boards or calendars.
This project is a feature-rich data grid component designed for Vue applications. It provides a flexible interface for rendering, managing, and manipulating structured information, offering built-in support for essential tabular operations such as sorting, filtering, pagination, and row selection. The library distinguishes itself through its highly extensible architecture, which allows developers to override default rendering for cells, headers, and pagination controls using scoped slots. It supports complex data workflows by enabling hierarchical organization through collapsible row grouping
This Vue data grid component provides sorting, filtering, pagination, and row grouping, making it a solid building block for structured data presentation even though it lacks multiple non-table view layouts like kanban or calendar.
| Repository | Stars | Language | License | Last push |
|---|---|---|---|---|
| swimlane/ngx-datatable | 4.7K | TypeScript | MIT | |
| olifolkerd/tabulator | 7.6K | JavaScript | mit | |
| alibaba/ali-react-table | 979 | TypeScript | MIT | |
| angular-ui/ui-grid | 5.4K | JavaScript | MIT | |
| adazzle/react-data-grid | 7.6K | TypeScript | NOASSERTION | |
| wenzhixin/bootstrap-table | 11.8K | JavaScript | MIT | |
| comcast/react-data-grid | 7.6K | TypeScript | NOASSERTION | |
| mui/mui-x | 5.8K | TypeScript | — | |
| happy-coding-clans/vue-easytable | 3.8K | JavaScript | MIT | |
| mleibman/slickgrid | 6.9K | JavaScript | MIT |