<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>
    <dt-row
      [dtDrawerRowDef]="row"
      *dtRowDef="let row; columns: ['col1', 'col2', 'col3']"
    ></dt-row>
  </dt-table>
</dt-drawer-table>

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.

Imports

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';

@NgModule({
  imports: [DtDrawerTableModule],
})
class MyModule {}

Inputs

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.

Methods

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