diff --git a/README.md b/README.md index 08e3ce9..8531926 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# ReactPivot # +# ReactPivot ReactPivot is a data-grid component with pivot-table-like functionality for data display, filtering, and exploration. Can be used without React. @@ -6,7 +6,7 @@ Demo: [http://davidguttman.github.io/react-pivot/](http://davidguttman.github.io ![Demo](http://i.imgur.com/BhPF2Cv.gif) -## Installation & Usage ## +## Installation & Usage Default (Browserify/webpack): @@ -15,17 +15,19 @@ npm i -S react-pivot ``` ```js -var React = require('react') -var ReactPivot = require('react-pivot') +var React = require("react"); +var ReactPivot = require("react-pivot"); React.render( - , + , document.body -) +); ``` Classic (no React or Browserify): @@ -33,72 +35,96 @@ React.render( Download [react-pivot-standalone-3.0.0.min.js](https://raw.githubusercontent.com/davidguttman/react-pivot/master/dist/react-pivot-standalone-3.0.0.min.js) ```html - + ``` Custom (Browserify, no React): ```js -var ReactPivot = require('react-pivot/load') +var ReactPivot = require("react-pivot/load"); ReactPivot(document.body, { rows: rows, dimensions: dimensions, reduce: reduce, calculations: calculations -}) - +}); ``` - -## Example ## +## Example ```js -var React = require('react') -var ReactPivot = require('react-pivot') +var React = require("react"); +var ReactPivot = require("react-pivot"); React.render( - , + , document.body -) +); ``` `ReactPivot` requires four arguments: `rows`, `dimensions`, `reduce` and `calculations` `rows` is your data, just an array of objects: + ```js 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"}} -] + { + 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`: +`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`: ```js -var dimensions = [ - {value: 'firstName', title: 'First Name'} -] +var dimensions = [{ value: "firstName", title: "First Name" }]; ``` `reduce` is how you calculate numbers for each group: ```js var reduce = function(row, memo) { - memo.amountTotal = (memo.amountTotal || 0) + parseFloat(row.transaction.amount) - return memo -} + memo.amountTotal = + (memo.amountTotal || 0) + parseFloat(row.transaction.amount); + return memo; +}; ``` `calculations` is how you want to display the calculations done in `reduce`: @@ -106,54 +132,57 @@ var reduce = function(row, memo) { ```js var calculations = [ { - title: 'Amount', value: 'amountTotal', + title: "Amount", + value: "amountTotal", template: function(val, row) { - return '$' + val.toFixed(2) + return "$" + val.toFixed(2); }, sortBy: function(row) { - return isNaN(row.amountTotal) ? 0 : row.amountTotal + return isNaN(row.amountTotal) ? 0 : row.amountTotal; } } -] +]; ``` Plug them in and you're good to go! ```js - // Optional: set a default grouping with "activeDimensions" React.render( - , + , document.body -) +); ``` See it all together in [example/basic.jsx](https://github.com/davidguttman/react-pivot/blob/master/example/basic.jsx) -### Optional Arguments ### -parameter | type | description | default ---------- | ---- | ----------- | ------- -compact | boolean | compact rows | false -csvDownloadFileName | string | assign name of document created when user clicks to 'Export CSV' | 'table.csv' -csvTemplateFormat | boolean | apply template formatting to data before csv export | false -defaultStyles | boolean | apply default styles from style.css | true -hiddenColumns | array | columns that should not display | [] -nPaginateRows | number | items per page setting | 25 -solo | object | item that should be displayed solo | null -sortBy | string | name of column to use for record sort | null -sortDir | string | sort direction, either 'asc' or 'desc' | 'asc' -tableClassName | string | assign css class to table containing react-pivot elements | '' -hideDimensionFilter | boolean | do not render the dimension filter | false - -### TODO ### - -* Better Pagination -* Responsive Table - -## License ## +### Optional Arguments + +| parameter | type | description | default | +| ------------------- | ------- | ---------------------------------------------------------------- | ----------- | +| compact | boolean | compact rows | false | +| csvDownloadFileName | string | assign name of document created when user clicks to 'Export CSV' | 'table.csv' | +| csvTemplateFormat | boolean | apply template formatting to data before csv export | false | +| defaultStyles | boolean | apply default styles from style.css | true | +| hiddenColumns | array | columns that should not display | [] | +| nPaginateRows | number | items per page setting | 25 | +| solo | object | item that should be displayed solo | null | +| sortBy | string | name of column to use for record sort | null | +| sortDir | string | sort direction, either 'asc' or 'desc' | 'asc' | +| tableClassName | string | assign css class to table containing react-pivot elements | '' | +| hideDimensionFilter | boolean | do not render the dimension filter | false | + +### TODO + +- Better Pagination +- Responsive Table + +## License MIT