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
Related
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;
}
I am using CRUD operation on Primeng Datatable. If i clicked row of the table it raises the dialog box to edit the data. But selected row's background changed to blue. Is there any way to change background color of selected row? Primeng version 9.1.1
i referred previous stackoverflow question But not working.
Use
:host p-table ::ng-deep .ui-state-highlight{ background:red; }
Explain
After :host you have to set the component that host in your component (in your case the Primeng table)
And then after ::ng-deep set the class that inside the hosted component that you want to change
for example stackblitz
EDIT
to make it more generic you can put the code in style.css file as below
p-table .ui-state-highlight{ background:red!important; }
see example here
I don't know how to remove tooltip from a pagination element. I'm using antd's table. This table contains a pagination. It's a part of the table. I'm trying to customize it using styled-components library. I've tried to find all classes which is containing tooltip in their titles and set them:
display: none !important;
But there was no result. There should be some class that is used for this purpose which I have no idea.
I will be grateful if someone knows the solution for this issue.
The tooltip comes from the title attribute of <li/> elements.
Such behavior is by design, therefore you can't remove it.
Alternative solutions which aren't recommended:
Implement Pagination by yourself, style it using the antd-css classes and integrate it with your custom Table.
Dynamically remove all title attributes by querying the dom.
Add showTitle=false in pagination, just put this...
pagination={{...pagination, <b>showTitle: false</b>}}
OR
pagination={<b>showTitle: false</b>}
It will disable tooltip in pagination.
My code Image:
And site API image:
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'}"
In Angular js ui rid, how can I remove vertical and horizontal scrollbars ?
And also for each column heading I am getting a little carrot icon by default, which shows sort ascend, sort descent, Hide column. I want to remove this also from my column headings.
Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?
enableHorizontalScrollbar : 0,
enableVerticalScrollbar : 0,
enableSorting : false,
enableColumnMenus : false;
Good answer from #Asqan answering the first part of your question. For the second part:
Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?
I'm thinking you mean you want the look in this plunker I created.
You can solve these css issues in one of two general ways.
1) Customize the ui-grid css
2) Leave the original ui-grid css then override it in your own css file
I've shows the first option to solve your "stripped" issue and the second option to implement your desired border. I have done both for example only so you can see both options - I recommend choosing and using consistently one method or the other.
The ui-grid sets the ".table-striped" look to which you are referring in the css. You can override this either in you own css file or using the customizer tool and setting the #rowcoloreven and #rowcolorodd fields to the hex code for white #ffffff. This will update the ui-grid css to contain the below:
.ui-grid-row:nth-child(odd) .ui-grid-cell {
background-color: #ffffff;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: #ffffff;
}
For ".table-bordered" see specifically in the style.css file these added lines
.ui-grid-cell {
border-style: solid;
border-bottom: 1px #ff0000;
}