In this guide, we will cover how quick and easy it is to create your first Generic UI Grid in the Nx project. We will build a simple grid example, it will look like that:

You can see the final results in this Github repository: https://github.com/generic-ui/generic-ui-grid-nx

First, you need to make sure you have installed the nx cli. You can find the official installation guide here: Nx setup.

We start off by generating a new Nx project with a preset for the Angular. Navigate to the folder you wish to place your project and type this in your terminal:

npx create-nx-workspace --preset=angular

You can select a name for the workspace e.g. nx-grid

After the process is complete navigate to your project directory with:

cd nx-grid

and install Generic UI Grid by typing this in your project directory:

npm i @generic-ui/ngx-grid @generic-ui/fabric @generic-ui/hermes

This section covers some of the key steps in building a Generic UI Grid.

Most importantly, you need to add GuiGridModule to the app.module.ts file. Also, don't forget to import GuiGridModule from @generic-ui/ngx-grid.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { GuiGridModule } from '@generic-ui/ngx-grid';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GuiGridModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now that we have added GuiGridModule to our project, we can move to the next step.

In order to build a grid, you need to have source and columns specified. In app.component.ts create a variable named as source and paste the code below:

source: Array<any> = [
    {
      name: 'Brad',
      job: 'programmer',
      age: '40'
    },
    {
      name: 'John',
      job: 'athlete',
      age: '22'
    },
    {
      name: 'Eve',
      job: 'artist',
      age: '25'
    }
];

With our source defined, we can now create columns variable.

columns: Array<GuiColumn> = [
    {
      header: 'Name',
      field: 'name'
    },
    {
      header: 'Job',
      field: 'job'
    },
    {
      header: 'Age',
      field: 'age'
    }
];

Open up the app.component.html and create the <gui-grid></gui-grid> element. With columns and source specified all we need to do now is to pass them in the <gui-grid> selector as inputs:

<gui-grid [source]="source"
          [columns]="columns">
</gui-grid>

<gui-grid [source]="source"
          [columns]="columns">
</gui-grid>

import { Component } from '@angular/core';

import { GuiColumn } from '@generic-ui/ngx-grid';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  columns: Array<GuiColumn> = [
    {
      header: 'Name',
      field: 'name'
    },
    {
      header: 'Job',
      field: 'job'
    },
    {
      header: 'Age',
      field: 'age'
    }];

  source: Array<any> = [
    {
      name: 'Brad',
      job: 'programmer',
      age: '40'
    },
    {
      name: 'John',
      job: 'athlete',
      age: '22'
    },
    {
      name: 'Eve',
      job: 'artist',
      age: '25'
    }];
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { GuiGridModule } from '@generic-ui/ngx-grid';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GuiGridModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Your repository should look this one: https://github.com/generic-ui/generic-ui-grid-nx