DBILITY

vaadin table header text alignment 본문

front-end & ui/vaadin legacy

vaadin table header text alignment

DBILITY 2018. 7. 6. 15:23
반응형

워낙 대충 봐서 그런지 모르나, 책에는 내용이 없는 것 같고..

영알 못이라 공식 사이트 매뉴얼에서도 못 찾겠어서 그냥 중노동을 하였다.

다른 방법이 수두룩하겠으나, 오늘 테스트는 여기까지다.

vaadin framework version은 7.713이다. 8부턴 지원하지 않는다고 한다.

 

첫 번째 방법은 setColumnHeaders로 text 추가 후

table에 style을 추가하는 것이다.

default style이 v-table-caption-container-align-left인걸 v-table-caption-container-align-center 변경해 봤더니 된다.

userTable.setVisibleColumns("image","userid","password","grade","birthday");
userTable.setColumnHeaders("사진","아이디","비번","직위","생년월일");		
userTable.addStyleName("v-table-caption-container v-table-caption-container-align-center");

 

두 번째 방법은 setColumnHeader로 PropertyId와 Header String을 추가하는 방법이다.

Div에 style을 입히는 대신 CENTER tag로도 되더라는..

userTable.setColumnHeader("image", "<div style='text-align:center'>사진</div>");
userTable.setColumnHeader("userid", "<div style='text-align:center'>아이디</div>");
userTable.setColumnHeader("password", "<div style='text-align:center'>비밀번호</div>");
userTable.setColumnHeader("grade", "<div style='text-align:center'>직위</div>");
userTable.setColumnHeader("birthday", "생일");

 

반응형

'front-end & ui > vaadin legacy' 카테고리의 다른 글

vaadin inputMask  (0) 2018.07.13
vaadin 8 icon 설정  (0) 2018.07.09
vaadin table/grid Image display  (0) 2018.07.02
vaadin table/grid Date format display  (0) 2018.07.02
vaadin file upload  (0) 2018.06.28
Comments