Combining multiple Bryntum products

Thin packages overview

Bryntum's 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 React, you should use thin npm packages. This avoids runtime errors and also reduces the amount of code and CSS that has to be downloaded.

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 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 React wrapper packages:

Package dependencies

Each package contains code related to the specific product only and requires installing a 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 React application:

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

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

Product configuration

Importing product configuration for React application app.config.tsx:

import { BryntumGridProps } from '@bryntum/grid-react-thin';

const gridProps : BryntumGridProps = {
    // Grid configuration
};

Product styling

List of required styles for React application App.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 localization

For a complete localization information please check localization guide.

Localization can be done using these two methods:

Using source code

Import product locale from a thin package in your application

Example for German De locale:

import '@bryntum/grid-thin/lib/localization/De.js'

Using prebuilt full locale

Import full UMD locale from the installed @bryntum package.

Example for De locale:

import '@bryntum/grid-thin/lib/locales/grid.locale.De.js'

Full locale can also be added to the index.html file of your application. You need to copy locales from the installed @bryntum package to a folder located at PATH_TO_LOCALE first, and then add this script to the application's home page.

Example for Grid product and German De locale:

<script src="PATH_TO_LOCALE/locales/grid.locale.De.js"></script>

Product template

Example of configuring product template for React application App.tsx:

import { BryntumGrid } from '@bryntum/grid-react';
import { gridProps } from './GridConfig';
import './App.scss';

function App() {

    return (
        <BryntumGrid
            {...gridProps}
        />
    );
}

export default App;

Technical demo

Technical demo showing all products in one application can be seen here. You may download source there clicking on Download header icon.