I'm using Material-table in my project and I'd like to apply a max-width to every column. I want to do that because the specific column is misconfiguring my table.
For example if I do, max-width: '150px' in that column, I get this below. The text overrides everything.
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
I want to clarify very clearly in a Data Studio report what the date range is that the report is currently running over.
So I want to add a text box up at the top of the screen to display this.
Is this possible?
From what I understand text labels can't display anything dynamically. Is it possible to do this with a function using the 'scorecard' data chart type or something similar ?
No, you can't make a label dynamic. However, you can make a table look like a label.
If you remove everything from a table (row numbers, title, border, colors, etc) it will look like a label with the ability to update dynamically. You can also use this trick to display dynamic images.
After this, just add any date field you already have as a metric, using functions MIN or MAX accordingly.
Step-by-step to turn a table into a dynamic label:
Disable Show header
Cell table color: Transparent
Odd/Even row color: Transparent
Disable Row numbers
Disable Show pagination
Background color: Transparent
Border color: Transparent
Chart header: Do not show
I made a public dashboard to illustrate the results:
Data Studio Report
Data Source
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:
I have a problem with aligning text in a single row I tried using Fexl approach as well as other approaches as well
also some of the data in my div is rendered dynamically using ng-repeat
the third column displays special data always.
all the rows from 3 columns should be aligned equally
please help me
link for plnkr http://plnkr.co/edit/LSLktvmvlaQtWUofzJvF?p=preview
I think I understand your question - I ran into a similar problem on another project, and I ended up giving each div a fixed height and setting the overflow to hidden. It takes a bit of testing, but if you're aiming for a responsive design, you can uses Sass to set it to different heights based on screen resolution.
Adding this CSS to your Plunkr would be a good starting point. Of course, you'd want to apply this to a custom class and not '.col-md-6':
.col-md-6 {
height: 100px;
overflow: hidden;
}
Increase the 'height' as needed to make sure all text fits.