Functional Data Grid

This is a library made with React and React-Virtualized for creating rich data grids with filtering, sorting, grouping and aggregates computation. It supports virtualization, and so it can handle very large amounts of data. It features also locked columns, custom renderers, multi-column headers, columns resize, hide / show columns and variable rows height. Filtering, sorting, grouping and aggregates computation are done client-side.

Functional Data Grid is written in functional programming style with ES2016 and Flow. It's really fast and is being used in production with tens of thousands of elements.

Installation

You can install the library with NPM:

npm install –-save functional-data-grid

or with YARN:

yarn add functional-data-grid

Usage

To use Functional Data Grid, you have to import the library and its base types you intend to use, for example:

import FunctionalDataGrid, { Column, Group } from 'functional-data-grid'

then you can use it inside your component. For example:

import React from 'react'
import FunctionalDataGrid, { Column } from 'functional-data-grid'

let columns = [
  new Column({
    id : 'name',
    title: 'Name',
    width: 120,
    valueGetter: e => e.name
  }),
  new Column({
    id : 'surname',
    title: 'Surname',
    width: 120,
    valueGetter: e => e.surname
  })
]

let data = [
  {
    'name': 'Donald',
    'surname': 'Duck'
  },
  {
    'name': 'Mickey',
    'surname': 'Mouse'
  }
]

class MyGrid extends React.Component {

  render = () => <FunctionalDataGrid columns={columns} data={data} />

}

Component Props

The FunctionalDataGrid component accepts the following props:

Columns definition

Columns are defined by creating an instance of the class Column. Column constructor accepts an object with the following keys:

Groups definition

Groups are defined by creating an instance of the class Group. Group constructor accepts an object with the following keys:

Demo

Check the examples here: https://energydrink9.github.io/functional-data-grid-examples

Conclusion

Pull requests are welcome, enjoy your functional data grids!

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]