Display only data (no headers) in p:dataTable

[nirvanbd]

Is it possible for a p:dataTable to display only data (with no headers). When there is no data, the dataTable should display nothing on the webpage, and when there is some data, it should display only the data (without header).

regards,
Nirvan.

[bumble.bee]

You can use the rendered attribute of the dataTabe to conditionally hide the dataTable if your entity collection is empty.

[Franke]

You could simply use h:datatable instead if you don't need any special functions only available in primefaces.

[Daedalus]

The solution is very simple. The header is a simple div with a styleClass.

The styleClass is named "ui-datatable-header" for a normal dataTable or "ui-scrollable-datatable-header" if the table is scrollable.

So just overwrite the corresponding css class:

ui-datatable-header{
display:"none";
}

[nirvanbd]

Daedalus,
I used your solution and got rid of the main header. However, the column headers still appear.

regards,
Nirvan.

[smallya]

Nirvan
Did you eventually get a solution for this?

[healeyb]

I do this by not having any column headers, i.e. no headerText= and
p:dataTable styleClass="noheader", with this in the css:

Code: Select all

.noheader.ui-datatable table thead {
    display: none;
}

no doubt this is one of a myriad of ways of doing this! With the following
css selectors using p:dataTable styleClass="noborder" all borders are
entirely removed which is quite an interesting effect:

Code: Select all

.noborder.ui-datatable table {
    border: 0 hidden;
    border-collapse: separate;
}

.noborder.ui-datatable table thead {
    display: none;
}

.noborder.ui-datatable tr {
    border: 0 transparent;
    background: transparent none;
}

.ui-datatable .ui-datatable-data tr.ui-state-highlight {
    background: #dfdfdf;
}

.ui-datatable .ui-datatable-data tr.ui-state-highlight.ui-selected {
    background: #c6deff;
}

I did try .ui-datatable-header but that didn't quite seem to work for me.

Regards,
Brendan.

[remya.jacobn]

I also have a requirement to not display the column headers for p-dataTable.
I have tried the solution using style class as below.

Code: Select all

<p-dataTable  [value]="newReleaseList"  [editable]="true" emptyMessage="" styleClass="noHeader">
....

in the component's css i have updated the below style class.

Code: Select all

.noHeader .ui-datatable table thead  {
    display: none !important;
}

This does not seem to work for me.
I have tried the id approach as well, but all options that I try, it is not able to reference the ui-datatable div inside the p-dataTable.

Any help appreciated.

[kukeltje]

You are posting in the wrong forum. You use prime-ng, not PrimeFaces

[dannycrane]

I really benefit from reading content form this site. I must admit that I'm particularly impressed by how the members of this forum share very helpful solutions. Expert Research Paper Writers