Gird with dynamic rows / columns


I use Angular Reactive Form for the dynamic grid. The grid is used to MdTable. Is there any solution to create the dynamic grid?


Do you mean a Grid layout like this one?


User can enter Number of days and Group Count. According to the Number of days and Group count, dynamic grid need to create.
I use Angular Reactive Form for the dynamic grid. problem was I can not dynamically create the components.

this.patternForm ={
dayId: [’’, Validators.required],
noOfGroups: [’’, Validators.required],
items: this.formBuilder.array([this.createItem(this.addItem(0,0))]),
userId: 1

createItem(keyVal): FormControl {
return this.formBuilder.control({
[keyVal]: ‘’

addItem(row, col): void {
for (let x = 0; x < row; x++) {
for (let y = 0; y < col; y++) {
let itemVal = x.toString() + y.toString();



How can I sort out the above issue?


What you mean by you can’t dynamically create components?

If you use the Grid plugin mentioned above, you will probably set the column width based on your column input and number of rows can be added dynamically?