Angular6 datagrid - Data Grid

• Getting started
• Roadmap
• API
• Custom styles
• Custom themes
• Exports
• Contributors
• Development

Warning

Library is under active development and may have breaking changes until stable 2.0.0 release or subsequent major versions after 2.0.0.

Getting started

Step 1: Install datagrid

NPM

npm install --save @dotgov/datagrid

Step 2: Import the component module

Consider that every DotGov Module including datagrid must be imported next/in same context as DGSCoreModule.

import { DGSCoreModule, DGSEnvironment } from '@dotgov/core';
import { DataGridModule } from '@dotgov/datagrid';


const dgsEnvironment: DGSEnvironment = {
  debug: environment.debug,
  apiUrl: environment.apiUrl,
  defaultLanguage: {
    Name: 'English',
    Code: 'en',
    Icon: 'fa fa-globe',
  },
  languages: [{
      Name: 'English',
      Code: 'en',
      Icon: 'fa fa-globe',
    }],
  lowerCaseTranslates: true,
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    DGSCoreModule.forRoot(dgsEnvironment),
    DataGridModule.forRoot(dgsEnvironment),
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Include assets

To load assets like themes and pdf viewer its ncessary to include assets. IF you're using the Angular CLI, you can add this to your angular-cli.json. Note: Path to datagrid bundle must set relative to basepath inside angular-cli.json.

"apps": {
    ...any,
    "assets": [
        ...any,
        {
          "glob": "**/*",
          "input": "../node_modules/@dotgov/datagrid/assets/",
          "output": "./assets/"
        }
    ],
    ...any,
}

Step 3: Include a theme

For now library doesn't allow you to use a custom theme, but i will be avalaible soon. Keep in touch with us.

API

Inputs

| Input | Type | Default | Required | Description | | ------------- | ------------- | ------------- | ------------- | ------------- | | footerTemplate | TemplateRef | - | no | TemplateRef for footer. | | activePage | number | 1 | no | Reffers to user active page. | | searchVal | string | '' | no | Reffers to search value. | | scrollbarH | boolean | false | no | Allow scrollbar horizontal. | | scrollbarV | boolean | false | no | Allow scrollbar vertical. | | hideSearch | boolean | false | no | Hide navbar search? | | hideButtons | boolean | false | no | Hide navbar buttons? | | hideNav | boolean | false | no | Hide whole navbar? | | hideFooter | boolean | false | no | Hide whole footer? | | advancedSearch | boolean | true | no | Render search by advanced mode, search input is hidden until user click on that, after new line with search + filters gets rendered. | | selectionType | string | multiClick | no | Row selection mode, can be: "single": One row can be selected at a time, "cell": One cell can be selected at a time, "multi": Multiple rows can be selected using Ctrl or Shift key, "multiClick": Multiple rows can be selected by clicking, "checkbox": Multiple rows can be selected using checkboxes| | selectionLimit | number | 5 | no | Limits to how many selection can be active at same time. | | rowHeight | Function|number|undefined|'auto' | auto | no | The height of the row. | | columnMode | string | 'force' | no | Method used for setting column widths, can be: "standard": Distributes based on widths, "flex": Uses flex-grow API, "force": Distributes proportionally | | headerHeight | number | 40 | no | The height of the header in pixels. Pass a falsy value for no header. | | footerHeight | number | 40 | no | The height of the header in pixels. Pass a falsy value for no header. | | showPager | boolean | true | Decides whatever to show pager or not. | | reorderable | boolean | true | no | Allow user to reorder table columns ( only in runtime, no save ). | | swapColumns | boolean | true | no | Allow user to swap table columns ( only in runtime, no save ). | | resizable | boolean | true | no | Allow user to resize table columns ( only in runtime, no save ). | | sortable | boolean | true | no | Allow user to sort table. ( only in runtime, no save ) | | editablePageSize | boolean | true | no | Allow user to change visible per page number. | | preventSelectEvent | boolean | false | no | Prevent default event for user selection. | | pageSizes | number[] | [5, 10, 15, 50, 100] | no | All available models | | actionButtons | buttons[] | - | no | Buttons to be rendered inline or on top of grid. | | actionsCell | TemplateRef | defaultButtonRenderTemplate | no | Buttons template, if not given is taken default one. | | selected | any[] | [] | no | All selected models. | | class | string | bootstrap | no | Class of table container. | | selectAllRowsOnPage | boolean | false | no | Allow user to select all rows at same time. | | config | boolean | false | no | Configuration model. | | rows | boolean | false | no | All available rows. | | displayCheck | Function | () => true | no | Function to determine whether to show a checkbox for a row. |

Outputs

| Output | Type | Description | | ------------- | ------------- | ------------- | | (buttonClicked) | event | Fired when user click some button. | | (userActions) | event | Fired on any user action. | | (pageUpdated) | number | Fired on page got updated. | | (select) | event | Fired when user select another model. | | (selectedChange) | any[] | Two-way binding for selected. |

Contributors

| Contributor Name | Contributor Page | | ------------- | ------------- | | Grigore Meleca | grigoreme |

Development

Setup build path

Open ng-package.json and setup dest to location where you want your build to go. (example: ../myProject/node_modules/@dotgov/datagrid)

Build

npm run build

For more information read docs/developer_guide.md

Release

Use CI/CD for that. Or just run npm run old_school_release, of course if you have permissions ;)