Our blazing fast Grid component built with pure JavaScript


Post by dave »

Hi, I'm currently looking at the trial of the React version of the Grid component, however, having trouble understanding how the styles should be loaded. I've installed the trial grid and the grid-react components via npm. According to the docs it says the styles can be loaded via app.css / js but it doesn't give any example.

Could you please assist in helping me progress past this point?

Thanks.


Post by dave »

Ok, so after exploring the node_modules folder, it appears I can load a stylesheet with

import '@bryntum/grid/grid.stockholm.css';

It would be a timesaver for many I think if this was in the documentation.

Next issue, is showing data, I can now see styled column headers, but alas, no data rows.

The minimal test code I'm using is as follows:

import { BryntumGrid } from '@bryntum/grid-react';
import '@bryntum/grid/grid.stockholm.css';

function App() {

  const columns = [
    { field: 'name', text: 'Name' },
    { field: 'job', text: 'Job', renderer: ({value}) => value || 'Unemployed' }
];

const data = [
    { name: 'Bill', job: 'Retired' },
    { name: 'Elon', job: 'Visionary' },
    { name: 'Me' }
];

  return (
    <div className="App">
      Grid...
      <hr/>
      <BryntumGrid minHeight='400' columns={columns} data={data}/>
    </div>
  );
}

export default App;

Is there any way to see real code examples for the React components?


Post by saki »

Hello Dave, yes, you are right, the above is one way of doing it.

Based of your question we have added the section to our integration guide. I'm posting it here so that you can choose your way (Note: it is the scheduler guide but the procedure is same for all Bryntum components):

Using Bryntum Scheduler themes

For the scheduler styling you must also import a CSS file that contains a theme for Bryntum Scheduler. There are two main ways of importing the theme.

Using one theme

The easiest way is to import the CSS file in your App.js or in App.scss.

In App.js you would import one of the following:

import '@bryntum/scheduler/scheduler.classic-dark.css'
import '@bryntum/scheduler/scheduler.classic-light.css'
import '@bryntum/scheduler/scheduler.classic.css'
import '@bryntum/scheduler/scheduler.material.css'
import '@bryntum/scheduler/scheduler.stockholm.css'

The syntax is slightly different in App.(s)css; use one of the following:

@import '~@bryntum/scheduler/scheduler.classic-dark.css';
@import '~@bryntum/scheduler/scheduler.classic-light.css';
@import '~@bryntum/scheduler/scheduler.classic.css';
@import '~@bryntum/scheduler/scheduler.material.css';
@import '~@bryntum/scheduler/scheduler.stockholm.css';

Note: Importing theme in App.scss file is the preferred because this way we keep all styling-related code together in one file.

Using theme switching

Theme switching can be implemented with the help of <BryntumThemeCombo /> component. It has to be imported as any other component before it is used, for example:

import { BryntumThemeCombo, } from '@bryntum/scheduler-react';

// ... other code

return (
    // ... other components
    <BryntumThemeCombo />
    // ... other components
);

CSS and fonts files that contain themes must be accessible in themes and themes/fonts subdirectories of the server public root. The easiest way of putting them there is to copy the files automatically during postinstall process in package.json:

  "scripts": {
    "postinstall": "postinstall"
  },
  "postinstall": {
    "node_modules/@bryntum/scheduler/*.css": "copy public/themes/",
    "node_modules/@bryntum/scheduler/fonts": "copy public/themes/fonts"
  },

Note: use npm install --save-dev postinstall to install the required package.

The last part is to add the default theme link to the head of public/index.html:

<link
    rel="stylesheet"
    href="%PUBLIC_URL%/themes/scheduler.stockholm.css"
    id="bryntum-theme"
/>

Note: id="bryntum-theme" is mandatory because BryntumThemeCombo relies on it.


Post by dave »

Thanks for your detailed reply Saki, that's very helpful.

Can I also ask whether you can see anything in my example code as to why the data rows aren't visible? Oddly, when inspecting the HTML I can see the appropriate divs and data are there, and the text color is black, but for some reason, it's still not showing.


Post by mats »

Any warnings in the console? Check to ensure you have sized the component properly with CSS.


Post by saki »

Post please your complete code. We'll run, investigate and debug it here. It must be something simple. I'd bet on a css collision, or on container not having a height, but we need to see it in action.


Post by dave »

Hi Saki,

The issue was with the grid height, once I added 'px', or used autoHeight, then the body of the grid appeared.

Thanks


Post Reply