Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Pivot
✓ import { Pivot } from 'vue-flexmonster/vue3';
✗ import Pivot from 'vue-flexmonster'; // For Vue 3, this path is incorrect
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.
Flexmonster CSS
✓ import 'flexmonster/flexmonster.css';
✗ /* CSS omitted */
The core Flexmonster CSS must be explicitly imported for the pivot table to render correctly with its styling. This is a common oversight.
Flexmonster global types
✓ /// <reference types="flexmonster" />
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`.
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.
<script setup lang="ts">
import { ref } from 'vue';
import { Pivot } from 'vue-flexmonster/vue3';
import 'flexmonster/flexmonster.css'; // Essential for styling
interface SalesData {
Category: string;
Price: number;
Quantity: number;
}
const report = ref<Flexmonster.Report> ({
dataSource: {
data: [
{ Category: "Accessories", Price: 100, Quantity: 10 },
{ Category: "Bikes", Price: 200, Quantity: 5 },
{ Category: "Components", Price: 50, Quantity: 20 },
{ Category: "Accessories", Price: 120, Quantity: 8 },
{ Category: "Bikes", Price: 250, Quantity: 3 }
] as SalesData[]
},
slice: {
rows: [{ uniqueName: "Category" }],
columns: [{ uniqueName: "[Measures]" }],
measures: [
{ uniqueName: "Price", aggregation: "sum" },
{ uniqueName: "Quantity", aggregation: "sum" }
]
}
});
const flexmonsterRef = ref<InstanceType<typeof Pivot> | null>(null);
// Example: Customize cell appearance based on data
const customizeCell = (cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) => {
if (data.isGrandTotalRow && data.measure && data.measure.uniqueName === "Price.sum" && data.value && +data.value > 1000) {
cell.addClass("high-total-cell");
}
};
// Example: Access the Flexmonster API after the component is ready
const onReady = () => {
if (flexmonsterRef.value && flexmonsterRef.value.flexmonster) {
console.log("Flexmonster instance is ready:", flexmonsterRef.value.flexmonster);
// You can now interact with the Flexmonster API, e.g., to update data
// flexmonsterRef.value.flexmonster.updateData({ data: [{ Category: 'Electronics', Price: 300, Quantity: 2 }] });
}
};
</script>
<template>
<div class="flexmonster-container">
<h1>Product Sales Overview</h1>
<Pivot
ref="flexmonsterRef"
:report="report"
:customizeCellFunction="customizeCell"
:licenseKey="process.env.VUE_APP_FLEXMONSTER_LICENSE ?? ''" <!-- Use environment variable for license -->
@ready="onReady"
/>
</div>
</template>
<style>
.flexmonster-container {
font-family: Arial, sans-serif;
padding: 20px;
}
.high-total-cell {
background-color: #ffe0e0 !important;
font-weight: bold;
color: #c00;
}
/* Basic Flexmonster theme adjustments (optional) */
.fm-ui-element {
font-size: 14px;
}
</style>
Errors
Common errors & fixes
Cannot find module 'flexmonster' or its corresponding type declarations.
The core `flexmonster` library, a peer dependency, is not installed or TypeScript cannot find its declarations.
fixRun `npm install flexmonster` (or `yarn add flexmonster`). For TypeScript, ensure `flexmonster` is in `node_modules` and your `tsconfig.json` includes `node_modules/@types`.
Failed to resolve component: Pivot
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.
fixVerify 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 />`. Property 'flexmonster' does not exist on type 'InstanceType<typeof Pivot>' or 'this.$refs.pivot'.
Attempting to access the underlying Flexmonster API instance without proper typing or ensuring the component reference is available and the instance has initialized.
fixIn 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.
TypeError: Cannot read properties of undefined (reading 'flexmonster') when trying to call API methods.
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.
fixAlways 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.
Audit
Dependencies
flexmonsterrequiredCore Flexmonster Pivot Table and Charts library, which this package wraps.