{"id":15270,"library":"vue-flexmonster","title":"Vue Flexmonster Pivot Table & Charts","description":"The `vue-flexmonster` package provides a robust wrapper for integrating the Flexmonster Pivot Table & Charts component into Vue 2 and Vue 3 applications. Flexmonster is a highly customizable JavaScript component designed for web reporting and data analysis, supporting a wide array of data sources including SQL/NoSQL databases, JSON, CSV, OLAP cubes, and Elasticsearch. The current stable version, 2.9.127, aligns with the core Flexmonster library. The Flexmonster ecosystem typically releases minor versions with bug fixes and enhancements biweekly, alongside major versions introducing significant features once or twice a year. Key differentiators include its extensive feature set for data manipulation, comprehensive data source connectivity, and dedicated, well-documented integrations for both Vue 2 and Vue 3, supported by responsive technical assistance.","status":"active","version":"2.9.127","language":"javascript","source_language":"en","source_url":"https://github.com/flexmonster/vue-flexmonster","tags":["javascript","pivot","html5","grid","table","pivottable","pivotgrid","pivotchart","vue"],"install":[{"cmd":"npm install vue-flexmonster","lang":"bash","label":"npm"},{"cmd":"yarn add vue-flexmonster","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-flexmonster","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core Flexmonster Pivot Table and Charts library, which this package wraps.","package":"flexmonster","optional":false}],"imports":[{"note":"For Vue 3 projects, import the component specifically from `vue-flexmonster/vue3`. Vue 2 projects should use `import Pivot from 'vue-flexmonster';`. There is no default export for the component.","wrong":"import Pivot from 'vue-flexmonster'; // For Vue 3, this path is incorrect","symbol":"Pivot","correct":"import { Pivot } from 'vue-flexmonster/vue3';"},{"note":"The core Flexmonster CSS must be explicitly imported for the pivot table to render correctly with its styling. This is a common oversight.","wrong":"/* CSS omitted */","symbol":"Flexmonster CSS","correct":"import 'flexmonster/flexmonster.css';"},{"note":"While `flexmonster` is a peer dependency, its global types (e.g., `Flexmonster.Report`, `Flexmonster.CellBuilder`) are often consumed directly by TypeScript. Ensure the `flexmonster` package is installed to provide these types. For Vue 3 with TypeScript, you may also need `declare module 'vue-flexmonster/vue3'` in your `env.d.ts` or `shims-vue.d.ts`.","symbol":"Flexmonster global types","correct":"/// <reference types=\"flexmonster\" />"}],"quickstart":{"code":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Pivot } from 'vue-flexmonster/vue3';\nimport 'flexmonster/flexmonster.css'; // Essential for styling\n\ninterface SalesData {\n  Category: string;\n  Price: number;\n  Quantity: number;\n}\n\nconst report = ref<Flexmonster.Report> ({\n  dataSource: {\n    data: [\n      { Category: \"Accessories\", Price: 100, Quantity: 10 },\n      { Category: \"Bikes\", Price: 200, Quantity: 5 },\n      { Category: \"Components\", Price: 50, Quantity: 20 },\n      { Category: \"Accessories\", Price: 120, Quantity: 8 },\n      { Category: \"Bikes\", Price: 250, Quantity: 3 }\n    ] as SalesData[]\n  },\n  slice: {\n    rows: [{ uniqueName: \"Category\" }],\n    columns: [{ uniqueName: \"[Measures]\" }],\n    measures: [\n      { uniqueName: \"Price\", aggregation: \"sum\" },\n      { uniqueName: \"Quantity\", aggregation: \"sum\" }\n    ]\n  }\n});\n\nconst flexmonsterRef = ref<InstanceType<typeof Pivot> | null>(null);\n\n// Example: Customize cell appearance based on data\nconst customizeCell = (cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) => {\n  if (data.isGrandTotalRow && data.measure && data.measure.uniqueName === \"Price.sum\" && data.value && +data.value > 1000) {\n    cell.addClass(\"high-total-cell\");\n  }\n};\n\n// Example: Access the Flexmonster API after the component is ready\nconst onReady = () => {\n  if (flexmonsterRef.value && flexmonsterRef.value.flexmonster) {\n    console.log(\"Flexmonster instance is ready:\", flexmonsterRef.value.flexmonster);\n    // You can now interact with the Flexmonster API, e.g., to update data\n    // flexmonsterRef.value.flexmonster.updateData({ data: [{ Category: 'Electronics', Price: 300, Quantity: 2 }] });\n  }\n};\n</script>\n\n<template>\n  <div class=\"flexmonster-container\">\n    <h1>Product Sales Overview</h1>\n    <Pivot\n      ref=\"flexmonsterRef\"\n      :report=\"report\"\n      :customizeCellFunction=\"customizeCell\"\n      :licenseKey=\"process.env.VUE_APP_FLEXMONSTER_LICENSE ?? ''\" <!-- Use environment variable for license -->\n      @ready=\"onReady\"\n    />\n  </div>\n</template>\n\n<style>\n.flexmonster-container {\n  font-family: Arial, sans-serif;\n  padding: 20px;\n}\n.high-total-cell {\n  background-color: #ffe0e0 !important;\n  font-weight: bold;\n  color: #c00;\n}\n/* Basic Flexmonster theme adjustments (optional) */\n.fm-ui-element {\n  font-size: 14px;\n}\n</style>","lang":"typescript","description":"Demonstrates how to embed the Flexmonster Pivot component in a Vue 3 application using the Composition API. It initializes with inline JSON data, defines a basic slice, customizes cell styling based on data values, and shows how to access the underlying Flexmonster API."},"warnings":[{"fix":"Consult the official `flexmonster` and `vue-flexmonster` migration guides for each major version upgrade to identify and implement necessary code adjustments.","message":"Major version updates of the core `flexmonster` library (e.g., Flexmonster 3.0) introduce significant architectural changes and breaking changes. As `vue-flexmonster` is a wrapper, it will track these changes, requiring updates to your application code and configuration.","severity":"breaking","affected_versions":">=2.9.0"},{"fix":"For Vue 3, use `import { Pivot } from 'vue-flexmonster/vue3';`. For Vue 2, use `import { Pivot } from 'vue-flexmonster';`.","message":"Vue 2 and Vue 3 projects require different import paths for the `Pivot` component. Using the incorrect path will result in a 'Failed to resolve component' error.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure `npm install flexmonster` or `yarn add flexmonster` is run in your project, maintaining a version compatible with your `vue-flexmonster` installation (as specified in peerDependencies).","message":"The `flexmonster` core library is a peer dependency and must be installed alongside `vue-flexmonster`. Without it, the component cannot initialize and will throw errors related to missing modules.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Add `import 'flexmonster/flexmonster.css';` to your main application entry point or the component where `Pivot` is used.","message":"The Flexmonster CSS (`flexmonster/flexmonster.css`) is not automatically included and must be explicitly imported into your application. Without it, the pivot table will render unstyled.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Add `declare module 'vue-flexmonster/vue3'` (for Vue 3) or `declare module 'vue-flexmonster'` (for Vue 2) to your `env.d.ts` or `shims-vue.d.ts` file.","message":"For TypeScript projects, if you encounter 'Cannot find module 'vue-flexmonster/vue3' (or 'vue-flexmonster') errors, you likely need to declare the module in your environment typings.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Run `npm install flexmonster` (or `yarn add flexmonster`). For TypeScript, ensure `flexmonster` is in `node_modules` and your `tsconfig.json` includes `node_modules/@types`.","cause":"The core `flexmonster` library, a peer dependency, is not installed or TypeScript cannot find its declarations.","error":"Cannot find module 'flexmonster' or its corresponding type declarations."},{"fix":"Verify the import path: `import { Pivot } from 'vue-flexmonster/vue3';` for Vue 3, and `import { Pivot } from 'vue-flexmonster';` for Vue 2. Ensure the component is used in your template as `<Pivot />`.","cause":"The `Pivot` component was imported from the wrong path (e.g., using `vue-flexmonster` for a Vue 3 project, or vice versa) or not registered correctly.","error":"Failed to resolve component: Pivot"},{"fix":"In Vue 3, use `ref<InstanceType<typeof Pivot> | null>(null)` and check `flexmonsterRef.value?.flexmonster`. In Vue 2, use `this.$refs.pivot?.flexmonster` and ensure `this.$refs.pivot` is properly defined on the component.","cause":"Attempting to access the underlying Flexmonster API instance without proper typing or ensuring the component reference is available and the instance has initialized.","error":"Property 'flexmonster' does not exist on type 'InstanceType<typeof Pivot>' or 'this.$refs.pivot'."},{"fix":"Always interact with the Flexmonster API methods only after the `ready` event has been emitted by the `<Pivot>` component, which guarantees the instance is fully initialized. Use the `@ready` event handler to safely access the API.","cause":"The Flexmonster instance (`flexmonsterRef.value.flexmonster` or `this.$refs.pivot.flexmonster`) is not yet ready or the `ready` event has not fired when an API call is attempted.","error":"TypeError: Cannot read properties of undefined (reading 'flexmonster') when trying to call API methods."}],"ecosystem":"npm"}