Regarding flex grid in Angular 6

Mandar Shinde

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

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

archana devi7y ago
Hi Mandar Shinde,
Here is an example for horizontal and vertical scroll

CODE:

Html
<table class="fixed_header">
  <thead>
    <tr>
      <th>Col 1th>
      <th>Col 2th>
      <th>Col 3th>
      <th>Col 4th>
      <th>Col 5th>

    tr>
  thead>
  <tbody>
    <tr>
      <td>r 1-0td>
      <td>r 1-1td>
      <td>r 1-2td>
      <td>r 1-3td>
      <td>r 1-4td>
      <td>r 1-5td>
      <td>r 1-6td>
    tr>
    <tr>
      <td>r 2-0td>
      <td>r 2-1td>
      <td>r 2-2td>
      <td>r 2-3td>
      <td>r 2-4td>
      <td>r 2-5td>
      <td>r 2-6td>
    tr>
    <tr>
      <td>r 3-0td>
      <td>r 3-1td>
      <td>r 3-2td>
      <td>r 3-3td>
      <td>r 3-4td>
      <td>r 3-5td>
      <td>r 3-6td>
    tr>
    <tr>
      <td>r 4-0td>
      <td>r 4-1td>
      <td>r 4-2td>
      <td>r 4-3td>
      <td>r 4-4td>
      <td>r 4-5td>
      <td>r 4-6td>
    tr>
    <tr>
      <td>r 5-0td>
      <td>r 5-1td>
      <td>r 5-2td>
      <td>r 5-3td>
      <td>r 5-4td>
      <td>r 5-5td>
      <td>r 5-6td>
    tr>
    <tr>
      <td>r 6-0td>
      <td>r 6-1td>
      <td>r 6-2td>
      <td>r 6-3td>
      <td>r 6-4td>
      <td>r 6-5td>
      <td>r 6-6td>
    tr>
    <tr>
      <td>r 7-0td>
      <td>r 7-1td>
      <td>r 7-2td>
      <td>r 7-3td>
      <td>r 7-4td>
      <td>r 7-5td>
      <td>r 7-6td>
    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;
}
Sivakumar Koneti7y ago
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 Shinde7y ago
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.
Gajendra Jangid7y ago
https://blog.angularindepth.com/angular-flex-layout-flexbox-and-grid-layout-for-angular-component-6e7c24457b63