<dt-drawer-table [openColumns]="['col2']">
  <ng-template dtDrawerContent let-row> {{ row.col1 }} </ng-template>
  <dt-table [dataSource]="dataSource" dtSort #sortable>
    <dt-simple-text-column name="col1" label="Column1"></dt-simple-text-column>
    <dt-simple-text-column name="col2" label="Column2"></dt-simple-text-column>
    <dt-simple-text-column name="col3" label="Column3"></dt-simple-text-column>
    <dt-header-row *dtHeaderRowDef="['col1', 'col2', 'col3']"></dt-header-row>
      *dtRowDef="let row; columns: ['col1', 'col2', 'col3']"

The DtDrawerTable component uses table and drawer components. Table is the main content of the drawer and row click of the table opens the drawer content of the row.


You have to import the DtDrawerTableModule to use the dt-drawer-table.

import { NgModule } from '@angular/core';
import { DtDrawerTableModule } from '@dynatrace/barista-components/experimental/drawer-table';

  imports: [DtDrawerTableModule],
class MyModule {}


The DtDrawerTable component supports the following input.

Name Type Default Description
openColumns string[] first column Defines the columns that stay visible when the drawer is open.


The following methods are on the DtDrawerTable class:

Name Description Return value
open Opens the drawer void
close Closes the drawer void
toggle Toggles the drawer void