pivot-reactjs

pivot-reactjs is a data-grid component with pivot-table-like functionality for data display, filtering, and exploration.

Installation & Usage

Default (webpack):

npm i -S pivot-reactjs

Example

var React = require('react')
var ReactPivot = require('pivot-reactjs')
 
React.render(
  <ReactPivot rows={rows}
              dimensions={dimensions}
              reduce={reduce}
              calculations={calculations} />,
  document.body
)

ReactPivot requires four arguments: rows, dimensions, reduce and calculations

rows is your data, just an array of objects:

var rows = [
  {"firstName":"Francisco","lastName":"Brekke","state":"NY","transaction":{"amount":"399.73","date":"2012-02-02T08:00:00.000Z","business":"Kozey-Moore","name":"Checking Account 2297","type":"deposit","account":"82741327"}},
  {"firstName":"Francisco","lastName":"Brekke","state":"NY","transaction":{"amount":"768.84","date":"2012-02-02T08:00:00.000Z","business":"Herman-Langworth","name":"Money Market Account 9344","type":"deposit","account":"95753704"}}
]

dimensions is how you want to group your data. Maybe you want to get the total $$ by firstName and have the column title be First Name:

var dimensions = [
  {value: 'firstName', title: 'First Name'}
]

reduce is how you calculate numbers for each group:

var reduce = function(row, memo) {
  memo.amountTotal = (memo.amountTotal || 0) + parseFloat(row.transaction.amount)
  return memo
}

calculations is how you want to display the calculations done in reduce:

var calculations = [
  {
    title: 'Amount', value: 'amountTotal',
    template: function(val, row) {
      return '$' + val.toFixed(2)
    }
  }
]

Plug them in and you're good to go!

 
// Optional: set a default grouping with "activeDimensions"
React.render(
  <ReactPivot rows={rows}
              dimensions={dimensions}
              reduce={reduce}
              calculations={calculations}
              activeDimensions={['First Name']} />,
  document.body
)

License

MIT