turnerniles / React Virtualized Pivot
Licence: mit
React Virtualized Pivot
Stars: ✭ 95
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Virtualized Pivot
S2
⚡️ Practical analytical Table rendering core lib.
Stars: ✭ 818 (+761.05%)
Mutual labels: table, pivot-tables
Vanillaqr.js
The galaxy's most resilient javascript QR code generator
Stars: ✭ 53 (-44.21%)
Mutual labels: table
Floatthead
Fixed <thead>. Doesn't need any custom css/html. Does what position:sticky can't
Stars: ✭ 1,193 (+1155.79%)
Mutual labels: table
Quick Pivot
Quickly format data to create a pivot table
Stars: ✭ 50 (-47.37%)
Mutual labels: pivot-tables
Tailwindcss Tables
Bootstrap styled tables for Tailwind CSS
Stars: ✭ 84 (-11.58%)
Mutual labels: table
React Ant Pro
(基于pro 1.0)基于Ant Design Pro 后台项目修改的多标签页tabs(多标签tabs、拖拽、富文本、多功能table、多选Select、React Hooks)
Stars: ✭ 64 (-32.63%)
Mutual labels: table
React Bootstrap Table2
Next Generation of react-bootstrap-table
Stars: ✭ 1,090 (+1047.37%)
Mutual labels: table
Montreal
A directory of companies, people, and projects that are Open Source and from Montréal.
Stars: ✭ 77 (-18.95%)
Mutual labels: pivot-tables
Texreg
Conversion of R Regression Output to LaTeX or HTML Tables
Stars: ✭ 85 (-10.53%)
Mutual labels: table
Subtotal
A JavaScript plugin for PivotTable.js. It renders subtotals of rows and columns with the ability to expand and collapse rows and columns
Stars: ✭ 83 (-12.63%)
Mutual labels: pivot-tables
Kingtable
Library for administrative tables that are able to build themselves, on the basis of the input data.
Stars: ✭ 60 (-36.84%)
Mutual labels: table
Angular Responsive Tables
Make your HTML tables look great on every device
Stars: ✭ 69 (-27.37%)
Mutual labels: table
react-virtualized-pivot
About
react-virtualized-pivot is a React.js pivot UI built on top of react-virtualized and 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.
Getting started
Install react-virtualized-pivot
using npm.
npm install react-virtualized-pivot --save
Usage
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';
<Pivot
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],
]}
/>
You can also use a global-friendly UMD build:
<link rel="stylesheet" href="path-to-react-virtualized-pivot/dist/umd/styles.css">
<script src="path-to-react-virtualized-pivot/dist/umd/react-virtualized-pivot.js"></script>
Props
<Pivot>
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
- A function that transforms the display value of the body cell. The function provides an object as a parameter with the following properties:
-
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'
- 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):
-
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
- A function that is fired when clicking on a grid cell. The function provides an object as a parameter with the following properties:
-
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
- A function that is fired when clicking on a column header. The function provides an object as a parameter with the following properties:
-
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
- 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:
-
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
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');
}
<Pivot
data={data}
colorPack={colorPack}
onGridCellClick={onGridCellClick}
onLeftGridCellClick={onLeftGridCellClick}
onGridHeaderCellClick={onGridHeaderCellClick}
onLeftHeaderCellClick={onLeftHeaderCellClick}
rowTotals={true}
selectedAggregationDimension={'age'}
/>
Contribute
Please contribute to the project, including this README.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].