@dotgov/datagrid v0.0.29
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 ;)
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago