@dotgov/datagrid

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