MDC Web Datatable component - Paging, Sorting - material-design

I am new to Material Design, Trying to implement paging and sorting for the MDC web datatable component. I have managed to achieve sorting but when the table is redrawn it looks weird
Before Sorting
After Sorting

Related

What should I use to view for nested data?

I want to list the faculties at the university.Then I want to list the departments at the selected faculty,then I want to list the lessons at the selected department.
Faculties>|selected faculty|>departments>|selected dept|> list of lesson
What should I use to view for this structure?Which datatable/uicomponent is more suitable for me? I use Primefaces 5.0 in the view layer.
Datatable
You will have to implement some listeners (i.e. to fetch your next list based on the selected value) but that won't be a tough task since PrimeFaces datatables provide selection features (row click, button, ...) Just look at the showcase links below to get an overview.
Showcase:
http://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml
Master Detail
This is part of Primefaces Extension but seems to fit your needs because most of the logic is ready to use out of the box (ajax: update list view, update breadcrumbs, ...)
Showcase: http://www.primefaces.org/showcase-ext/sections/masterDetail/basicNavigation.jsf
Tree
Either horizontal (http://www.primefaces.org/showcase/ui/data/htree/basic.xhtml) or vertical (http://www.primefaces.org/showcase/ui/data/tree/basic.xhtml). If you want to display your data within a table, consider using the TreeTable (http://www.primefaces.org/showcase/ui/data/treetable/basic.xhtml).
However this will require to handle a TreeNode and it will, IMO, be way more difficult to build the TreeNode dynamically

Generic CRUD using JSF and PRimeFaces

I was looking for some general guidelines for creating a generic CRUD page using JSF (2.1) and PrimeFaces (5.0)(specifically using PF's <p:dataTable> component). Some of my requirements are as follows:
Dynamic number of columns (based on the #of columns of a selected Database Table)
Inline editing
Popup (dialog) edit
I have tried using <p:columns> component to show the dunamic #of columns, however, it seems I cannot use the inline editing feature <p:rowEditor> when I use <p:columns>
Any help in terms of suggestions/recommendations is highly appreciated. My goal is not to create seperate pages for each table but to use the same page (component) for multiple DB tables.

PrimeFaces LazyDataModel advanced filters

I'm using PrimeFaces LazyDataModel and it's working fine. However, I need to add some advanced filters in my Facelets page. I don't want to use the PrimeFaces native filter, with the filters in the table header. I need advanced filters in a form, and a 'search' button for searching, using the features of primefaces lazy pagination.
Can I do this? Is there a way to call the 'load' method in my search button using my advanced filters?
'Load' method is called every time on update.
You can add ArrayList of filters for your implementation of lazy model and use them in 'load' method

Custom components in JSF - what about sub-components (children)

When Im creating custom component in JSF do I have to create all sub-components in that same way?
For example:
h:dataTable component use h:column to determinate column parameters
Now if I want to create dataTable component do I have to implement in that same way a column component?
(PS. "that same way" mean:
create DataTable class extends i.e. UIOutput
create DataTableTab class extends UIComponentELTag
append configuration to
custom.taglib.xml
In general the answer is no. If you create a complex component like a datatable, it can simply take advantage of the existing components for defining columns.
As the designer of such a dataTable, you are the one who determines what's needed. The standard column afaik has no knowledge of the dataTable, but the dataTable has knowledge about the columns.
Also note that you don't often need to create tag classes. This is only needed for JSP compatibility, but as JSP is deprecated I would advise you to not support it unless you really have to.

Lazy data loading with rich:dataTable and rich:dataTableScroller

I am using rich:dataTable with rich:dataTableScroller. And I don't want load all my data from DB when initialize table, because I have very many records. I want that that rich:dataTableScroller show me real page count but load page only when I switch on in. I find some solution here
But I want use rich:dataTable andrich:dataTableScroller, and don't write my own components. Have somebody some ideas ?
You should create a custom org.richfaces.model.DataProvider, and in getItemsByRange you should fetch the limited data.
You should then construct an ExtendedTableDataModel passing your custom DataProvider, and use this model in your <rich:dataTable> - value="#{myBean.myExtendedDataModel}"
You can create your own "PagedDataModel", which actually returns only the data that will be shown in the page you are seeing.
I have found an example for this here.
You can write your own datamodel as child of richfaces ExtendedDataModel, which has method:
protected List<T> loadData(int offset, int limit, List<Order> orders)

Resources