Integration with Svelte

Follow this tutorial to integrate Flexmonster with the Svelte framework.

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).

Usage examples

The Svelte sample project contains several examples of Flexmonster Pivot usage and customization:

Pivot table demo shows how to define the report, toolbar, and other initialization parameters in the pivot grid for Svelte.
Handling events demonstrates how to subscribe to events and unsubscribe from them.
Using API calls illustrates how to use Flexmonster's methods.
Updating data is an example of refreshing data at runtime using the updateData() method.
Customizing the Toolbar shows how to customize the Toolbar.
Customizing the grid illustrates how to customize the pivot table using the customizeCell() API call.
Integration with Highcharts demonstrates how to integrate with the Highcharts charting library.
Integration with amCharts is an example of integration with the amCharts charting library.

You can try all of these examples right from the project’s starting page.

Changes to Flexmonster Software License Agreement