Top React Table Libraries

Filters

Top 5 Projects Compared

sheetjs
34,968

SheetJS/sheetjs is a powerful JavaScript library for parsing, manipulating, and generating spreadsheet files in various formats.

Code Example

const XLSX = require('xlsx');
const workbook = XLSX.readFile('example.xlsx');
const sheet = workbook.Sheets[workbook.SheetNames[0]];
const data = XLSX.utils.sheet_to_json(sheet);

Pros

Supports a wide range of spreadsheet formats, including Excel, CSV, and OpenDocument.
Offers both client-side and server-side functionality, making it versatile for different use cases.
Provides robust parsing and writing capabilities for complex spreadsheet structures.

Cons

Lacks built-in UI components for data visualization, unlike projects like ag-grid or handsontable.
May have a steeper learning curve compared to simpler table libraries like react-bootstrap-table.
Focuses primarily on file manipulation rather than interactive data editing, which some other projects specialize in.

table
24,882

TanStack/table is a headless UI library for building powerful tables and datagrids in React, Vue, and Solid.

Code Example

import { useTable } from '@tanstack/react-table'

const table = useTable({ columns, data })
return <table>{/* Render table using table instance */}</table>

Pros

Highly flexible and customizable, allowing for complex table implementations
Framework-agnostic, supporting multiple JavaScript frameworks
Excellent TypeScript support and type safety

Cons

Steeper learning curve compared to some out-of-the-box solutions
Requires more setup and configuration than pre-styled table components
May be overkill for simple table needs

blueprint
20,629

Palantir Blueprint is a React-based UI toolkit for building complex web applications with a focus on data-dense interfaces.

Code Example

import { Button, Intent } from "@blueprintjs/core";

<Button intent={Intent.PRIMARY} text="Click me" />

Pros

Comprehensive set of UI components specifically designed for data-heavy applications
Strong TypeScript support and extensive documentation
Consistent and customizable design system

Cons

Steeper learning curve compared to some lighter-weight alternatives
May be overkill for simpler projects or applications not focused on data visualization
Less flexible for custom styling compared to some component libraries

handsontable
19,778

Handsontable is a JavaScript data grid component that provides spreadsheet-like functionality for web applications.

Code Example

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: [['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
         ['2019', 10, 11, 12, 13],
         ['2020', 20, 11, 14, 13],
         ['2021', 30, 15, 12, 13]]
});

Pros

Offers a rich set of features including data validation, filtering, and sorting out of the box.
Provides excellent Excel-like functionality with cell merging and formulas.
Has a large and active community, ensuring regular updates and support.

Cons

Can be resource-intensive for large datasets compared to some lightweight alternatives.
Requires a commercial license for use in non-open source projects.
Has a steeper learning curve compared to simpler table components due to its extensive feature set.

tabler-icons
17,910

Tabler Icons is a set of over 4,200 free MIT-licensed SVG icons for web projects.

Code Example

import { IconHome } from '@tabler/icons-react';

function App() {
  return <IconHome size={24} color="blue" />;
}

Pros

Offers a vast collection of high-quality, customizable SVG icons
Provides easy integration with popular frameworks like React
Regularly updated with new icons and improvements

Cons

Focused solely on icons, unlike some other projects that offer full UI component libraries
May have a larger file size compared to more minimal icon sets
Lacks advanced data manipulation features found in projects like ag-Grid or Handsontable

All Top Projects

sheetjs

34,968

📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs

table

24,882

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

blueprint

20,629

A React-based UI toolkit for the web

handsontable

19,778

JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

tabler-icons

17,910

A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.

ag-grid

12,509

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

x-render

6,977

🚴‍♀️ 阿里 - 很易用的中后台「表单 / 表格 / 图表」解决方案

tabulator

6,591

Interactive Tables and Data Grids for JavaScript

react-datasheet

5,386

Excel-like data grid (table) component for React

fixed-data-table

4,297

A React table component designed to allow presenting thousands of rows of data.

glide-data-grid

3,950

🚀 Glide Data Grid is a no compromise, outrageously react fast data grid with rich rendering, first class accessibility, and full TypeScript support.

material-table

3,493

Datatable for React based on material-ui's table with additional features

Visual Copilot
Promo

Turn Figma designs into high-quality code using AI

reactdatagrid

3,444

Empower Your Data with the best React Data Grid there is

docxtemplater

3,006

Generate docx, pptx, and xlsx from templates (Word, Powerpoint and Excel documents), from Node.js or the browser. Demo: https://www.docxtemplater.com/demo. #docx #office #generator #templating #report #json #generate #generation #template #create #pptx #docx #xlsx #react #vuejs #angularjs #browser #typescript #image #html #table #chart

Griddle

2,501

Simple Grid Component written in React

tabler-react

2,286

React components and demo for the Tabler UI theme.

react-bootstrap-table

2,236

A Bootstrap table built with React.js

react-data-table-component

2,037

A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling.

react-datasheet-grid

1,772

An Airtable-like / Excel-like component to create beautiful spreadsheets.

markdown-toc

1,633

API and CLI for generating a markdown TOC (table of contents) for a README or any markdown files. Uses Remarkable to parse markdown. Used by NASA/openmct, Prisma, Joi, Mocha, Sass, Prettier, Orbit DB, FormatJS, Raneto, hapijs/code, webpack-flow, docusaurus, release-it, ts-loader, json-server, reactfire, bunyan, husky, react-easy-state, react-snap, chakra-ui, carbon, alfresco, repolinter, Assemble, Verb, and thousands of other projects.