Integration with Svelte

Follow this tutorial to integrate Flexmonster with the Svelte framework. Watch the tutorial in the video format: Svelte pivot table guide.

This guide demonstrates the TypeScript-based integration. To use vanilla JavaScript, follow the same steps without type declarations and lang="ts" in the <script> tag.

Flexmonster has a 30-day free trial, with no registration required to start the evaluation. You can also test the component using our sample Svelte project.

Prerequisites

• Node.js 14.0 or later

Step 1. (optional) Create a Svelte project

Skip this step if you already have a Svelte project.

Сreate a Svelte project by running the following commands in the console:

npx sv create fm-svelte-app
cd fm-svelte-app

You will be prompted to choose configurations for the project. For simplicity, choose the default options for all the features.

Step 2. Get Flexmonster

To get Flexmonster for Svelte, run the following command inside your project:

npm install svelte-flexmonster --save-exact

Note We recommend installing Flexmonster with the --save-exact flag to avoid unexpected component updates.

Step 3. Embed Flexmonster

Step 3.1. Import Flexmonster in the page where you need the pivot table (e.g., src/routes/+page.svelte):

<script lang="ts">
  import { Flexmonster } from "svelte-flexmonster";
</script>

Step 3.2. If your project has a global stylesheet (e.g., src/styles.css), import the Flexmonster styles there:

@import "flexmonster/flexmonster.min.css";

Alternatively, you can add Flexmonster styles to the <script> section of your page (e.g., src/routes/+page.svelte):

<script lang="ts">
  import { Flexmonster } from "svelte-flexmonster";
  import "flexmonster/flexmonster.css";
</script>

Step 3.3. Use the <Flexmonster> tag to add a Flexmonster instance to the chosen component (e.g., src/routes/+page.svelte):

<script lang="ts">
  import { Flexmonster } from "svelte-flexmonster";
</script>

<div>
  <Flexmonster
    toolbar
  />
</div>

Step 4. Run the project

Run your project from the console:

npm run dev

To see the result, open http://localhost:5173/ in your browser. To shut down the project from the console, press Ctrl + C (Control + C on macOS).

You can also watch our video tutorial that covers the integration process:

Usage examples

We prepared the following examples of Flexmonster usage:

• Creating the pivot table
• Handling events
• Using API calls
• Updating data
• Customizing the Toolbar
• Customizing the grid
• Integrating with Highcharts
• Integrating with amCharts

Troubleshooting

If you run into any issues during the integration, visit our troubleshooting page. 

Next steps

• Use methods and events
• Read about the <Flexmonster> component
• Connect to your data source
• Configure Flexmonster