Tableview

Layout

Table view and https://github.com/rmvonji/emagin-platform/wiki/8.-ListView have same configuration structure except that tableview declares column.

You can switch from table view to list view just by changing table structure implementation declaration.

For Listview

<property name="contentImpl" value="ListViewContent" />

For tableview

<property name="contentImpl" value="TableViewContent" />

A tableview is composed by followings elements:

• The header
• The content
• The footer pagination
• A toolbar
• The no content pane

<component id="Content" combine.keys="id" processor="TableStructureProcessor">
	<component id="Header">
	</component>

	<component id="NoContentPane">
	</component>

	<component id="Content">
	</component>
	
	<component id="Toolbar">
		<component id="RootMenuActions">
			<component id="LeftActions">
			</component>
			<component id="RightActions">
			</component>
		</component>
	</component>

	<component id="Pagination">
	</component>
</component>

Header

The heder defines the title, the filter and the filtering algorithm provider

<component id="Header">
	<properties>
		<property name="title" value="LIST_EXAMPLE1_TITLE_EXAMPLE" />
		<property name="styleClass" value="default-background" />
		<property name="headerImpl" value="FiltrableTableHeaderImpl" />
		<property name="filterImpl" value="DemoTableByModelFilter" />
	</properties>
</component>

The table view content

paginateOperation: The bean responsible paginating the table

dataLoader: The data loader

domainClass: integration with Emagin cloud, remote entity to paginate

<component id="Content">
	<properties>
		<property name="showTableHeader" value="false" />
		<property name="tableRowStyleClass" value="ep-shadowed-table-row" />
		<property name="domainClass" value="com.emagin.core.model.Element" />
		<property name="paginateOperation" value="StubPaginatedTableDataOperation" />
		<property name="dataLoader" value="GenericEntityPaginatedDataLoader" />
	</properties>

	<component id="Columns" combine.keys="ref">
		<component ref="CoreCheckboxSelectColumn" responsiveOrder="-1" />
		<component ref="CoreWorkStatusColumn" responsiveOrder="-1" />
		<component ref="CoreBlankSpacerColumn" responsiveOrder="-1" />
		<component ref="CoreSmallTableIconColumn" responsiveOrder="-1" />
		<component ref="ModelColumn" responsiveOrder="-1" masterColumn="true" />
		<component ref="CoreBlankSpacerColumn" responsiveOrder="1" />
		<component ref="FirstNameColumn" responsiveOrder="0" />
		<component ref="CompanyColumn" responsiveOrder="-1" />
		<component ref="YearModelColumn" responsiveOrder="1" />
		<component ref="CoreBlankSpacerColumn" responsiveOrder="-1" />
	</component>
</component>

Empty message pane

Empty message pane can be configured to display custom message and custom action

<component id="NoContentPane">
	<properties>
		<property name="contentImpl" value="GroupedActionsContentPane" />
	</properties>

	<component id="ActionGroup1">
		<properties>
			<property name="message" value="EMPTY_LIST_ADD_ELEMENT_MESSAGE" />
			<property name="actionNode" value="RefreshButton" />
		</properties>
	</component>
</component>

Toolbar

<component id="Toolbar">
	<properties>
		<property name="toolbarImpl" value="ModifiableHToolbar" />
		<property name="styleClass" value="ep-table-toolbar" />
		<property name="modifyingActionsStyleClass" value="ep-table-toolbar,spacing-8" />
	</properties>

	<component id="RootMenuActions">
		<component id="LeftActions">
		</component>
		<component id="RightActions">
		</component>
	</component>
</component>

Pagination

Basic style

<component id="Pagination">
	<properties>
		<property name="paginationImpl" value="SimplePaginationBar" />
	</properties>
</component>

Load more style

<component id="Pagination">
	<properties>
		<property name="paginationImpl" value="LoadMorePaginationBar" />
	</properties>
</component>