Sample Svelte project

This guide will help you run a sample Svelte project from GitHub. It is a ready-to-use application with several live Flexmonster demos. Get the sample project to try out Flexmonster.

To integrate Flexmonster into an existing Svelte project, see integration with Svelte.

Prerequisites

Node.js 14.0 or later

Step 1. Get the sample Svelte project

To get our sample project, download it as ZIP or clone it with the following commands:

git clone https://github.com/flexmonster/pivot-svelte.git
cd pivot-svelte

Step 2. Install the dependencies

Install the npm dependencies described in package.json:

npm install

Step 3. Run the project

Run the sample project from the console:

npm start

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

Step 4. Check out the project’s structure

Take a look at the files specific to our sample project:

src/components/ — menus and toggle elements used in the sample project.
src/routes/ — demos that cover different aspects of Flexmonster usage in Svelte:
- Creating the pivot table (pivot-table-demo/+page.svelte)
- Handling events (handling-events/+page.svelte)
- Using API calls (using-api-calls/+page.svelte)
- Updating data at runtime (updating-data/+page.svelte)
- Customizing the Toolbar (customizing-toolbar/+page.svelte)
- Customizing the grid (customizing-grid/+page.svelte)
- Integrating with Highcharts (with-highcharts/+page.svelte)
- Integrating with amCharts (with-amcharts/+page.svelte — amCharts 5; with-amcharts-4/+page.svelte — amCharts 4)

Learn more about how these demos work: Usage examples.

Next steps

Integrate into an existing Svelte project or adjust the sample project to your needs: