title: can row headers be specified for angular material tables?
body: <p>I looked through <a href="https://material.angular.io/components/table" rel="nofollow noreferrer">https://material.angular.io/components/table</a> and can see how to specify column headers, but I don't see a way to specify row headers.  </p>
  
  <p>From a pure html perspective, I want to end up with something like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;th scope='col'&gt;name&lt;/th&gt;
      &lt;th scope='col'&gt;age&lt;/th&gt;
      &lt;th scope='col'&gt;favorite color&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope='row'&gt;fred&lt;/th&gt;
      &lt;td&gt;35&lt;/td&gt;
      &lt;td&gt;orange&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope='row'&gt;barney&lt;/th&gt;
      &lt;td&gt;32&lt;/td&gt;
      &lt;td&gt;brown&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope='row'&gt;wilma&lt;/th&gt;
      &lt;td&gt;33&lt;/td&gt;
      &lt;td&gt;white&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>where 'fred', 'barney', and 'wilma' are row headers.</p>
  
  <p>I know angular material doesn't use native table tags, but rather custom tags and roles such as: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div role='grid'&gt;
    &lt;div role='row'&gt;
      &lt;div role='columnheader'&gt;name&lt;/div&gt;
      &lt;div role='columnheader'&gt;age&lt;/div&gt;
      &lt;div role='columnheader'&gt;favorite color&lt;/div&gt;
    &lt;/div&gt;
    &lt;div role='row'&gt;
      &lt;div role='rowheader'&gt;fred&lt;/div&gt;
      &lt;div role='gridcell'&gt;35&lt;/div&gt;
      &lt;div role='gridcell'&gt;orange&lt;/div&gt;
    &lt;/div&gt;
    &lt;div role='row'&gt;
      &lt;div role='rowheader'&gt;barney&lt;/div&gt;
      &lt;div role='gridcell'&gt;32&lt;/div&gt;
      &lt;div role='gridcell'&gt;brown&lt;/div&gt;
    &lt;/div&gt;
    &lt;div role='row'&gt;
      &lt;div role='rowheader'&gt;wilma&lt;/div&gt;
      &lt;div role='gridcell'&gt;33&lt;/div&gt;
      &lt;div role='gridcell'&gt;white&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>(The above is showing <code>&lt;div&gt;</code> elements instead of <code>&lt;mat-table&gt;</code>, <code>&lt;mat-header&gt;</code>, etc because I wanted the <code>role=</code> to stand out)</p>
  
  <p>Is there a way to get row headers?  If I bring up the code inspector for the first table in <a href="https://material.angular.io/components/table" rel="nofollow noreferrer">https://material.angular.io/components/table</a>, </p>
  
  <p><a href="https://i.stack.imgur.com/luyMk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/luyMk.jpg" alt="table snippet"></a></p>
  
  <p>the 'Hydrogen' cell is defined as:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-cell _ngcontent-c20="" class="mat-cell cdk-column-name mat-column-name ng-star-inserted" role="gridcell"&gt;Hydrogen&lt;/mat-cell&gt;
  </code></pre>
  
  <p>If I look at the column header, 'Name', it's defined as:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-header-cell _ngcontent-c20="" class="mat-header-cell cdk-column-name mat-column-name ng-star-inserted" role="columnheader"&gt;Name&lt;/mat-header-cell&gt;
  </code></pre>
  
  <p>If I merge the two and use the <code>&lt;mat-header-cell&gt;</code> tag from the column header and the <code>class</code> definition from <code>&lt;mat-cell&gt;</code> (for styling purposes), and also change the <code>role</code> from <code>columnheader</code> to <code>rowheader</code>, I get a valid row header.  </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-header-cell _ngcontent-c20="" class="mat-cell cdk-column-name mat-column-name ng-star-inserted" role="rowheader"&gt;Hydrogen&lt;/mat-header-cell&gt;
  </code></pre>
  
  <p>When I use a screen reader and I navigate vertically through a column, the row header is properly read before the table cell is read.  It works great.  I just need a way to specify a row header in angular material.</p>