CDK Table: `cdk-thead` directive

[ZackDeRose]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

CDK Tables - optional exposure of the <thead>/<tbody>/<tfoot> in the template via a cdk-thead/cdk-tbody/cdk-tfoot directive.

I would expect the something like the following template to be supported:

<table cdk-table [dataSource]="dataSource">

  <!-- User name Definition -->
  <ng-container cdkColumnDef="username">
    <th cdk-header-cell *cdkHeaderCellDef> User name </th>
    <td cdk-cell *cdkCellDef="let row"> {{row.username}} </td>
  </ng-container>

  <!-- Header and Row Declarations -->
  <thead cdk-thead class="thead-dark">
    <tr cdk-header-row *cdkHeaderRowDef="['username', 'age', 'title']"></tr>
  </thead>
  <tr cdk-row *cdkRowDef="let row; columns: ['username', 'age', 'title']"></tr>

</table>

[Expanded on from the template provided in the overview]

What is the current behavior?

The tags are not [documented as?] something that you can place inside the cdk-table template.

What are the steps to reproduce?

n/a

What is the use-case or motivation for changing an existing behavior?

CDK Tables are awesome for un-opinionated tables, especially given their easy integration with external CSS frameworks like bootstrap. Lack of access easy access to <thead>/<tbody>/<tfoot> in the template feels then like something of a gap given what CDK-tables seem to be trying to achieve, and its ability to support a CSS framework that applies classes to these tags.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

n/a

Is there anything else we should know?

n/a

[rizrmd]

any updates? we also need this

[JKMarkowski]

Bump.

[andrewseguin]

I took a shot at implementing this feature, but ran into some issues that will require us to have some more in-depth design. Most importantly, we'll need to understand a clear API that allows for multiple table sections (e.g multiple tbody sections) and how to designate which rows go into which head/body/footer.

[AndriiDidkivsky]

Any updates?

[beeman]

I wanted to style my header too, using Tailwind classes when I found out that there is no cdk-thead directive, leading me to this issue.

The workaround I ended up using uses the @apply directive from Tailwind.

::ng-deep table.cdk-table {
  @apply w-full divide-y divide-gray-600
}

::ng-deep .cdk-table thead {
  @apply bg-gray-50 bg-gray-800 text-gray-500
}

::ng-deep .cdk-table thead th {
  @apply px-2 md:px-4 py-3 text-left text-xs font-medium uppercase tracking-wider
}

::ng-deep .cdk-table tbody tr:nth-child(even) {
  @apply bg-gray-600 text-gray-300
}
::ng-deep .cdk-table tbody tr:nth-child(odd) {
  @apply bg-gray-700 text-gray-300
}

::ng-deep .cdk-table tbody td {
  @apply px-2 md:px-4 py-2 md:py-4 whitespace-nowrap text-sm
}

[loxy]

What is the state of play?

[bvandenbon]

The risk of ::ng-deep solutions, is that they do not only influence the <thead> of the table itself, but also the <thead> of potential subtables that are contained within the table. They aren't very specific.