Data table - responsive hide columns

[NiklasT]

I need functionality to hide/show columns responsivly on table width.
So that things disappear or show up depending on table width.

similar to this for example:
https://datatables.net/extensions/respo ... /auto.html

It does not look like this is a functionality ngPrime table has. Unless I missed something.

Has anyone solved this in some way or have any suggestion what a good approach would be?

[cagatay.civici]

It is quite easy to implement using TurboTable as you have full control over the th and td elements. You can write a css that hides after a certain breakpoint. We can add a demo soon.

[lbroker]

I did check current primeNG Table component responsive example only shows columns stacked in small screen.

What about similar functionality like in primefaces table with hiding columns based on priority?
https://www.primefaces.org/showcase/ui/ ... fwid=941eb

Is there example how to achieve this on PrimeNG table component?

[PhilHuhn]

Hey:
PrimeNG's responsive table is virtually all CSS. The column titles (labels) are hidden until it is collapsed into responsive

Code: Select all

<span class='p-column-title'>Id</span>

Once the table is responsive the header, etc are hidden and the column titles is unhidden.

Code: Select all

<p-table #dt id='employees-grid' [value]='employees' [responsive]='true'
		scrollHeight='200px' [scrollable]='true'
		[(selection)]='selectedEmployee' selectionMode='single'
		(onRowSelect)='onRowSelect($event)' dataKey='EmployeeId'>
	<ng-template pTemplate='caption'>
		<div class='nsg-row nsg-text-center'>
			<h5 class='nsg-primary-color'>Employee Selection</h5>
		</div>
	</ng-template>
	<ng-template pTemplate='header'>
		<tr>
			<th style='width: 65px;'>
				Id
			</th>
			<th style='width: 280px;'>
				Name
				<p-columnFilter type='text' field='EmployeeName' matchMode='contains' display='menu'></p-columnFilter>
			</th>
			<th>
				Company
				<p-columnFilter type='text' field='CompanyShortName' display='menu'></p-columnFilter>
			</th>
			<th>
				Div/Depart
				<p-columnFilter type='text' field='DeptDivShortName' display='menu'></p-columnFilter>
			</th>
			<th>
				Job Title
				<p-columnFilter type='text' field='JobTitle' display='menu'></p-columnFilter>
			</th>
		</tr>
	</ng-template>
	<ng-template pTemplate='body' let-rowData let-columns='columns'>
		<tr [pSelectableRow]='rowData'>
			<td style='width: 65px;'>
				<span class='p-column-title'>Id</span>
				{{rowData.EmployeeId}}
			</td>
			<td style='width: 280px;'>
				<span class='p-column-title'>Name</span>
				{{rowData.EmployeeName}}
			</td>
			<td>
				<span class='p-column-title'>Company</span>
				{{rowData.CompanyShortName}}
			</td>
			<td>
				<span class='p-column-title'>Division/Depart</span>
				{{rowData.DeptDivShortName}}
			</td>
			<td>
				<span class='p-column-title'>Job Title</span>
				{{rowData.JobTitle}}
			</td>
		</tr>
	</ng-template>
</p-table>

CSS

Code: Select all

/* Responsive */
.p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
    display: none;
}

@media screen and (max-width: 40em) {
   .p-datatable.p-datatable-responsive .p-datatable-thead > tr > th,
   .p-datatable.p-datatable-responsive .p-datatable-tfoot > tr > td {
        display: none !important;
    }

    .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td {
        text-align: left;
        display: block;
        width: 100%;
        float: left;
        clear: left;
        border: 0 none;
    }

    .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
        padding: .4rem;
        min-width: 30%;
        display: inline-block;
        margin: -.4em 1em -.4em -.4rem;
        font-weight: bold;
    }
}

I suggest you request this as a feature at
https://github.com/primefaces/primeng/issues
While you are there you can look at the source code for all of the controls.

[lbroker]

Hi PhilHuhn

I think your shown example is not what I asked in my previous post and in the initial post by Niklas.
In Responsible tables (JSF or datatables.net) there is useful way to hide just some not important columns when screen narrows.

For example I mean table in full screen shows 5 columns, then by narrowing screen to 70% table shows just 4 columns, later just 3.
And finally in mobile screen table shows 3 columns in stacked version.

[PhilHuhn]

Hey:
I had some success with the following that I pulled from StackOverflow:

Code: Select all

@media screen and (max-width: 900px) {
  p-table#employees-grid tr th:nth-child(4),
  p-table#employees-grid tr td:nth-child(4) {
    display: none !important;
  }
}
@media screen and (max-width: 1000px) {
  p-table#employees-grid tr th:nth-child(5),
  p-table#employees-grid tr td:nth-child(5) {
    display: none !important;
  }
}

I placed the above in the component's CSS file. The component id is employees-grid

Code: Select all

<p-table #dt id='employees-grid' [value]='employees' [responsive]='true'
    scrollHeight='200px' [scrollable]='true'
    [(selection)]='selectedEmployee' selectionMode='single'
    (onRowSelect)='onRowSelect($event)' dataKey='EmployeeId'>
   ...