https://github.com/turnerniles/react-virtualized-pivot
React Virtualized Pivot
https://github.com/turnerniles/react-virtualized-pivot
pivot pivot-tables react react-virtualized table
Last synced: about 2 months ago
JSON representation
React Virtualized Pivot
- Host: GitHub
- URL: https://github.com/turnerniles/react-virtualized-pivot
- Owner: turnerniles
- License: mit
- Created: 2017-03-06T04:48:23.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-07-12T19:22:02.000Z (over 7 years ago)
- Last Synced: 2025-10-01T23:59:07.995Z (6 months ago)
- Topics: pivot, pivot-tables, react, react-virtualized, table
- Language: JavaScript
- Homepage: https://turnerniles.github.io/react-virtualized-pivot/
- Size: 9.02 MB
- Stars: 109
- Watchers: 8
- Forks: 19
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
react-virtualized-pivot
============
## About
react-virtualized-pivot is a React.js pivot UI built on top of [react-virtualized](https://github.com/bvaughn/react-virtualized) and [quick-pivot](https://github.com/pat310/quick-pivot).
## Demo
https://turnerniles.github.io/react-virtualized-pivot/
The demo uses ~24.7mb uncompressed .csv, 269,372 rows by 9 columns (2,424,348 cells) of 2007-2012 Declined Loan data provided by [Lending Club](https://www.lendingclub.com/info/download-data.action).
## Getting started
Install `react-virtualized-pivot` using npm.
```shell
npm install react-virtualized-pivot --save
```
### Usage
```js
import Pivot from 'react-virtualized-pivot';
// Be sure to include styles at some point, probably during your bootstrapping
import 'react-virtualized-pivot/dist/commonjs/styles.css';
```
You can also use a global-friendly UMD build:
```html
```
## Props
`` accepts the following props:
* `data` (**required**)
* An array of arrays (first array will be your column headers)
* An array of objects (keys of the object are your column headers)
* `bodyCellValueTransformation`
* A function that transforms the display value of the body cell. The function provides an object as a parameter with the following properties:
* rowIndex: the row index of the cell
* columnIndex: the column index of the cell
* value: the original value of the cell
* `colTotals`
* A boolean that when false will not display column totals in the table. Column totals are turned on by default.
* `colorPack`
* An object with components to adjust colors of as keys and the corresponding color as a string. The following components are available for color selection (shown with their default selection):
* bodyGridBackground: '#fff'
* bodyGridText:'#000'
* columnResizer: '#e0e0e0'
* evenRowBackground: '#fff'
* gridBorders: '#e0e0e0'
* headerGridBackground:'#fafafa'
* headerGridText:'#000'
* icons: '#ccc'
* leftSideGridBackground: '#fff'
* leftSideGridText:'#000'
* leftHeaderCellBackground:'#fafafa'
* leftHeaderCellText: '#000'
* oddRowBackground: '#fafafa'
* selectorContainerTitleBackground: '#fafafa'
* selectorContainerTitleText: '#000'
* sortableContainerBackground: '#fff'
* sortableContainerBorderColor: '#ccc'
* sortableFieldBackground: '#fafafa'
* sortableFieldText: '#000'
* `onGridCellClick`
* A function that is fired when clicking on a grid cell. The function provides an object as a parameter with the following properties:
* rowIndex: the row index of the cell clicked
* columnIndex: the column index of the cell clicked
* children: all the children values of the cell clicked
* childrenData: all the children data points that make up the cell clicked
* rowHeaders: all the parent row headers above the current clicked cell and at the current cell
* columnHeaders: all the column headers at the clicked cell
* `onGridHeaderCellClick`
* A function that is fired when clicking on a column header. The function provides an object as a parameter with the following properties:
* rowIndex: the row index of the column header clicked
* columnIndex: the column index of the column header clicked
* `onLeftGridCellClick`
* A function that is fired when clicking on a row header (the left hand column). The function provides an object as a parameter with the following properties:
* rowIndex: the row index of the row header cell clicked
* columnIndex: the column index of the row header cell clicked
* children: all the children values of the row header cell clicked
* childrenData: all the children data points that make up the row header cell clicked
* rowHeaders: all the parent row headers above the current clicked row header cell and at the current cell
* `onLeftHeaderCellClick`
* A function that is fired when clicking on the top left most cell (above the row headers and to the left of the column headers)
* `rowTotals`
* A boolean that when false will not display row totals in the table. Totals are turned on by default.
* `selectedAggregationDimension`
* Sets the default aggregation dimension in the Drawer.
## Example usage with optional props
```js
import React from 'react';
import Pivot from 'react-virtualized-pivot';
import 'react-virtualized-pivot/dist/es/styles.css';
const data = [
['name', 'gender', 'house', 'age'],
['Jon', 'm', 'Stark', 14],
['Arya', 'f', 'Stark', 10],
['Cersei', 'f', 'Baratheon', 38],
['Tywin', 'm', 'Lannister', 67],
['Tyrion', 'm', 'Lannister', 34],
['Joffrey', 'm', 'Baratheon', 18],
['Bran', 'm', 'Stark', 8],
['Jaime', 'm', 'Lannister', 32],
['Sansa', 'f', 'Stark', 12],
];
const colorPack = {
columnResizer: '#e0e0e0',
sortableFieldBackground: '#fafafa',
sortableFieldText: '#000',
sortableContainerBackground: '#fff',
sortableContainerBorderColor: '#ccc',
selectorContainerTitleBackground: '#fafafa',
selectorContainerTitleText: '#000',
leftHeaderCellBackground: '#fafafa',
leftHeaderCellText: '#000',
headerGridBackground: '#fafafa',
headerGridText: '#000',
leftSideGridBackground: '#fff',
leftSideGridText: '#000',
bodyGridBackground: '#fff',
bodyGridText: '#000',
evenRowBackground: '#fff',
oddRowBackground: '#fafafa',
gridBorders: '#e0e0e0',
icons: '#ccc',
};
function bodyCellValueTransformation({value}) {
if (value > 10) return 'i am greater than 10';
return value;
}
function onGridCellClick({rowIndex, columnIndex, children, childrenData, rowHeaders, columnHeaders}) {
console.log('clicked on body cell');
console.log('rowIndex', rowIndex);
console.log('columnIndex', columnIndex);
console.log('children', children);
console.log('childrenData', childrenData);
console.log('rowHeaders', rowHeaders);
console.log('columnHeaders', columnHeaders);
}
function onLeftGridCellClick({rowIndex, columnIndex, children, childrenData, rowHeaders, columnHeaders}) {
console.log('clicked on a left row header');
console.log('rowIndex', rowIndex);
console.log('columnIndex', columnIndex);
console.log('children', children);
console.log('childrenData', childrenData);
console.log('rowHeaders', rowHeaders);
console.log('columnHeaders', columnHeaders);
}
function onGridHeaderCellClick({rowIndex, columnIndex}) {
console.log('clicked on column header');
console.log('rowIndex', rowIndex);
console.log('columnIndex', columnIndex);
}
function onLeftHeaderCellClick() {
console.log('clicked on the top left corner cell');
}
```
## Contribute
Please contribute to the project, including this README.