【PrimeFaces】PrimeFaces元件 CSS客製化 - Part3：DataTable

tags: PrimeFaces CSS

DataTable

• DataTable的style, styleClass 影響範圍僅限於DataTable本身，e.g. DataTable文字的部分
• 自動調正DataTable的欄寬：table-layout: auto !important;

更換DataTable rows的顏色

1. original code

.ui-datatable-odd {
    background: none repeat scroll 0 0 #F2F5F9;
}

2. 自定義，並寫在dataTable的rowStyleClass
   View：rowIndexVar="index" rowStyleClass="#{index%2 eq 0 ? 'evenRow' : 'oddRow'}"

.oddRow {
    background-color: white !important;
}
.evenRow {
    background-color: #F2F5F9 !important;
}

更換字型大小

寫在dataTable：styleClass="fontSmall"，影響範圍通常為整個dataTable

.fontSmall {
    font-size: smaller !important;
}

• 其他元件 e.g. input, selectOneMenu，必須用selector的方式去override

常用預設class

Style Class	Applies
.ui-datatable	Main container element
.ui-datatable-header	Table header
.ui-datatable-even	Even numbered rows
.ui-datatable-odd	Odd numbered rows

Reference 參考資料

1. PrimeFaces 5.3 官方文件：https://www.primefaces.org/docs/guide/primefaces_user_guide_5_3.pdf

Part4：PanelGrid

連結：【PrimeFaces】PrimeFaces元件 CSS客製化 - Part4：PanelGrid