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.
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.
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.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>
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:
We prepared the following examples of Flexmonster usage:
