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

• Connect to your data source
• Configure Flexmonster
• Save your configurations
• Apply a CSS theme
• Integrate with charting libraries