【Angular】Excelやスプレッドシートのような表を作ってみた③【デザイン修正編】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
この度、作りたかった表が完成したので、その作業内容を数回に分けて記事にしていきます。
今回はその記事の第3回目です。
少し複雑なデータ構造をループで表示させて、さらにそのデータを個別に変更する処理の方法を知りたい方にオススメの記事です。
・第3回 デザイン修正編
・第5回 要素(div/input)切り替え(スタイルバインディング)編
完成形
実装した機能(?)紹介
・ネストがあるデータを表形式で表示
・mat-icon使用
・表1列目固定
・横スクロール
・リスト表示切り替え
・要素(div/input)の切り替え
・テキスト修正後、クラス追加(赤字切り替え)
デザイン修正編
テーマ
今回は簡単なデザイン修正を行います。
具体的には、1列目を固定したり、横スクロールができるようにしていきます。
実は、1列目の固定はmat-tableにstickyと付け加えるだけ実装できます。しかし、私の場合はそれが上手く効かなかったので、自力で実装することになりました。
細かいデザイン(交互に色を変える・テキストを中央表示させるなど)については本記事には書いておりませんので、詳細についてはグーグルさんに聞いてみてください。
前提
前回記事の続きになります。
型定義は省いています。
コード
component.html
+ <div class="person-table">
<mat-table [dataSource]="getData(data)">
<ng-container *ngFor="let column of data['column']; let i = index">
<ng-container *ngIf="i === 0; else elseColumn">
<ng-container [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef>画像表示</th>
<td mat-cell *matCellDef="let person">
<mat-icon svgIcon="camera-icon">
</td>
</ng-container>
</ng-container>
<ng-template #elseColumn>
<ng-container [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef>{{ column }}</th>
<td mat-cell *matCellDef="let person">
<input type='text' [(ngModel)]='person[column]'>
</td>
</ng-container>
</ng-template>
</ng-container>
<tr mat-header-row *matHeaderRowDef="data['column']"></tr>
<tr mat-row *matRowDef="let row; columns: data['column'];"></tr>
</mat-table>
+ </div>
component.scss
.person-table {
overflow: auto;
}
mat-table {
width: fit-content;
}
.mat-column-cameraColumn {
position: sticky;
left: 0;
}
ポイント
ポイントはmat-tableのwidthに「fit-content」を追加することです。
こうしておかないと、固定列がブラウザ画面に表示されているtable内でしか固定されず、ブラウザ画面に表示されていない部分がスクロールされてくると動いてしまいます。
今後に向けて
次回はmat-button-toggle-groupを使って、カラムの表示を切り替えていきたいと思います。
参考
素晴らしい記事に感謝いたします。
