Combining multiple Bryntum products

Thin packages overview

Bryntum products share the same data model and can be combined to provide different views of the underlying data.

When combining multiple Bryntum products in a single application using JavaScript, you should use thin npm packages. The main difference between thin packages and regular packages is that thin only contain product specific code and styling, while regular contain code and styling for all underlying products (for example Scheduler includes Scheduler + Grid + Core). Thin packages are also valid for building a single product application.

The Bryntum Grid bundle was loaded multiple times by the application.

Thin packages list

Bryntum's npm repository contains thin packages for combining multiple Bryntum products in one application.

Thin limited trial library packages:

Example for @bryntum/grid-thin-trial package:

npm install @bryntum/grid-thin@npm:@bryntum/[email protected]

Alternatively, you can directly add entries to the "dependencies" section of the package.json project file as follows:

"dependencies": {
  "@bryntum/grid-thin": "npm:@bryntum/[email protected]",
}

Thin licensed library packages:

Thin JavaScript wrapper packages:

Package dependencies

Each package contains code related to the specific product only and requires installing dependency packages for all underlying products. This is not done automatically to give you full control over the installed packages.

List of required dependencies used in package.json for JavaScript application:

{
  "dependencies": {
    "@bryntum/core-thin": "7.2.0-alpha-1",
    "@bryntum/grid-thin": "7.2.0-alpha-1"
  }
}

Product styling

List of required styles for JavaScript application style.css/scss:

/* FontAwesome is used for icons */
@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
@import "@bryntum/core-thin/fontawesome/css/solid.css";
/* Structural CSS */
@import '@bryntum/core-thin/core.css';
@import '@bryntum/grid-thin/grid.css';
/* Theme */
@import '@bryntum/core-thin/svalbard-light.css';

Product template

Example of configuring product template for JavaScript application main.js:

import { Grid } from '@bryntum/grid-thin';
import './style.css';

const grid = new Grid({
    appendTo : 'app',
    columns  : [
        { field : 'name', text : 'Name', width : 200 },
        { field : 'city', text : 'City', flex : 1 }
    ],
    data : [
        { name : 'Dan Stevenson', city : 'Los Angeles' },
        { name : 'Talisha Babin', city : 'Paris' }
    ]
});

Non-npm packages

If you're not using npm, you can use module or UMD bundles.

Thin module bundle

Similar to npm packages, thin module bundles contain code for one specific product, which means that it has a much smaller size, but you have to use multiple bundles to get anything working (Grid for example has to pull in the Core bundle to work). Here's an example:

// Import 3 classes separately from different thin bundles
import { Store } from 'core.module.thin.js';
import { Grid } from 'grid.module.thin.js';
import { Scheduler } from 'scheduler.module.thin.js';

UMD bundle

The umd bundle (scheduler.umd.js importable as a good old script tag, exposes all classes globally) is to be considered legacy. Using it is not something we recommend unless your environment prevents you from using a more modern bundle. It will not allow you to combine multiple products very well. Below you find a snippet here for completeness:

<!-- Script tag in your html file -->
<script src="scheduler.umd.js"></script>

// No imports needed, classes are exposed to window.bryntum.scheduler
const { Store, Grid, Scheduler } = window.bryntum.scheduler;

Combining products

You can combine multiple products and have them on the same page. For example, if you want to combine Grid and Scheduler, you can have them like the following:

import { Grid } from "@bryntum/grid-thin";
import { Scheduler } from "@bryntum/scheduler-thin";
import "./style.css"; // import styles

const grid = new Grid({
  appendTo: "app",
  columns: [
    { field: "name", text: "Name", width: 200 },
    { field: "city", text: "City", flex: 1 },
  ],
  data: [
    { name: "Dan Stevenson", city: "Los Angeles" },
    { name: "Talisha Babin", city: "Paris" },
  ],
});

const scheduler = new Scheduler({
  appendTo: "app",
  startDate: new Date(2022, 0, 1),
  endDate: new Date(2022, 0, 10),
  columns: [{ text: "Name", field: "name", width: 160 }],
  resources: [
    { id: 1, name: "Dan Stevenson" },
    { id: 2, name: "Talisha Babin" },
  ],
  events: [
    { resourceId: 1, startDate: "2022-01-01", endDate: "2022-01-10" },
    { resourceId: 2, startDate: "2022-01-02", endDate: "2022-01-09" },
  ],
});