Improve table layout
Max Ehrlicher-Schmidt
4 years ago
parent
790ce54cef
commit
411dc3a8e6
@ -1,85 +1,96 @@
|
||||
<div class="table-control">
|
||||
<button mat-raised-button color="primary">Primary</button>
|
||||
<button mat-raised-button color="accent">Accent</button>
|
||||
</div>
|
||||
<div id="table-container">
|
||||
<table
|
||||
mat-table
|
||||
[dataSource]="bikes"
|
||||
class="mat-elevation-z8"
|
||||
cdkDropList
|
||||
cdkDropListOrientation="horizontal"
|
||||
(cdkDropListDropped)="drop($event)"
|
||||
>
|
||||
<!--- Note that these columns can be defined in any order.
|
||||
<div class="table-page-wrapper">
|
||||
<div class="table-control">
|
||||
<button mat-raised-button color="primary">Primary</button>
|
||||
<button mat-raised-button color="accent">Accent</button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table
|
||||
mat-table
|
||||
[dataSource]="bikes"
|
||||
class="mat-elevation-z8"
|
||||
cdkDropList
|
||||
cdkDropListOrientation="horizontal"
|
||||
(cdkDropListDropped)="drop($event)"
|
||||
>
|
||||
<!--- Note that these columns can be defined in any order.
|
||||
The actual rendered columns are set as a property on the row definition" -->
|
||||
|
||||
<!-- Checkbox Column -->
|
||||
<ng-container matColumnDef="select" sticky>
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox
|
||||
(change)="$event ? masterToggle() : null"
|
||||
[checked]="selection.hasValue() && isAllSelected()"
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected()"
|
||||
>
|
||||
</mat-checkbox>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<mat-checkbox
|
||||
(click)="$event.stopPropagation()"
|
||||
(change)="$event ? selection.toggle(row) : null"
|
||||
[checked]="selection.isSelected(row)"
|
||||
>
|
||||
</mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Checkbox Column -->
|
||||
<ng-container matColumnDef="select" sticky>
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox
|
||||
(change)="$event ? masterToggle() : null"
|
||||
[checked]="selection.hasValue() && isAllSelected()"
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected()"
|
||||
>
|
||||
</mat-checkbox>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<mat-checkbox
|
||||
(click)="$event.stopPropagation()"
|
||||
(change)="$event ? selection.toggle(row) : null"
|
||||
[checked]="selection.isSelected(row)"
|
||||
>
|
||||
</mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef>Name</th>
|
||||
<td
|
||||
mat-cell
|
||||
*matCellDef="let element"
|
||||
contenteditable
|
||||
(input)="onTableInput(element)"
|
||||
>
|
||||
{{ element.name }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name" sticky>
|
||||
<th mat-header-cell *matHeaderCellDef>Name</th>
|
||||
<td
|
||||
mat-cell
|
||||
*matCellDef="let element"
|
||||
contenteditable
|
||||
(input)="onTableInput(element)"
|
||||
>
|
||||
{{ element.name }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell cdkDrag *matHeaderCellDef>ID</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
|
||||
</ng-container>
|
||||
<!-- ID Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell cdkDrag *matHeaderCellDef>ID</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- FrameNumber Column -->
|
||||
<ng-container matColumnDef="frameNumber">
|
||||
<th mat-header-cell cdkDrag *matHeaderCellDef>Fahrgestellnummer</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<!--<mat-form-field>
|
||||
<!-- FrameNumber Column -->
|
||||
<ng-container matColumnDef="frameNumber">
|
||||
<th mat-header-cell cdkDrag *matHeaderCellDef>Fahrgestellnummer</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<!--<mat-form-field>
|
||||
<input matInput color="warn" [value]="element.security.frameNumber"/>
|
||||
</mat-form-field>-->
|
||||
{{ element.security.frameNumber }}
|
||||
</td>
|
||||
</ng-container>
|
||||
{{ element.security.frameNumber }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- NumberOfChildren Column -->
|
||||
<ng-container matColumnDef="numberOfChildren">
|
||||
<th mat-header-cell cdkDrag *matHeaderCellDef>Anzahl Kinder</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.numberOfChildren }}</td>
|
||||
</ng-container>
|
||||
<!-- NumberOfChildren Column -->
|
||||
<ng-container matColumnDef="numberOfChildren">
|
||||
<th mat-header-cell cdkDrag *matHeaderCellDef>Anzahl Kinder</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
{{ element.numberOfChildren }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Buttons Column -->
|
||||
<ng-container matColumnDef="buttons" stickyEnd>
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Buttons Column -->
|
||||
<ng-container matColumnDef="buttons" stickyEnd>
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div class="button-wrapper">
|
||||
<button mat-icon-button>
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button>
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Table Definition -->
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
<!-- Table Definition -->
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,24 +1,29 @@
|
||||
.table-control {
|
||||
margin: 0.5em;
|
||||
}
|
||||
#table-container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
table {
|
||||
.table-page-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.table-control {
|
||||
margin: 0.5em;
|
||||
flex: none;
|
||||
}
|
||||
.table-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
th.mat-column-name,
|
||||
td.mat-column-name {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.mat-table-sticky:first-child {
|
||||
border-right: 1px solid #ffffff1f;
|
||||
padding-right: 1em;
|
||||
}
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
table {
|
||||
width: 100%;
|
||||
.mat-header-cell,
|
||||
.mat-footer-cell,
|
||||
.mat-cell {
|
||||
min-width: 80px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mat-table-sticky:last-child {
|
||||
border-left: 1px solid #ffffff1f;
|
||||
.button-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue