How and why I built Customized grid with inline editing
About me
I am senior front-end developer with 8+ years of experience. Have expertise on technologies like Angular JS, Angular 4+ versions, JS, Karma, Jasmine, jQuery, HTML5, CSS3, NPM etc.
The problem I wanted to solve
We had a requirement of grid with some custom requirements. We wanted to use the angular materials table component to keep the look and feel consistent in overall application.
What is Customized grid with inline editing ?
It's a reusable and dynamically customizable grid component. We didn't want to use any third party lib apart from Angular material. I have developed a dynamically customizable grid which is getting generated from the options given as a input in the form of JSON. Grid is having features like sorting, inline editing, color patterns, pagination, actions column, cells with form inputs like textbox, dropdown, radio buttons, checkbox etc. As the grid is editable I have provided save functionality as well to save the final data of grid.
Tech stack
Angular 6, Angular material, JavaScript, HTML5, CSS3
The process of building Customized grid with inline editing
I have used angular materials table, paginator components to create basic grid. Then I worked on the inline editing part, for that I have used angular reactive form. Grid is getting build from the JSON input which will have the metadata for the grid like editable, cell type, color etc.
Challenges I faced
Key learnings
Angular material components
Effectively used Angular Recative form
Reusable components development
