I am trying to right-align the column headers in the AgGrid. I know how to do this implementing a custom header component using IHeaderAngularComp and supplying my own template however that seems like a lot of work for something that should be trivial.
https://stackblitz.com/edit/angular-ag-grid-angular-ebvgjb
Align price column heading to right to match alignment with cell contents
I am using the following libraries.
"ag-grid-angular": "21.2.1"
"ag-grid-community": "21.2.1"
If you want all column headers to align right:
defaultColDef: { headerClass: "ag-right-aligned-header"}
If you want a single column header to align right:
{ headerName: "name", field: "field", headerClass: "ag-right-aligned-header" }
You would need to make these 2 changes to the css file to make it happen... since there is a little burger menu which gets visible on hover also.
::ng-deep .ag-cell-label-container{flex-direction: row}
::ng-deep .ag-header-cell-label { flex-direction: row-reverse; }
Forked your stackblitz with this change here
working stackblitz
fixed by defining template in headerComponentParams.
if you're looking to align some of the numeric columns to the right and other columns to left, you might want to check this link (https://stackblitz.com/edit/angular-ag-grid-angular-hzqdnw ) posted by #Imran in the comment section of the correct answer.
Related
How can I copy the pagination to the top of an Interactive Grid?
In an Interactive Report this can be done by simply changing a setting in Attributes, but this is missing in an Interactive Grid.
Thanks to the comment of #KoenLostrie I found a solution to move the footer to the top of the Interactive Grid, above the column headers. Not exactly a copy method, but it will work for now.
The code I used:
On page > Execute when Page Loads:
$("#IG-id .a-GV-footer").prependTo("#IG-id .a-IG-contentContainer");
On page > CSS Inline:
.a-GV-footer {
position: relative !important;
width: auto !important;
}
If someone has a solution on how to copy/clone the footer instead of move it, please let me know!
I have a bootstrap datatable with alot of data. One row in particular (Product) will always have a large amount of data. Currently the row expands downwards and takes up alot of space
I am trying to get the Product column to expand to the right instead of down, so that the product column title expands to fit the width of the data. The closes I've gotten so far is by adding this css style:
<style> td { white-space: nowrap; } </style>
Which will do the desired column growth, but for each column
Is there a way to have ONLY the product column get better styling to it expands to the right and grows the column width? Maybe even have two lines of text instead of one for a more compact text display.
https://jsfiddle.net/martinradio/yz46nLr8/61/
You can use td:nth-child(9).
td:nth-child(9){
white-space: nowrap;
}
See the JSFiddle: https://jsfiddle.net/ju4d73po/
For Bootstrap 4 use 'text-nowrap' class
const table = $('#listTable')
.DataTable({
columnDefs: [{
targets: 0,
className: 'text-nowrap'
}]
});
I would like to keep this button in the toolbar, keep its actions unchanged, keep the tooltip appear, but limit the label property to the tooltip only.
Inside the a.ui.addButton("Source"... of CKEDITOR.plugins.add("sourcearea",... in the ckeditor.js, the label option is defined like in the the other plugins that receive no permanent label on the toolbar. Tried
a.ui.addButton("Source", {
label: "",
command: "source",
toolbar: "mode,10"
});
which doesn't satisfy me 100%, as the tooltip is also removed.
CKEditor 4.x
I fixed this issue just by styling, maybe this could help you, if you still didn't figured out how this could be done
span.cke_button__source_label {
display: none;
}
I am trying for the last complete week to have html table with fixed header, dynamic column widths and horizontal scroll. There are many options already available but each one lacks or misses a part of requirement.
Any help would be appreciated.
#ashish - Not too sure on the dynamic width aspect, but I could possibly point you in the right direction with your other concerns. As far as the header, try something like this:
.th { position: fixed; }
For the horizontal scroll, try adding a container div around the table in your HTML, like so:
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Hope this helps!
I'm trying to apply some CSS to the headers (just the headers themselves - not the entire column) in a grid. Should be fairly easy I'd think but haven't been able to figure it out.
I've set up a jsFiddle here that contains a grid. I'd like the Name header to be bold, and the DOB header to be red.
Any help would be greatly appreciated, thanks!
If I uncomment cls in your columns definitions it works on fiddle.
try this in your CSS:
.x-column-header-text{color:blue;}
to change headers individually use:
.x-column-header-text#gridcolumn-1011-textEl{color:blue;}
.x-column-header-text#gridcolumn-1012-textEl{color:red;}
check: http://jsfiddle.net/6en2r/1/
forgot to mention the nth-child selector:
.x-column-header:nth-child(2){color:red;}
.x-column-header:nth-child(1){font-weight:bold; color: black;}