Skip to content

HOWTO Step by Step

Jump to bottom
Ghislain B edited this page Jul 28, 2023 · 13 revisions

Easiest Way to Get Started

The easiest is to simply clone the Slickgrid-React-Demos project and run it from there... or if you really wish to start from scratch then follow the steps below.

1. Install NPM Package

Install React, Slickgrid-React, Bootstrap (or other UI framework) and potentially a font library like Font-Awesome

npm install --save slickgrid-react bootstrap
# or with yarn add

Note: Bootstrap and Font-Awesome are both optional, you can use any other libs too

2. Import all necessary dependencies in main.ts 

import 'font-awesome/css/font-awesome.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import 'flatpickr/dist/flatpickr.min.css';
import 'multiple-select-modified/src/multiple-select.css';
import i18n from 'i18next';
import React from 'react';

3. CSS / SASS Styles

Load the default Bootstrap theme style and/or customize it to your taste (customization requires SASS)

CSS

Default compiled css.

Note: If you are also using Bootstrap-SASS, then there is no need to include the bootstrap.css in the styles: [] section.

import 'font-awesome/css/font-awesome.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import 'flatpickr/dist/flatpickr.min.css';
import 'multiple-select-modified/src/multiple-select.css';

import 'styles.css';
import 'node_modules/@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';

SASS (scss)

You could also compile the SASS files with your own customization, for that simply take any of the _variables.scss (without the !default flag) variable file and make sure to import the Bootstrap Theme afterward. For example, you could modify your style.scss with the following changes:

/* for example, let's change the mouse hover color */
$cell-odd-background-color: lightyellow;
$row-mouse-hover-color: lightgreen;

/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';

4. Install/Setup I18N for Localization (optional)

If you don't want to use any Translate Service and use only 1 Locale then take a look at this demo

To provide locales other than English (default locale), you have 2 options that you can go with. If you only use English, there is nothing to do (you can still change some of the texts in the grid via option 1.)

  1. Using Custom Locale, that is when you use only 1 locale (other thank English)... this is a new feature starting from version 2.10.0 and up.
  2. Using Localization with I18N, that is when you want to use multiple locales dynamically.

Date Picker - Flatpickr Localization

If you use multiple locale, you will also need to import necessary Flatpickr Locale, for more info see this Flatpickr Localization Wiki

5. Create a basic grid

import {
  SlickgridReactInstance,
  Column,
  FieldType,
  Formatter,
  Formatters,
  GridOption,
  SlickgridReact,
} from 'slickgrid-react';
import React from 'react';

interface Props { }

interface State {
  gridOptions?: GridOption;
  columnDefinitions: Column[];
  dataset: any[];
}

export default class Example1 extends React.Component<Props, State> {
  gridOptions;
  columnDefinitions;
  dataset = [];

  constructor(public readonly props: Props) {
    super(props);

    this.state = {
      gridOptions: undefined,
      columnDefinitions: [],
      dataset: [],
    };
  }

  /* Define grid Options and Columns */
  defineGrid() {
    const columnDefinitions = [
      { id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 100 },
      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, minWidth: 100 },
      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, minWidth: 100 },
      { id: 'start', name: 'Start', field: 'start', minWidth: 100 },
      { id: 'finish', name: 'Finish', field: 'finish', minWidth: 100 },
      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true, minWidth: 100 }
    ];
    const gridOptions = {
      enableAutoResize: false,
      gridHeight: 600,
      gridWidth: 800,
    };

    this.setState((state: State) => ({
      ...state,
      columnDefinitions,
      gridOptions,
      dataset: this.getData(),
    }));
  }

  getData() {
    // mock some data, an array of objects
    this.dataset = [];
    for (let i = 0; i < 1000; i++) {
      const randomYear = 2000 + Math.floor(Math.random() * 10);
      const randomMonth = Math.floor(Math.random() * 11);
      const randomDay = Math.floor((Math.random() * 29));
      const randomPercent = Math.round(Math.random() * 100);

      this.dataset[i] = {
        id: i,
        title: 'Task ' + i,
        duration: Math.round(Math.random() * 100) + '',
        percentComplete: randomPercent,
        start: `${randomMonth}/${randomDay}/${randomYear}`,
        finish: `${randomMonth}/${randomDay}/${randomYear}`,
        effortDriven: (i % 5 === 0)
      };
    }
  }

  render() {
      return !this.state.gridOptions ? '' : (
        <SlickgridReact gridId="grid1"
            columnDefinitions={this.state.columnDefinitions1}
            gridOptions={this.state.gridOptions1!}
            dataset={this.state.dataset1} 
        />
      );
  }
}

6. Explore the Wiki page content

The last step is really to explore all the pages that are available in this Wiki, all the documentation will be place in here and so you should visit it often. For example a good starter is to look at the following

  • for all the Grid Options, take a look at Wiki - Grid Options
  • Formatters
  • Editors
  • Filters
  • Grid Menu
  • ... and much more, just explorer the Wikis through the sidebar index (on your right)
    • it gets updated very frequently, we usually mention any new/updated wikis in any new version release

7. Get Started

The best way to get started is to clone the Slickgrid-React-Demos, it has multiple examples and it is also updated frequently since it is used for the GitHub Bootstrap 4 demo page. Slickgrid-React has 2 Bootstrap themes, you can see a demo of each one below.

All Live Demo Examples have links to the actual code

Like to see the code to a particular Example? Just click on the "see code" that is available in every live examples.

8. Add Optional Feature like Excel Export

Starting with version 3.0.0, the Excel Export is now an optional package and if you want to use it then you'll need to install it via npm from the monorepo library with npm install @slickgrid-universal/excel-export. Refer to the Excel Export - Wiki for more info.

Here's a quick list of some of these optional packages

9. Missing Features? (fear not)

What if Slickgrid-React is missing feature(s) versus the original SlickGrid? Fear not and directly use the SlickGrid and DataView objects that are expose from the start through Event Emitters. For more info continue reading on Wiki - SlickGrid & DataView objects and Wiki - Grid & DataView Events

10. Having some issues?

After reading all this HOW TO, what if you have an issue with the grid? Please start by searching any related issues. If you can't find anything in the issues log and you made sure to also look through the multiple wiki pages as well, then go ahead and fill in a new issue and we'll try to help.

Final word

This project is Open Source and is, for the most part, mainly done in spare time. So please be respectful when creating issues (and fill in the issue template) and I will try to help you out. If you like my work, you can also buy me a coffee ☕️, some part of the code happens when I'm at StarBucks... That is it, thank you and don't forget to ⭐ it if you like the lib 😉

Contents

Clone this wiki locally