vaadin flow - grid

공식 사이트 문서를 참조하여 작성하였다.

 

익히 알다시피 Grid는 row와 column으로 구성된 표형태의 데이터를 표시하고, 편집할 수 있게 한다. 상단에 머리글(header), 하단에 바닥글(footer)이 표시되며, 일반 텍스트 외에도 HTML, Component를 포함할 수 있다. 머리글(header)에 포함되는 Component들은 필터링을 쉽게 구현할 수 있고, column header를 클릭하여 정렬할 수 있다. multiSort설정 시 shift를 누른 상태에서 클릭할 경우 정렬이 추가된다.

 

Grid의 데이터 표시 영역은 가로, 세로 스크롤막대를 표시할 수 있고, column.setFrozen 메서드를 사용하여 고정(좌측부터)할 수 있으며, 스크롤되지 않는다.

데이터의 적재시 첫 번째 방식으로 Grid.setItems메서드를 사용 하여 List를 적재하는 것이다.

@PageTitle("setItems를 이용한 Grid Data Bindig")
@Route(value="grid/setitems")
public class GridView extends Div {

	public GridView() {

		getElement().setProperty("style", "margin:20px 20px");

		Div gridLayout = new Div();

		gridLayout.setWidth("380px");

		List<Person> list = Arrays.asList(
				new Person("aid","aname",1,Sex.Male),
				new Person("bid","bname",2,Sex.Female),
				new Person("cid","cname",3,Sex.Female),
				new Person("did","dname",1,Sex.Male),
				new Person("eid","ename",3,Sex.Male),
				new Person("fid","fname",1,Sex.Female),
				new Person("gid","gname",2,Sex.Male),
				new Person("hid","hname",3,Sex.Female));

		Grid<Person> grid = new Grid<>();
		grid.setItems(list);
		grid.setMultiSort(true);
		grid.addColumn(Person::getId).setHeader("ID").setFrozen(true);
		grid.addColumn(Person::getName).setHeader("NAME");
		grid.addColumn(Person::getAge).setHeader("AGE");
		//grid.addColumn(e-> e.getSex() == Sex.Male ? "남자" : "여자").setHeader("SEX");
		grid.addColumn(new ValueProvider<Person, String>() {

			@Override
			public String apply(Person source) {
				return source.getSex() == Sex.Male ? "남자" : "여자";
			}

		}).setHeader("SEX");

		for (Column<Person> column : grid.getColumns()) {
			column.setSortable(true);
		}

		gridLayout.add(grid);

		add(gridLayout);
	}
}

두 번째는 DataProvider를 사용하는 방법이 있으며, Lazy Loading(데이터 영역에 표시되는 부분만 적재, DataProvider.fromCallbacks메서드 사용)을 지원하고 이 smart lazy loading기능은 모바일 장치 등 낮은 네트워크 대역폭 환경에서도 우수한 사용자 경험(UX)을 제공한다. Grid생성자에 bean Type을 argument로 사용하면 bean의 모든 property를 자동으로 Column에 추가한다.

@PageTitle("DataProvider를 사용한 Grid Data Binding")
@Route(value="grid/dataprovider")
public class GridView extends VerticalLayout {

	public GridView() {

		List<Person> list = new ArrayList<Person>();
		list.add(new Person("aid","aname",1,Sex.Male));
		list.add(new Person("bid","bname",2,Sex.Female));
		list.add(new Person("cid","cname",3,Sex.Female));
		list.add(new Person("did","dname",1,Sex.Male));
		list.add(new Person("eid","ename",3,Sex.Male));
		list.add(new Person("fid","fname",1,Sex.Female));
		list.add(new Person("gid","gname",2,Sex.Male));
		list.add(new Person("hid","hname",3,Sex.Female));

		//ListDataProvider<Person> ldp = new ListDataProvider<>(list);
		ListDataProvider<Person> ldp = DataProvider.ofCollection(list);
		Grid<Person> grid = new Grid<>(Person.class);
		//Grid<Person> grid = new Grid<>();

		grid.setColumns("id","name","age","sex");

		grid.getColumns().get(0).setHeader("ID").setFrozen(true);
		grid.getColumns().get(1).setHeader("NAME").setFrozen(true);
		grid.getColumns().get(2).setHeader("AGE");
		grid.getColumns().get(3).setHeader("SEX");

		grid.setMultiSort(true);
		grid.setColumnReorderingAllowed(true);
		grid.setWidth("380px");
		//grid.setHeight("200px");
		//grid.getColumns().get(0).setFrozen(true);
		//grid.getColumns().get(1).setFrozen(true);
		grid.setDataProvider(ldp);

		add(grid);
	}
}