Need help with fixed-data-table?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

4.3K Stars 576 Forks Other 324 Commits 205 Opened issues


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

Services available


Need anything else?

Contributors list

Project Status: 🚨 Unmaintained 🚨

This project is no longer maintained. We will not be accepting pull requests, addressing issues, nor making future releases.


Fixed Data Tables for React

FixedDataTable is a React component for building and presenting data in a flexible, powerful way. It supports standard table features, like headers, columns, rows, header groupings, and both fixed-position and scrolling columns.

The table was designed to handle thousands of rows of data without sacrificing performance. Scrolling smoothly is a first-class goal of FixedDataTable and it's architected in a way to allow for flexibility and extensibility.

Features of FixedDataTable: * Fixed headers and footer * Both fixed and scrollable columns * Handling huge amounts of data * Variable row heights (with adaptive scroll positions) * Column resizing * Performant scrolling * Customizable styling * Jumping to a row or column * Controlled scroll API allows touch support

Things the FixedDataTable doesn't do: * FixedDataTable does not provide a layout reflow mechanism or calculate content layout information such as width and height of the cell contents. The developer has to provide the layout information to the table instead. * FixedDataTable does not handle sorting of data. Instead it allows the developer to supply data getters that can be sort-, filter-, or tail-loading-aware. * FixedDataTable does not fetch the data (see above)

Getting started


using npm.
npm install fixed-data-table

Add the default stylesheet

, then import it into any module.

Basic Example

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table';

// Table data as a list of array. const rows = [ ['a1', 'b1', 'c1'], ['a2', 'b2', 'c2'], ['a3', 'b3', 'c3'], // .... and more ];

// Render your table ReactDOM.render(

Col 1} cell={Column 1 static content} width={2000} /> Col 2} cell={} width={1000} /> Col 3} cell={({rowIndex, ...props}) => ( Data for column 3: {rows[rowIndex][2]} )} width={2000} />

, document.getElementById('example') );


Use GitHub issues for requests.

We actively welcome pull requests; learn how to contribute.


Changes are tracked as GitHub releases.


is BSD-licensed. We also provide an additional patent grant.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.