0

How to set PrimeUI Datatable column width? I have tried this code("http://www.primefaces.org/primeui/datatable.html"), it is working fine but i want to set width of column, please help me
Thx in advanced

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Suraj Kharwde
  • 163
  • 3
  • 10

2 Answers2

2

Just add width to

.pui-datatable thead th, .pui-datatable tbody td, .pui-datatable tfoot td

class?

Edit:

.pui-datatable thead th:nth-child(1),
.pui-datatable tbody td:nth-child(1),
.pui-datatable tfoot td:nth-child(1) {
    width: 50px;
}

.pui-datatable thead th:nth-child(2),
.pui-datatable tbody td:nth-child(2),
.pui-datatable tfoot td:nth-child(2) {
    width: 100px;
}
Goombah
  • 2,835
  • 2
  • 12
  • 22
  • It is working but i want set width of particular column.How can i set it for ex- 1st Column width:50px, 2nd column width:100px, thx in advanced – Suraj Kharwde Jan 06 '14 at 11:17
  • I've edited my answer. Remove the width you've added now and add these classes. – Goombah Jan 06 '14 at 11:28
2

Another option is to use the headerStyle option in the columns array.

{field: 'view', headerText: 'View', content: createEditButton, headerStyle: "width:8%"},

I haven't been able to find the complete options list for the columns array so if anyone knows where it is please post it!

RandyK
  • 71
  • 6
  • http://primefaces.org/primeui/#datatable scroll down to the discussion on Column array. it's hidden in the "Datasource" subtopic. sometimes i wish the primefaces documentation was as stellar as their products :-) – him May 03 '18 at 17:59