4.4.0 • Published 5 years ago

react-pivot v4.4.0

Weekly downloads
574
License
MIT
Repository
github
Last release
5 years ago

ReactPivot

ReactPivot is a data-grid component with pivot-table-like functionality for data display, filtering, and exploration. Can be used without React.

Demo: http://davidguttman.github.io/react-pivot/

Demo

Installation & Usage

Default (Browserify/webpack):

npm i -S react-pivot
var React = require('react')
var ReactPivot = require('react-pivot')

React.render(
  <ReactPivot rows={rows}
              dimensions={dimensions}
              reduce={reduce}
              calculations={calculations}
              nPaginateRows={25} />,
  document.body
)

Classic (no React or Browserify):

Download react-pivot-standalone-3.0.0.min.js

<script src='react-pivot-standalone-3.0.0.min.js'></script>
<script>
  ReactPivot(document.body, {
    rows: rows,
    dimensions: dimensions,
    calculations: calculations,
    reduce: reduce
  })
</script>

Custom (Browserify, no React):

var ReactPivot = require('react-pivot/load')

ReactPivot(document.body, {
  rows: rows,
  dimensions: dimensions,
  reduce: reduce,
  calculations: calculations
})

Example

var React = require('react')
var ReactPivot = require('react-pivot')

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)
    },
    sortBy: function(row) {
      return isNaN(row.amountTotal) ? 0 : row.amountTotal
    }
  }
]

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
)

See it all together in example/basic.jsx

Optional Arguments

parametertypedescriptiondefault
compactbooleancompact rowsfalse
csvDownloadFileNamestringassign name of document created when user clicks to 'Export CSV''table.csv'
csvTemplateFormatbooleanapply template formatting to data before csv exportfalse
defaultStylesbooleanapply default styles from style.csstrue
hiddenColumnsarraycolumns that should not display[]
nPaginateRowsnumberitems per page setting25
soloobjectitem that should be displayed solonull
sortBystringname of column to use for record sortnull
sortDirstringsort direction, either 'asc' or 'desc''asc'
tableClassNamestringassign css class to table containing react-pivot elements''
hideDimensionFilterbooleando not render the dimension filterfalse
hideRowsfunctionif provided, rows that are passed to the function will not render unless the return value is truenull

TODO

  • Better Pagination
  • Responsive Table

License

MIT

4.4.0

5 years ago

4.3.0

5 years ago

4.2.0

5 years ago

4.1.3

5 years ago

4.1.2

5 years ago

4.1.1

5 years ago

4.1.0

6 years ago

4.0.0

6 years ago

3.1.0

6 years ago

3.0.0

7 years ago

2.0.0

8 years ago

1.18.3

8 years ago

1.18.2

8 years ago

1.18.1

8 years ago

1.18.0

8 years ago

1.17.1

8 years ago

1.17.0

8 years ago

1.16.0

8 years ago

1.15.0

9 years ago

1.14.1

9 years ago

1.14.0

9 years ago

1.13.1

9 years ago

1.13.0

9 years ago

1.12.2

9 years ago

1.12.1

9 years ago

1.12.0

10 years ago

1.11.1

10 years ago

1.11.0

10 years ago

1.10.2

10 years ago

1.10.1

10 years ago

1.10.0

10 years ago

1.9.2

10 years ago

1.9.1

10 years ago

1.9.0

10 years ago

1.8.0

10 years ago

1.7.2

10 years ago

1.7.1

10 years ago

1.7.0

10 years ago

1.6.1

10 years ago

1.6.0

10 years ago

1.5.0

10 years ago

1.4.0

10 years ago

1.3.1

10 years ago

1.3.0

10 years ago

1.2.0

10 years ago

1.1.2

10 years ago

1.1.1

10 years ago

1.1.0

10 years ago

1.0.0

10 years ago