title: Add border to table row when field value changes to separate different datasets
body: <p>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</p>
  <pre><code>&lt;table mat-table [dataSource]=&quot;dataSource&quot; class=&quot;mat-elevation-z8 table&quot;&gt;
    &lt;!-- Location Column --&gt;
    &lt;ng-container matColumnDef=&quot;location&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Location &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.location}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Model Column --&gt;
    &lt;ng-container matColumnDef=&quot;model&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Model &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.model}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Price Column --&gt;
    &lt;ng-container matColumnDef=&quot;price&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Price &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; ${{element.price}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Seller Column --&gt;
    &lt;ng-container matColumnDef=&quot;seller&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Seller &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.seller}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>Here is my CSS</p>
  <pre><code>.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;
  }
  </code></pre>
  <p>And my basic code so far</p>
  <pre><code>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;
  }
  </code></pre>
  <p>Ideally I'd like for whenever the location value changes a separator is added so it's easier to notice.
  Something like</p>
  <pre><code>Location    |     Model     | Price    | Seller
  001               Acura        10.79       PQ
  001               Volvo        40.26       MI
  -------------------------------------------------
  002               Hyundai      69.41       LI
  </code></pre>