ngGridify has been rebuilt for Angular2+ and is a quick and easy way to show some data on the page, and be able to sort it, configure the columns and bind some sort of javascript function to a button on each line if you want to.
ngGridify is a quick and easy way to show some data on the page, and be able to sort it, configure the columns and bind some sort of javascript function to a button on each line if you want to.
My original ng-gridify package is currently used by hundreds of developers and gets up to 1000 downloads on NPM each month, and while it works, it was my first attempt at OSS so there's a few things that i'd change for certain. It did everything I needed on a form with little to no configuration, so it made me ask the question - can I repeat this for Angular?
The idea is that you just include a simple prop in a component that contains everything that it needs to render a table of data on the page, no messing, and it just displays wih column sorting, export to CSV functionality, paging and the ability to pass in a native JSON object (or a API service URL, not a TS type) that describes the data straight from a service to make this a breeze.
These are pretty much features that any basic online report table uses, right? It would be great to have a free go-to grid, that just did this for us that took advantage of global styles.
Open your Angular2+ application and install the package from NPM
npm install nggridify2 --save-dev
Add the following to the app.module.ts file in your application.
import { ngGridifyModule } from './../../node_modules/nggridify2/ng-gridify.module';
Import it into the application.
imports: [
[/*Other Imports*/]
ngGridifyModule
]
Add the following in the component that uses it for the data type that is required to bind.
import { ngGridifyData } from './../../node_modules/nggridify2/ng-gridify.types';
Declare the component in the markup and choose what data to pass in.
<ng-gridify [gridData]="myData"></ng-gridify>
At some point declare and pass in the native JSON object inside the type 'ngGridifyData'.
// Code to be placed in the component that uses the grid.
myData: ngGridifyData ;
ngOnInit() {
this.myData = {
Title: 'The Grid Title',
ErrorMessage: 'There has been an error!',
ItemsPerPage: 5,
SortBy: 'Name',
SortByAscending: true,
ExportEnabled: true,
Columns: [
{ Name: 'Id', DisplayValue: 'Id', Width: "200" },
{ Name: 'Name', DisplayValue: 'Name', Width: "200" },
{ Name: 'Job', DisplayValue: 'Job', Width: "200" }
],
Data: [
{ Name: 'Frank Reynolds', Id: 1, Job: 'Mastermind' },
{ Name: 'Deandra Reynolds', Id: 2, Job: 'Bartender' },
{ Name: 'Ronald MacDonald', Id: 3, Job: 'Nightman' },
{ Name: 'Dennis Reynolds', Id: 4, Job: 'Dayman (Fighter of the Nightman)' },
{ Name: 'Charlie Kelly', Id: 5, Job: 'Janitor' },
{ Name: 'The Waitress', Id: 6, Job: 'Waitress' },
{ Name: 'Artemis Dubois', Id: 7, Job: 'Actress' },
{ Name: 'The Attorney', Id: 8, Job: 'Attorney' },
{ Name: 'Ben Smith', Id: 9, Job: 'Troop' },
{ Name: 'Rickety Cricket', Id: 10, Job: 'Tramp' },
{ Name: 'Maureen Ponderosa', Id: 11, Job: 'Cat' },
{ Name: 'Carmen', Id: 12, Job: 'Was a man' },
{ Name: 'Uncle Jack Kelly', Id: 13, Job: 'Attorney' },
{ Name: 'Macs Dad', Id: 14, Job: 'Steals Christmas presents' },
{ Name: 'Gail the Snail', Id: 15, Job: 'Mashing it' },
{ Name: 'McPoyle', Id: 16, Job: 'Who knows' }
],
ItemClick: {
Function: function (item) {
alert( item.Name + ', ' + item.Job);
},
Text: 'Click me to see a summary'
}
}
}
You can also retrieve deep values from objects by using the dot notation. For example
Columns: [
{ Name: 'Id', DisplayValue: 'Id' },
{ Name: 'Name', DisplayValue: 'Name' },
{ Name: 'Job', DisplayValue: 'Job' },
{ Name: 'MoreData.Stuff', DisplayValue: 'More Stuff' }
],
Data: [
{ Name: 'Frank Reynolds', Id: 1, Job: 'Mastermind', MoreData: { Stuff: 'Here is some more stuff' } },
///...etc...
]
Finally, it is also possible to wire up an existing webservice or API that returns JSON data to the grid by passing a data url, For example try getting some data from this public API
// Code to be placed in the component that uses the grid.
myData: ngGridifyData ;
ngOnInit() {
this.myData = {
Title: 'Getting data from a service.',
ErrorMessage: 'There has been an error!',
ItemsPerPage: 10,
SortBy: 'id',
SortByAscending: true,
ExportEnabled: false,
Columns: [
{ Name: 'id', DisplayValue: 'Id', Width: "200" },
{ Name: 'title', DisplayValue: 'Name', Width: "200" }
],
DataUrl: 'https://jsonplaceholder.typicode.com/posts',
ItemClick: {
Function: null,
Text: null
}
}
}
If you want to contribute, i'm attempting to complete the following features and all contributions are welcome, this is a learning project and certainly not a vanity one.
Thanks to https://github.com/pbrln for implementing retrieval of deep values from objects.
Thanks to https://github.com/detectivequack for the tidy up and deep sorting fix ;)