Angular 2 Customized Grid Example


Explained an example to create the customized grid with column sorting mechanism.

First created a grid component.

Then created a template for table.


Add Input data properties named headerData and rowData to the angular grid component. So that this component can get table column header data and row data from other component where it’s called. Also defined a property named actualData, in order to store the actual input row data.  In the below code snippet used Object.assign property to copy only data not the reference.

Updated angular-grid.ts:

For sort ascending, sort descending and reset mechanism added following methods with normal java script sorting logic.

Updated angular-grid.ts:

Now Added little styling to sorting glyph icons.

Updated angular-grid.css:

Now our angular grid component is ready to use from other components by simply calling with selector name and passing appropriate table inputs.


In app component added some mock data for table row details and table column names.




Please enter your comment!
Please enter your name here