├── .babelrc ├── .gitattributes ├── .gitignore ├── .nvmrc ├── build ├── index.d.ts └── index.js ├── hooks ├── index.d.ts └── index.js ├── package.json ├── readme.md ├── src ├── hooks.js └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"], 3 | "plugins": [ 4 | "transform-object-rest-spread", 5 | "transform-react-jsx" 6 | ] 7 | } -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | package-lock.json 3 | .nvmrc 4 | .npmrc -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 'v8.11.2' 2 | -------------------------------------------------------------------------------- /build/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'react-flexmonster' { 2 | 3 | export class Pivot extends React.Component { 4 | flexmonster: Flexmonster.Pivot; 5 | } 6 | 7 | } 8 | 9 | -------------------------------------------------------------------------------- /build/index.js: -------------------------------------------------------------------------------- 1 | module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var u=t[r]={i:r,l:!1,exports:{}};return e[r].call(u.exports,u,u.exports,n),u.l=!0,u.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var u in e)n.d(r,u,function(t){return e[t]}.bind(null,u));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Pivot=void 0;var r=Object.assign||function(e){for(var t=1;t Flexmonster.Pivot; 5 | } 6 | 7 | export type PivotComponentProps = Partial & { 8 | ref?: React.RefObject; 9 | }; 10 | 11 | export const Pivot: React.FunctionComponent 12 | 13 | } 14 | 15 | -------------------------------------------------------------------------------- /hooks/index.js: -------------------------------------------------------------------------------- 1 | module.exports=function(e){var t={};function u(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,u),n.l=!0,n.exports}return u.m=e,u.c=t,u.d=function(e,t,r){u.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,t){if(1&t&&(e=u(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(u.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)u.d(r,n,function(t){return e[t]}.bind(null,n));return r},u.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(t,"a",t),t},u.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},u.p="",u(u.s=0)}([function(e,t,u){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t0.2%", 65 | "not dead", 66 | "not ie <= 11", 67 | "not op_mini all" 68 | ] 69 | } 70 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # React pivot table | Flexmonster Pivot Table & Charts wrapper for React 2 | [![Flexmonster Pivot Table & Charts](https://static.flexmonster.com/uploads/2023/09/08090559/react.png)](https://www.flexmonster.com?r=wrap_react) 3 | Website: [flexmonster.com](https://www.flexmonster.com?r=wrap_react) 4 | 5 | [![NPM](https://img.shields.io/npm/v/react-flexmonster)](https://www.npmjs.com/package/react-flexmonster) 6 | [![Github Stars](https://img.shields.io/github/stars/flexmonster?style=social)](https://github.com/flexmonster) [![Twitter](https://img.shields.io/twitter/follow/Flexmonster?style=social)](https://twitter.com/Flexmonster) 7 | 8 | 9 | ## Flexmonster Pivot Table & Charts 10 | 11 | Flexmonster Pivot Table & Charts is a powerful and fully customizable JavaScript component for web reporting. It is packed with all core features for data analysis and can easily become a part of your React data visualization project. The tool supports popular frameworks like React, Vue, Blazor, Angular, and [more](https://www.flexmonster.com/doc/available-tutorials-integration?r=wrap_react). Also, Flexmonster connects to any data source, including SQL and NoSQL databases, JSON and CSV files, OLAP cubes, and Elasticsearch. 12 | 13 | This package is a [Flexmonster Pivot](https://www.flexmonster.com?r=wrap_react) wrapper for [React](https://react.dev/) applications. It is also used for React-based frameworks like [Next.js](https://nextjs.org/). 14 | 15 | Table of contents: 16 | 17 | * [Integration](#integration) 18 | * [Usage](#usage) 19 | * [Sample project](#sample-project) 20 | * [Support and feedback](#support-and-feedback) 21 | * [License](#license) 22 | * [Social media](#social-media) 23 | 24 | ## Integration 25 | 26 | Flexmonster documentation provides a detailed step-by-step guide on [іntegration with React](https://www.flexmonster.com/doc/integration-with-react/?r=wrap_react) and [integration with Next.js](https://www.flexmonster.com/doc/integration-with-next-js?r=wrap_react). 27 | 28 | 29 | ## Usage 30 | 31 | The wrapper provides the `FlexmonsterReact.Pivot` component to add the pivot table to the React project. Read more about the available props and how to use them in the [the `FlexmonsterReact.Pivot` component](https://www.flexmonster.com/doc/flexmonster-pivot-component-for-react?r=wrap_react) documentation. 32 | 33 | Explore the available [methods and events](https://www.flexmonster.com/doc/using-methods-and-events-react?r=wrap_react) to learn the specifics of using and customizing Flexmonster in a React application. 34 | 35 | Refer to [Using methods and events with Next.js](https://www.flexmonster.com/doc/using-methods-and-events-next-js?r=wrap_react) documentation page if you build Next.js application. 36 | 37 | 38 | ## Sample project 39 | 40 | If you look for some reference examples, our team prepared a ready-to-use [React pivot grid sample project](https://github.com/flexmonster/pivot-react?r=wrap_react) with live demos of the most popular use cases. Visit the [usage examples documentation](https://www.flexmonster.com/doc/usage-examples-react?r=wrap_react) page to learn more about how the cases were implemented in an React project. 41 | 42 | In our documentation, you can find [a guide for the sample React application](https://www.flexmonster.com/doc/sample-react-project?r=wrap_react). There, you can learn how to run it and what's inside. 43 | 44 | The same guides you can find for the Next.js framework: 45 | - [Next.js pivot table sample project](https://github.com/flexmonster/pivot-react/tree/master/nextjs-ts?r=wrap_react) 46 | - [Usage examples documentation](https://www.flexmonster.com/doc/usage-examples-next-js?r=wrap_react) 47 | - [Guide for the sample Next.js project](https://www.flexmonster.com/doc/sample-next-js-project?r=wrap_react) 48 | 49 | 50 | ## Support and feedback 51 | 52 | In case of any issues, visit our [troubleshooting section](https://www.flexmonster.com/doc/typical-errors?r=wrap_react). You can also search among the [resolved cases](https://www.flexmonster.com/technical-support?r=wrap_react) for a solution to your problem. 53 | 54 | To share your feedback or ask questions, contact our Tech team by raising a ticket on [Flexmonster Help Center](https://www.flexmonster.com/help-center?r=wrap_react). You can also find a list of samples, technical specifications, and a user interface guide there. 55 | 56 | If you need any help with your license — fill out our [Contact form](https://www.flexmonster.com/contact-our-team?r=wrap_react), and we will get in touch with you. 57 | 58 | ## License 59 | 60 | Flexmonster React wrapper is released as an MIT-licensed (free and open-source) add-on to Flexmonster Pivot. 61 | 62 | To learn about Flexmonster Pivot licenses, visit the [Flexmonster licensing page](https://www.flexmonster.com/pivot-table-editions-and-pricing?r=wrap_react). 63 | If you want to test our product, we provide a 30-day free trial. 64 | 65 | ## Social media 66 | 67 | Follow us on social media and stay updated on our development process! 68 | 69 | [![LinkedIn](https://img.shields.io/badge/LinkedIn-blue?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/company/flexmonster) [![YouTube](https://img.shields.io/badge/YouTube-red?style=for-the-badge&logo=youtube&logoColor=white)](https://youtube.com/user/FlexMonsterPivot) [![Twitter](https://img.shields.io/badge/Twitter-blue?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/flexmonster) 70 | -------------------------------------------------------------------------------- /src/hooks.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React, { useEffect, useRef, useImperativeHandle } from "react"; 3 | import Flexmonster from "flexmonster"; 4 | 5 | export function Pivot(props, ref) { 6 | const flexmonsterRef = useRef() 7 | 8 | let flexmonster = null; 9 | useEffect(() => { 10 | flexmonster = new Flexmonster({ 11 | ...props, 12 | container: flexmonsterRef.current 13 | }); 14 | 15 | return () => flexmonster.dispose() 16 | }, []) 17 | 18 | useImperativeHandle(ref, () => ({ 19 | flexmonster: () => { 20 | return flexmonster; 21 | } 22 | })); 23 | 24 | Pivot.propTypes = { 25 | afterchartdraw: PropTypes.func, 26 | aftergriddraw: PropTypes.func, 27 | beforegriddraw: PropTypes.func, 28 | beforetoolbarcreated: PropTypes.func, 29 | cellclick: PropTypes.func, 30 | celldoubleclick: PropTypes.func, 31 | chartclick: PropTypes.func, 32 | componentFolder: PropTypes.string, 33 | customizeAPIRequest: PropTypes.func, 34 | customizeCell: PropTypes.func, 35 | customizeChartElement: PropTypes.func, 36 | customizeContextMenu: PropTypes.func, 37 | datachanged: PropTypes.func, 38 | dataerror: PropTypes.func, 39 | datafilecancelled: PropTypes.func, 40 | dataloaded: PropTypes.func, 41 | drillthroughclose: PropTypes.func, 42 | drillthroughopen: PropTypes.func, 43 | fieldslistclose: PropTypes.func, 44 | fieldslistopen: PropTypes.func, 45 | filterclose: PropTypes.func, 46 | filteropen: PropTypes.func, 47 | fullscreen: PropTypes.func, 48 | global: PropTypes.object, 49 | height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 50 | licenseKey: PropTypes.string, 51 | loadingdata: PropTypes.func, 52 | loadinglocalization: PropTypes.func, 53 | loadingolapstructure: PropTypes.func, 54 | loadingreportfile: PropTypes.func, 55 | localizationerror: PropTypes.func, 56 | localizationloaded: PropTypes.func, 57 | olapstructureerror: PropTypes.func, 58 | olapstructureloaded: PropTypes.func, 59 | openingreportfile: PropTypes.func, 60 | querycomplete: PropTypes.func, 61 | queryerror: PropTypes.func, 62 | ready: PropTypes.func, 63 | report: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), 64 | reportchange: PropTypes.func, 65 | reportcomplete: PropTypes.func, 66 | reportfilecancelled: PropTypes.func, 67 | reportfileerror: PropTypes.func, 68 | reportfileloaded: PropTypes.func, 69 | runningquery: PropTypes.func, 70 | sortFieldsList: PropTypes.func, 71 | toolbar: PropTypes.bool, 72 | unauthorizederror: PropTypes.func, 73 | update: PropTypes.func, 74 | width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 75 | } 76 | 77 | return
Pivot
78 | } 79 | 80 | export default Pivot = React.forwardRef(Pivot); 81 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React from "react"; 3 | import Flexmonster from "flexmonster"; 4 | 5 | export class Pivot extends React.Component { 6 | 7 | constructor(props) { 8 | super(props); 9 | // create a ref to store the DOM element 10 | this.DOMNodeRef = React.createRef(); 11 | } 12 | 13 | componentDidMount() { 14 | const DOMNode = this.DOMNodeRef.current; 15 | this.flexmonster = new Flexmonster({ 16 | ...this.props, 17 | container: DOMNode 18 | }); 19 | } 20 | 21 | shouldComponentUpdate() { 22 | return false; 23 | } 24 | 25 | componentWillUnmount() { 26 | this.flexmonster.dispose(); 27 | } 28 | 29 | render() { 30 | return
Pivot
; 31 | } 32 | } 33 | 34 | Pivot.propTypes = { 35 | afterchartdraw: PropTypes.func, 36 | aftergriddraw: PropTypes.func, 37 | beforegriddraw: PropTypes.func, 38 | beforetoolbarcreated: PropTypes.func, 39 | cellclick: PropTypes.func, 40 | celldoubleclick: PropTypes.func, 41 | chartclick: PropTypes.func, 42 | componentFolder: PropTypes.string, 43 | customizeAPIRequest: PropTypes.func, 44 | customizeCell: PropTypes.func, 45 | customizeChartElement: PropTypes.func, 46 | customizeContextMenu: PropTypes.func, 47 | datachanged: PropTypes.func, 48 | dataerror: PropTypes.func, 49 | datafilecancelled: PropTypes.func, 50 | dataloaded: PropTypes.func, 51 | drillthroughclose: PropTypes.func, 52 | drillthroughopen: PropTypes.func, 53 | fieldslistclose: PropTypes.func, 54 | fieldslistopen: PropTypes.func, 55 | filterclose: PropTypes.func, 56 | filteropen: PropTypes.func, 57 | fullscreen: PropTypes.func, 58 | global: PropTypes.object, 59 | height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 60 | licenseKey: PropTypes.string, 61 | loadingdata: PropTypes.func, 62 | loadinglocalization: PropTypes.func, 63 | loadingolapstructure: PropTypes.func, 64 | loadingreportfile: PropTypes.func, 65 | localizationerror: PropTypes.func, 66 | localizationloaded: PropTypes.func, 67 | olapstructureerror: PropTypes.func, 68 | olapstructureloaded: PropTypes.func, 69 | openingreportfile: PropTypes.func, 70 | querycomplete: PropTypes.func, 71 | queryerror: PropTypes.func, 72 | ready: PropTypes.func, 73 | report: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), 74 | reportchange: PropTypes.func, 75 | reportcomplete: PropTypes.func, 76 | reportfilecancelled: PropTypes.func, 77 | reportfileerror: PropTypes.func, 78 | reportfileloaded: PropTypes.func, 79 | runningquery: PropTypes.func, 80 | sortFieldsList: PropTypes.func, 81 | toolbar: PropTypes.bool, 82 | unauthorizederror: PropTypes.func, 83 | update: PropTypes.func, 84 | width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 85 | accessibility: PropTypes.object, 86 | } 87 | 88 | export default Pivot; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 2 | var path = require('path'); 3 | module.exports = [{ 4 | entry: './src/index.js', 5 | output: { 6 | path: path.resolve(__dirname, 'build'), 7 | filename: 'index.js', 8 | libraryTarget: 'commonjs2' // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide. 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.js$/, 14 | include: path.resolve(__dirname, 'src'), 15 | exclude: /(node_modules|bower_components|build)/, 16 | use: { 17 | loader: 'babel-loader', 18 | options: { 19 | presets: ['react'] 20 | } 21 | } 22 | } 23 | ] 24 | }, 25 | externals: { 26 | 'react': 'commonjs react', // this line is just to use the React dependency of our parent-testing-project instead of using our own React 27 | 'react-dom': 'commonjs react-dom',// this line is just to use the React-Dom dependency of our parent-testing-project instead of using our own React-Dom. 28 | 'flexmonster': 'commonjs flexmonster', 29 | 'prop-types': 'commonjs prop-types' 30 | } 31 | }, 32 | { 33 | entry: './src/hooks.js', 34 | output: { 35 | path: path.resolve(__dirname, 'hooks'), 36 | filename: 'index.js', 37 | libraryTarget: 'commonjs2' // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide. 38 | }, 39 | module: { 40 | rules: [ 41 | { 42 | test: /\.js$/, 43 | include: path.resolve(__dirname, 'src'), 44 | exclude: /(node_modules|bower_components|build)/, 45 | use: { 46 | loader: 'babel-loader', 47 | options: { 48 | presets: ['react'] 49 | } 50 | } 51 | } 52 | ] 53 | }, 54 | externals: { 55 | 'react': 'commonjs react', // this line is just to use the React dependency of our parent-testing-project instead of using our own React 56 | //'react-dom': 'commonjs react-dom',// this line is just to use the React-Dom dependency of our parent-testing-project instead of using our own React-Dom. 57 | 'flexmonster': 'commonjs flexmonster', 58 | 'prop-types': 'commonjs prop-types' 59 | } 60 | }]; --------------------------------------------------------------------------------