{"id":13403887,"url":"https://github.com/davidguttman/react-pivot","last_synced_at":"2025-05-15T09:02:28.692Z","repository":{"id":27952579,"uuid":"31445351","full_name":"davidguttman/react-pivot","owner":"davidguttman","description":"React-Pivot is a data-grid component with pivot-table-like functionality for data display, filtering, and exploration.","archived":false,"fork":false,"pushed_at":"2023-01-11T22:23:31.000Z","size":1822,"stargazers_count":1066,"open_issues_count":41,"forks_count":150,"subscribers_count":39,"default_branch":"master","last_synced_at":"2025-04-07T02:21:32.676Z","etag":null,"topics":["browserify","calculations","data-grid","javascript","react"],"latest_commit_sha":null,"homepage":"http://davidguttman.github.io/react-pivot/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidguttman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-28T00:29:35.000Z","updated_at":"2025-03-29T18:51:38.000Z","dependencies_parsed_at":"2022-08-28T16:03:18.270Z","dependency_job_id":null,"html_url":"https://github.com/davidguttman/react-pivot","commit_stats":null,"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidguttman%2Freact-pivot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidguttman%2Freact-pivot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidguttman%2Freact-pivot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidguttman%2Freact-pivot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidguttman","download_url":"https://codeload.github.com/davidguttman/react-pivot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248890349,"owners_count":21178408,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browserify","calculations","data-grid","javascript","react"],"created_at":"2024-07-30T19:01:35.903Z","updated_at":"2025-04-14T13:44:26.429Z","avatar_url":"https://github.com/davidguttman.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized","UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Uncategorized","Table / Data Grid","Openshift","Table"],"readme":"# ReactPivot #\n\nReactPivot is a data-grid component with pivot-table-like functionality for data display, filtering, and exploration. Can be used without React.\n\nDemo: [http://davidguttman.github.io/react-pivot/](http://davidguttman.github.io/react-pivot/)\n\n![Demo](http://i.imgur.com/BhPF2Cv.gif)\n\n## Installation \u0026 Usage ##\n\n\u003cstrong\u003e Default (Browserify/webpack): \u003c/strong\u003e\n\n```\nnpm i -S react-pivot\n```\n\n```js\nvar React = require('react')\nvar ReactPivot = require('react-pivot')\n\nReact.render(\n  \u003cReactPivot rows={rows}\n              dimensions={dimensions}\n              reduce={reduce}\n              calculations={calculations}\n              nPaginateRows={25} /\u003e,\n  document.body\n)\n```\n\n\u003cstrong\u003e Classic (no React or Browserify): \u003c/strong\u003e\n\nDownload [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)\n\n```html\n\u003cscript src='react-pivot-standalone-3.0.0.min.js'\u003e\u003c/script\u003e\n\u003cscript\u003e\n  ReactPivot(document.body, {\n    rows: rows,\n    dimensions: dimensions,\n    calculations: calculations,\n    reduce: reduce\n  })\n\u003c/script\u003e\n```\n\n\u003cstrong\u003e Custom (Browserify, no React): \u003c/strong\u003e\n\n```js\nvar ReactPivot = require('react-pivot/load')\n\nReactPivot(document.body, {\n  rows: rows,\n  dimensions: dimensions,\n  reduce: reduce,\n  calculations: calculations\n})\n\n```\n\n\n## Example ##\n\n```js\nvar React = require('react')\nvar ReactPivot = require('react-pivot')\n\nReact.render(\n  \u003cReactPivot rows={rows}\n              dimensions={dimensions}\n              reduce={reduce}\n              calculations={calculations} /\u003e,\n  document.body\n)\n```\n\n`ReactPivot` requires four arguments: `rows`, `dimensions`, `reduce` and `calculations`\n\n`rows` is your data, just an array of objects:\n```js\nvar rows = [\n  {\"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\"}},\n  {\"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\"}}\n]\n```\n\n`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`:\n\n```js\nvar dimensions = [\n  {value: 'firstName', title: 'First Name'}\n]\n```\n\n`reduce` is how you calculate numbers for each group:\n\n```js\nvar reduce = function(row, memo) {\n  memo.amountTotal = (memo.amountTotal || 0) + parseFloat(row.transaction.amount)\n  return memo\n}\n```\n\n`calculations` is how you want to display the calculations done in `reduce`:\n\n```js\nvar calculations = [\n  {\n    title: 'Amount', value: 'amountTotal',\n    template: function(val, row) {\n      return '$' + val.toFixed(2)\n    },\n    sortBy: function(row) {\n      return isNaN(row.amountTotal) ? 0 : row.amountTotal\n    }\n  }\n]\n```\n\nPlug them in and you're good to go!\n\n```js\n\n// Optional: set a default grouping with \"activeDimensions\"\nReact.render(\n  \u003cReactPivot rows={rows}\n              dimensions={dimensions}\n              reduce={reduce}\n              calculations={calculations}\n              activeDimensions={['First Name']} /\u003e,\n  document.body\n)\n```\n\nSee it all together in [example/basic.jsx](https://github.com/davidguttman/react-pivot/blob/master/example/basic.jsx)\n\n### Optional Arguments ###\nparameter | type | description | default\n--------- | ---- | ----------- | -------\ncompact | boolean | compact rows | false\ncsvDownloadFileName | string | assign name of document created when user clicks to 'Export CSV' | 'table.csv'\ncsvTemplateFormat | boolean | apply template formatting to data before csv export | false\ndefaultStyles | boolean | apply default styles from style.css | true\nhiddenColumns | array | columns that should not display | []\nnPaginateRows | number | items per page setting | 25\nsolo | object | item that should be displayed solo | null\nsortBy | string | name of column to use for record sort | null\nsortDir | string | sort direction, either 'asc' or 'desc' | 'asc'\ntableClassName | string | assign css class to table containing react-pivot elements | ''\nhideDimensionFilter | boolean | do not render the dimension filter | false\nhideRows | function | if provided, rows that are passed to the function will not render unless the return value is true | null\n\n### TODO ###\n\n* Better Pagination\n* Responsive Table\n\n## License ##\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidguttman%2Freact-pivot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidguttman%2Freact-pivot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidguttman%2Freact-pivot/lists"}