Add border to table row when field value changes to separate different datasets-CodePudding

I'm trying to write either HTML or CSS so that when a value changes it adds a bolded border to the bottom/top of the box as a separator Here is my html

<table mat-table [dataSource]="dataSource" >
  <!-- Location Column -->
  <ng-container matColumnDef="location">
    <th mat-header-cell *matHeaderCellDef> Location </th>
    <td mat-cell *matCellDef="let element"> {{element.location}} </td>
  </ng-container>

  <!-- Model Column -->
  <ng-container matColumnDef="model">
    <th mat-header-cell *matHeaderCellDef> Model </th>
    <td mat-cell *matCellDef="let element"> {{element.model}} </td>
  </ng-container>

  <!-- Price Column -->
  <ng-container matColumnDef="price">
    <th mat-header-cell *matHeaderCellDef> Price </th>
    <td mat-cell *matCellDef="let element"> ${{element.price}} </td>
  </ng-container>

  <!-- Seller Column -->
  <ng-container matColumnDef="seller">
    <th mat-header-cell *matHeaderCellDef> Seller </th>
    <td mat-cell *matCellDef="let element"> {{element.seller}} </td>
  </ng-container>

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

Here is my CSS

.table {
  width: 100%;
}

.mat-column-location {
  width: 32px;
  border-right: 1px solid currentColor;
  padding-right: 24px;
  text-align: center;
}

.mat-column-model {
  padding-left: 16px;
  font-size: 20px;
}

.mat-column-price {
  font-style: italic;
}

.mat-column-seller {
  width: 32px;
  text-align: center;
}

And my basic code so far

import {Component} from '@angular/core';
export interface CarComposition {
  location: string;
  model: string;
  price: string;
  seller: string;
}

const ELEMENT_DATA: CarComposition [] = [
  {location: “001”, model: “Acura”, price: 10.79, seller: “PQ”},
  { location: “001”, model: “Volvo”, price: “40.26”, seller: “MH”},
  { location: “002”, model: “Hyundai”, price: “69.41”, seller: “LI”},
  { location: “003”, model: “Dodge”, price: “90.22”, seller: “BE”},
  { location: “003”, model: “Fiat”, price: “10.81”, seller: “BG”},
  { location: “003”, model: “Chevrolet”, price: “27.07”, seller: “CH”},
];

/**
 * @title Styling columns using their auto-generated column names
 */
@Component({
  selector: 'table-column-styling-example',
  styleUrls: ['table-column-styling-example.css'],
  templateUrl: 'table-column-styling-example.html',
})
export class CarComposition {
  displayedColumns: string[] = ['Location, 'Model’, 'Price', 'Seller’];
  dataSource = ELEMENT_DATA;
}

Ideally I'd like for whenever the location value changes a separator is added so it's easier to notice. Something like

Location    |     Model     | Price    | Seller
001               Acura        10.79       PQ
001               Volvo        40.26       MI
-------------------------------------------------
002               Hyundai      69.41       LI

CodePudding user response：

You will need a helper method to check if the location value has changed and then add a class 'separator' which will contain the CSS rules to change the border style, these are required changes to your code.

Component file

export class CarComposition {
  displayedColumns: string[] = ['location, 'model’, 'price', 'seller’];
  dataSource = ELEMENT_DATA;

  currentLocation = ELEMENT_DATA[0].location;

  isNewLocation(val: string): boolean {
    if (this.currentLocation !== val) {
      this.currentLocation = val;
      return true;
    }
    return false
  }
}

Template

<tr mat-row  [class.separator] = "isNewLocation(row.position)" *matRowDef="let row; columns: displayedColumns;"></tr>

Styles

tr.separator td {
  border-top: 1px solid;
}

CodePudding user response：

Not use a function inside the .html. loop over the data and add a new property

  dataSource = ELEMENT_DATA.map((x: any, index: number) => ({
    ...x,
    equal: !index || ELEMENT_DATA[index - 1].location == x.location
  }));