[Angular Material完全攻略] Day 23 | Angular table example
今天我們要來介紹AngularMaterial中最複雜的元件之一:表格Table。透過組合table、sortheader和paginator這三個功能,我們會完成一個大部分情境都適用的datatable。Datatable可以說是許多軟體都會被使用到的功能,尤其是管理各種資料的後台程式,更是使用datatable的大宗來源,而在商務應用上後台軟體的開發需求也是源源不絕,因此datatable可以說是前端應用最大的一個議題也不為過!也因此在AngularMaterial中要設計datatable自然有非常多彈性可以調整的地方,尤其是我們會一次組合3種元件,來完成datatable的功能,讓狀況更加的複雜...
今天我們要來介紹Angular Material中最複雜的元件之一:表格Table。透過組合table、sort header和paginator這三個功能,我們會完成一個大部分情境都適用的data table。
Data table可以說是許多軟體都會被使用到的功能,尤其是管理各種資料的後台程式,更是使用data table的大宗來源,而在商務應用上後台軟體的開發需求也是源源不絕,因此data table可以說是前端應用最大的一個議題也不為過!
也因此在Angular Material中要設計data table自然有非常多彈性可以調整的地方,尤其是我們會一次組合3種元件,來完成data table的功能,讓狀況更加的複雜,因此我們會將data table這個主題拆成2篇介紹,今天我們會先完成一個大部分情境都適用的data table,明天則會針對一些細節的部分做進階的介紹;準備好了嗎?開始囉!
關於Material Design中的Data Tables在Material Design的Data tables設計指南[1]中,data table用來呈現多筆的資料列,在許多系統中的會使用到,我們能透過data table呈現資料,也能夠進行資料的管理。
Data table基本上就是表格的呈現,只是比起傳統HTML的表格,應該具備更多的功能,如分頁、排序等等。
開始使用Angular Material的Data Table基本上大多數的data table,都需要3個主要部分:資料顯示的主體、允許排序的標題及分頁。在Angular Material中這三個功能分別放在MatTableModule、MatSortModule及MatPaginatorModule,我們今天會一口氣把這三個功能都介紹過,來完成一個基本功能完整的data table,因此我們可以先把這3個module都加到我們的前端專案中。
使用mat-table我們先從最基本的顯示資料主體開始,使用到<mat-table>這個元件;在Angular Material中,使用...