Regarding flex grid in Angular 6

Question

Dear all, I was developing one component using Angular 6 and ASP .net MVC 5 with Rest API. I want to use flex grid in Angular 6. please let me know if anone have any easy solution or suggest me how can I show a table which will contains checkbox , textbox and should have fixed header with scrollable body. Any suggestion will be acceptable. Thanking you in advanced. Regards

archana devi · Answer

Hi Mandar Shinde, Here is an example for horizontal and vertical scroll CODE: Html table class = "fixed_header" > thead > tr > th > Col 1 th > th > Col 2 th > th > Col 3 th > th > Col 4 th > th > Col 5 th > tr > thead > tbody > tr > td > r 1-0 td > td > r 1-1 td > td > r 1-2 td > td > r 1-3 td > td > r 1-4 td > td > r 1-5 td > td > r 1-6 td > tr > tr > td > r 2-0 td > td > r 2-1 td > td > r 2-2 td > td > r 2-3 td > td > r 2-4 td > td > r 2-5 td > td > r 2-6 td > tr > tr > td > r 3-0 td > td > r 3-1 td > td > r 3-2 td > td > r 3-3 td > td > r 3-4 td > td > r 3-5 td > td > r 3-6 td > tr > tr > td > r 4-0 td > td > r 4-1 td > td > r 4-2 td > td > r 4-3 td > td > r 4-4 td > td > r 4-5 td > td > r 4-6 td > tr > tr > td > r 5-0 td > td > r 5-1 td > td > r 5-2 td > td > r 5-3 td > td > r 5-4 td > td > r 5-5 td > td > r 5-6 td > tr > tr > td > r 6-0 td > td > r 6-1 td > td > r 6-2 td > td > r 6-3 td > td > r 6-4 td > td > r 6-5 td > td > r 6-6 td > tr > tr > td > r 7-0 td > td > r 7-1 td > td > r 7-2 td > td > r 7-3 td > td > r 7-4 td > td > r 7-5 td > td > r 7-6 td > tr > tbody > table > css .fixed_header tbody{ display : block ; overflow-x: auto ; overflow-y: auto ; height : 150px ; width : 300px ; } .fixed_header thead tr{ display : block ; } .fixed_header thead th{ width : 50px ; /* width of the header cell*/ } .fixed_header tbody td{ width : 50px ; /* width of the body cell*/ } .fixed_header tbody tr{ display : block ; width : 400px ; }

Gajendra Jangid · Answer

https://blog.angularindepth.com/angular-flex-layout-flexbox-and-grid-layout-for-angular-component-6e7c24457b63

Sivakumar Koneti · Answer

read the below link and follow wrap example use . flex-wrap css https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_flex-wrap&stacked=h https://www.w3schools.com/bootstrap4/bootstrap_flex.asp

Mandar Shinde · Answer

Hello Gajendra sir, I have just checkout link which you have provided. Thank you for replying but still my problem is not get solved, because as I mentioned aboved in subject i want to create dynamic table with fixed header and scollable body both horizontal and vertically. please let me know if any one have easy solution. My conents are coming dynamically columns and it contains some checkboxes, textboxes and some static data. Thanking you in advanced.