0.0.29 • Published 4 years ago

@dotgov/datagrid v0.0.29

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

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

InputTypeDefaultRequiredDescription
footerTemplateTemplateRef-noTemplateRef for footer.
activePagenumber1noReffers to user active page.
searchValstring''noReffers to search value.
scrollbarHbooleanfalsenoAllow scrollbar horizontal.
scrollbarVbooleanfalsenoAllow scrollbar vertical.
hideSearchbooleanfalsenoHide navbar search?
hideButtonsbooleanfalsenoHide navbar buttons?
hideNavbooleanfalsenoHide whole navbar?
hideFooterbooleanfalsenoHide whole footer?
advancedSearchbooleantruenoRender search by advanced mode, search input is hidden until user click on that, after new line with search + filters gets rendered.
selectionTypestringmultiClicknoRow 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
selectionLimitnumber5noLimits to how many selection can be active at same time.
rowHeightFunction|number|undefined|'auto'autonoThe height of the row.
columnModestring'force'noMethod used for setting column widths, can be: "standard": Distributes based on widths, "flex": Uses flex-grow API, "force": Distributes proportionally
headerHeightnumber40noThe height of the header in pixels. Pass a falsy value for no header.
footerHeightnumber40noThe height of the header in pixels. Pass a falsy value for no header.
showPagerbooleantrueDecides whatever to show pager or not.
reorderablebooleantruenoAllow user to reorder table columns ( only in runtime, no save ).
swapColumnsbooleantruenoAllow user to swap table columns ( only in runtime, no save ).
resizablebooleantruenoAllow user to resize table columns ( only in runtime, no save ).
sortablebooleantruenoAllow user to sort table. ( only in runtime, no save )
editablePageSizebooleantruenoAllow user to change visible per page number.
preventSelectEventbooleanfalsenoPrevent default event for user selection.
pageSizesnumber[][5, 10, 15, 50, 100]noAll available models
actionButtonsbuttons[]-noButtons to be rendered inline or on top of grid.
actionsCellTemplateRefdefaultButtonRenderTemplatenoButtons template, if not given is taken default one.
selectedany[][]noAll selected models.
classstringbootstrapnoClass of table container.
selectAllRowsOnPagebooleanfalsenoAllow user to select all rows at same time.
configbooleanfalsenoConfiguration model.
rowsbooleanfalsenoAll available rows.
displayCheckFunction() => truenoFunction to determine whether to show a checkbox for a row.

Outputs

OutputTypeDescription
(buttonClicked)eventFired when user click some button.
(userActions)eventFired on any user action.
(pageUpdated)numberFired on page got updated.
(select)eventFired when user select another model.
(selectedChange)any[]Two-way binding for selected.

Contributors

Contributor NameContributor Page
Grigore Melecagrigoreme

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

0.0.29

4 years ago

0.0.27

4 years ago

0.0.25

4 years ago

0.0.24

5 years ago

0.0.23

5 years ago

0.0.22

5 years ago

0.0.21

5 years ago

0.0.20

5 years ago

0.0.19

5 years ago

0.0.18

5 years ago

0.0.17

5 years ago

0.0.16

5 years ago

0.0.15

5 years ago

0.0.14

5 years ago

0.0.13

5 years ago

0.0.12

5 years ago

0.0.11

5 years ago

0.0.10

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago