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'}"
Related
Is there any way to set columns width to match the width of the max length content? I want to make the first column that shows the counter of the row to autosize the width and not style it with text-overflow: ellipsis; which seems to be the default behavior.
See below screenshot regarding the first column:
Any idea would be helpful. Also new to ExtJs framework.
You can use the flex config. It's kinda a weighted value and lets you tell the container how much of the total area you'd like to give that component.
So, say you have 4 columns and you set each flex config to 1, they each get 1/4 of the total width.
Set the first column to flex: 1 and all the other flex: 2. Or set all the other columns to flex: 1 and the first column to flex: 0. Just play around with the value until you get the look you want.
Hope this helps.
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
Is it possible to change the width of a row? I have some rows with JSON data. It would be best to display them in a <pre> tag so that the user can view it naturally, but this seems to be impossible.
So now I'm wondering is it possible to remove the default overflow-x: hidden? And to just let the user scroll to the end of a row? Instead of the text just having 3 dots at the end, because there's a max-width.
In the data-grid css api they show the necessary classes which could be overridden, and at the end they say:
You can override the style of the component thanks to one of these customization points
...
So you could add the following style rule to override the default one :
.MuiDataGrid-root .MuiDataGrid-cell {
text-overflow: initial;
overflow-x: auto;
}
Which component i must use, to obtain a highlight in a row when the mouse is over a row, using the material-table component?
I dint find any property or which component override to obtain that.
Thanks in advace for your time
Best Regards
Here is the code https://codesandbox.io/s/yv13zjr9w9
you could create a css to highlight row
tr:hover{
background:gray;
}
Refer to sandbox
https://codesandbox.io/s/y686o6n9
If you want only this table to have an hover effect, wrap it in another element or give it a class as in the example above:
https://codesandbox.io/s/4wkpp98z69
.myTable tr:hover {
background-color: red;
}
Using Angular ui-grid latest version (4.0.0) having 6 columns and it displays correctly on laptop/desktop(Big screens) but displays very badly in small screen devices(Mobile phones), data get cut with (...) and columns display one below the other. Anything to fix it?
We already using the columnDefs with column width in % but it was not coming, though, I have figured it out actually parent div was given 100% width so it's taking viewport width and adjust grid accordingly but when parent width removed its works!!!