redux-grid

0.5.8 • Public • Published

redux-grid

Lightweight grid framework built on top of react-virtualized / fixed-data-table for easy highly customizable grids generated from redux state.

Build Status codecov

NPM

Install

npm i -S redux-grid

Usage

UserGrid.js

import React from 'react'
import { connect } from 'react-redux'
import ReactVirtualized from 'react-virtualized'
import { createGrid } from 'redux-grid'
 
const { Grid } = createGrid({ React, connect, ReactVirtualized })
 
/** Create a grid to show users first name, last name, and age from redux */
export default props => (
  <Grid
    mapCols={
      /** Map redux state to object with column name keys and header component values */
      state => ({ first: <div>First Name</div>
                , last: <div>Last Name</div>
                , age: { render: <div>Age</div>, width: 100 }
                })
    }
    mapRows={
      /** Map redux state to grid rows. */
      state => state.users.map(x => [x.first, x.last, x.age])
    }
  />
)

Test

See redux-grid's test project at redux-grid-test

In active development, come back in a few days.

Package Sidebar

Install

npm i redux-grid

Weekly Downloads

3

Version

0.5.8

License

MIT

Last publish

Collaborators

  • cchamberlain