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