I'm trying to lock the "actions" column to the right in my grid.
Is there a way to do this in the free version (MUI DataGrid, not DataGridPro)?
initialState={{ pinnedColumns: { right: ['actions'] } }}
please try adding this property to your datagrid.
Related
I want to add a tooltip for each cell in my MUI DataGrid (for all DataGrids).
For this, I will create a new component that inherits from MUI DataGrid, but I want to apply renderCell for every column directly (instead of having to rewrite the renderCell param in each column definition).
Is this possible? Thank you.
I have one column that can range from just a few words, to a long paragraph. AG-Grid automatically handles the overflow of the column with the 3 dots, but what I am hoping to do is to show a tooltip with the complete contents of that column... but only to show the tooltip when the column is actually overflowing.
Is this even possible?
Thanks in advance!
You can use tooltipValueGetter property in you ag-grid columns definition. so it could be something like this, if it's returns null it will not show any tooltip.
tooltipValueGetter: function(p){
console.log(p);
if (p.value.length > 20) {
return p.value;
}
return null;
},
I hope you're having a good day.
So I am using ag-grid in my project to transform a bunch of excel tools(files) in one unified web-application.
So far so good.
However, I couldn't find a way to make the grid cells show the whole input text with the ag-grid framework.
In Excel:
In ag-grid:
I hope I have made my point clear.
I have searched in the ag-grid documentation but with no result. This also seems to be the default input text cell rendering in all of their projects examples.
https://www.ag-grid.com/javascript-grid-cell-editing/
Any help is welcome :)
This one is similar to one I already answered: AG-Grid - How to increase row height dynamically?
Provide a CSS class for the column
{
header: 'Address',
field: 'address',
cellClass: "cell-wrap-text",
}
CSS class - keep it in your root level styles.
.cell-wrap-text {
white-space: normal !important;
}
I'm trying to manipulate the style of a data-table being used with ag-grid plugin. The background colour of each row seems to cut off before the end of the table when it's inside of a CSS overflow parent. What can I do to avoid that cut off so that everything is in colour?
I had the same issue and solved it by
using overflow: auto on ag-body-viewport class and remove width: 100% on the .ag-body-container{} class, in case you have that.
I have a problem with DataGrid in gwt 2.4. I made table with CellTable, and everything worked fine. But I needed fixed header, and then just replaced CellTable with DataGrid. I had problem with .css file, but than has been resolved.
Now, the problem is that every column have fixed width, and table put every row just in visible part of screen.
This is new and old screen shots, to make things more clear :)
http://img832.imageshack.us/img832/5026/oldscreenshot.jpg
http://img834.imageshack.us/img834/1489/newscreenshot.jpg
Can someone help to make old looking, but with fixed header.
You can set a fixed width for each column of the data grid:
dataGrid.setColumnWidth(sampleColumn, 40, Unit.PX);
and expand the total data grid width:
dataGrid.setWidth("100%"); // choose the most useful in your app
dataGrid.setWidth("1400px");
I'm not sure what the right answer is, but I don't think the previous responders understood the question.
Basically, you want dataGrid to use "table-layout: auto" instead of "fixed". This is what cellTable does. Table columns are auto-sized based on content.
This is easy for the content table, but to get the header-freeze, dataGrid is using a separate div/table for the header. Therefore, the header table's columns need to be explicitly sized based on the data table. They also need to be resized anytime the table changes (browser resizes, etc.). I plan on adding resizeable cols on a dataGrid, so I'll be hitting this same challenge soon I expect and will update when I have something more explicit if anyone is still tracking this thread...
need to wrap your content in your td with an inner div. and make sure the overflow-x is set to hidden.
table {
overflow: hidden;
white-space: nowrap;
table-layout: fixed;
}
td div{
overflow-x:hidden;
}