Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/facebookarchive/fixed-data-table

A React table component designed to allow presenting thousands of rows of data.
https://github.com/facebookarchive/fixed-data-table

Last synced: 21 days ago
JSON representation

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

Lists

README 

        
# Project Status:  🚨 Unmaintained 🚨



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



## Alternatives



- [react-virtualized](https://github.com/bvaughn/react-virtualized)

- [fixed-data-table-2](https://github.com/schrodinger/fixed-data-table-2)



* * *



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

---------------



Install `fixed-data-table` using npm.



```shell

npm install fixed-data-table

```

Add the default stylesheet `dist/fixed-data-table.css`, then import it into any module.



### Basic Example



```javascript

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')

);

```



Contributions

------------



Use [GitHub issues](https://github.com/facebook/fixed-data-table/issues) for requests.



We actively welcome pull requests; learn how to [contribute](https://github.com/facebook/fixed-data-table/blob/master/CONTRIBUTING.md).



Changelog

---------



Changes are tracked as [GitHub releases](https://github.com/facebook/fixed-data-table/releases).



License

-------



`FixedDataTable` is [BSD-licensed](https://github.com/facebook/fixed-data-table/blob/master/LICENSE). We also provide an additional [patent grant](https://github.com/facebook/fixed-data-table/blob/master/PATENTS).