Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Material Table -Border Inside the Table

I am using Angular material table and I want to set border inside the table, Using CSS I was able to set border: Normal case [enter image description here
but when the content of a particular cell increases border of the neighbor cells don't grow and the table looks pretty bad cell with extra content enter image description here
here is the CSS:

`.example-container {
  display: flex;
  flex-direction: column;
  max-height: 500px;
  min-width: 300px;
}

.mat-table {
  overflow: auto;
  max-height: 500px;
}
.mat-column-name{
  border-left: 1px solid grey;
  min-height: 48px;

}
.mat-column-weight{
  border-left: 1px solid grey;

   min-height: 48px;

.mat-column-symbol{
 border-left: 1px solid grey;
   min-height: 48px;
}`

HTML`

<!--- Note that these columns can be defined in any order.
      The actual rendered columns are set as a property on the row definition" -->

<!-- Position Column -->
<ng-container matColumnDef="position">
  <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>

<!-- Weight Column -->
<ng-container matColumnDef="weight">
  <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>

<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
  <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

`

like image 772
Vikas Avatar asked Jan 13 '18 07:01

Vikas


People also ask

What is MatTableDataSource?

MatTableDataSource. Data source that accepts a client-side data array and includes native support of filtering, sorting (using MatSort), and pagination (using MatPaginator). Allows for sort customization by overriding sortingDataAccessor, which defines how data properties are accessed.

What is data table in angular?

What is Angular DataTables? Angular DataTables is a library for building complex HTML tables that uses jQuery's DataTables plugin. It is configured to support TypeScript and optimized for Angular 2+. Angular DataTables will come in handy when: You have a very large dataset coming in from one or more API endpoints.


2 Answers

Approach-2: Eventually, I figured out the solution, since material uses flex-layout we can use CSS align-self: stretch; /* Stretch 'auto'-sized items to fit the container */Result with align-self: stretch

Here is the updated CSS

    `.example-container {
      display: flex;
      flex-direction: column;

      flex-basis: 300px;
    }

    .mat-table {
      overflow: auto;
      max-height: 500px;
    }

     .mat-column-name{
    border-right: 1px solid grey;
    align-self: stretch;
    text-align: center


    }
    .mat-column-position{
    border-right: 1px solid grey;
    align-self: stretch;
    text-align: center;

    }
    .mat-column-weight{
    border-right: 1px solid grey;
    align-self: stretch;
    text-align: center;

    } 
    .mat-column-symbol{

    text-align: center;
    align-self: stretch;
    }
   .mat-column-weight{
       align-self: stretch;
    } `
like image 115
Vikas Avatar answered Oct 13 '22 00:10

Vikas


Approach:1 You need to stretch your table cell content whenever parent row height grows. To do that you can make your table cell a flex box, add an additional class to mat-cell <mat-cell class="flex-stretch"> and add these to your css:

.mat-cell .flex-stretch {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    /* align-items center so that cell content is vertically centered */
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
like image 33
Hoang Duc Nguyen Avatar answered Oct 13 '22 00:10

Hoang Duc Nguyen