I've a p-datatable responsive and I need to set min-width for each column. This to avoid on resize to have a column width too small.
My table is created in this way:
<p-dataTable [value]="listValue" scrollable="true" scrollHeight="200px" [loading]="loading" [responsive]="true">
<p-column field="first" [style]="{'min-width':'90px'}">
<ng-template pTemplate="header">
<span title="My first Column">My first Column</span>
</ng-template>
</p-column>
....
</p-dataTable>
It doesn't work. First column became smaller than 90px on resizing page.
Check the layout of your current table (table-layout CSS property)
In this case, your table's layout maybe is FIXED, you are not able to set min-width or max-width for the columns.
Like #opt SD said change
.ui-table table {
table-layout: unset
}
and then make the min-width to your table headers
Related
I have datatable with paginator.
<p-table [value]="data" [paginator]="true" [rows]="10">
When I have no data on the page my datatable is collapsed.
Is it any possibility to set property like [min-rows]?
I have looked in primeng documentation but any results.
I don't want to use scroll.
Have you any idea how to resolve this problem?
Example here
EDIT:
#Shai, this setting makes the whole table goes wrong.
When I set fixed height for my table, for example:
.p-datatable-tbody { height: 500px; }
it looks good but td resizes (picture).
Example here
Currently the default behavior of PrimeNG DataTable is that it adjusts its height according to the number of rows to display.
We can fix the scrollheight, but if the number of rows are less table again adjusts to a smaller height.
You can set min-height to the body of this table. Try this:
::ng-deep .your-table .ui-datatable-scrollable-view .ui-datatable-scrollable-body {
min-height: 27vh;
}
You can try this: [tableStyle]="{'min-height': '30rem'}"
Currently I use l-lin/angular-datatables and the col resize plugin in order the user resize width columns. But still I need no wrap content when first load the table so the columns on first load must be the maximum width without any break lines in the content of any of the visible cells in that column.
Do you know a property or plugin for this?
Very important: I know the CSS config property nowrap for datatables but the problem is when I use it I cant resize with colresize plugin I need the user can reduce width of columns but this property do not allow because no wrap CSS only allow increase the width of columns but no decrease.
I thought it would be necessary create a angularjs directive for setting the white-space property : nowrap of CSS on firts load.
Thanks in advance
I am using Angular Material and have been looking at the md-grid-list lately for a design requirement I am trying to solve.
I have a bunch of div's that are children to a container with layout row applied. Each of the child items have set widths\heights and have a toggle button to expand\collapse, which just doubles their sizes on expand and then return to original sizes on collapse.
What I'd like is for the child items to re-order to fill available space (provided that space is big enough) around other items that have been expanded.
Right now the container element for my child items also has layout-wrap applied and so of course as items gets expanded, any children that don't fit horizontally just push down below the previous item.
I have come across md-grid-list but I am not so sure this will provide me with what I am after, as it seems to be more suited for percentage based sizes - or have I got that wrong?
I have seen http://masonry.desandro.com/ where if you resize the window on the homepage, that's the kind of behaviour I am looking for, although I would not want the height\widths to update dynamically.
Can this behaviour be achieved using Angular Material components alone?
I am not sure if I understand you correctly but that is exactly what the grid does?
You just set the column count and width/height ratio. You can also set the height of the rows in pixels. And you can configure it depending on CSS breakpoints.
<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="4"
md-row-height-gt-md="{{height ? '100px' : '1:1'}}" md-row-height="100px"
md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile class="gray" md-rowspan="2" md-colspan="2" md-colspan-sm="1">
<md-grid-tile-footer>
<h3>#1: (2r x 2c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="green">
<md-grid-tile-footer>
<h3>#2: (1r x 1c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
As you can see I added a toggle to switch height between ratio and fixed heigth: md-row-height-gt-md="{{height ? '100px' : '1:1'}}".
Everything is animated by default but you can roll your own animations with angular-animate.
http://codepen.io/kuhnroyal/pen/QyxOQo
I find that when a ng-grid is inside an accordion and is initialized with the accordion closed, the width of the ng-grid header and rows are set to a fixed 100px, instead of extending to the full width of the table.
I created a plunker: http://plnkr.co/edit/9GRli7qtg65NKNZOz3vh?p=preview
The accordion is set to be closed by default, expand it and see the table is squeezed to the left. Change '$scope.isopen' to true in the controller and see when ng-grid is not hidden when initialized, the width is fine.
Is this a bug? Any way to easily work around it?
it's probaby a bug but according to this stackoverflow answer, there's a workaround. The width is adjusted as soon as you resize the window, so you need to trigger the resize event using the ng-click in the accordion directive.
Example:
controller:
$scope.resizer=function(){
$(window).trigger('resize');
}
html:
<accordion ng-click="resizer()">
<accordion-group heading="Grid" is-open="isopen">
<div class="gridStyle" ng-grid="gridOptions"></div>
</accordion-group>
</accordion>
Live example: http://plnkr.co/edit/ohRDzj25R7rn1YiUbPjF?p=preview