@dotgov/datagrid

Grid Manager for DGS system.

Usage no npm install needed!

<script type="module">
  import dotgovDatagrid from 'https://cdn.skypack.dev/@dotgov/datagrid';
</script>

README

Angular6 datagrid - Data Grid

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 ;)