I tried to use a column group as autoGroupColumnDef as I want the the header to be in the top row aligned with other top headers. When I do this the header is rendered in the "sub header" row and the innerRenderer is not used. Anyone knows if it's possible to get this to work?
The column group looks like this.
headerName: 'Group header',
children: [{
headerName: '',
suppressMovable: true,
suppressSizeToFit: true,
pinned: 'left',
field: 'name',
minWidth: 200,
sort: 'asc',
cellRendererParams: {
suppressCount: true,
innerRenderer: 'myCustomRenderer',
}
}]
} as ColGroupDef
Related
Is there a way to conditionally format MUI datagrid cell that has a 'boolean' type.
Here is a sandbox from documentation with a checkbox column that has a boolean type: https://codesandbox.io/s/1ckfjp?file=/demo.tsx:1771-1855
const columns: GridColumns = [
...
{
field: 'isPaid',
headerName: 'Is paid?',
type: 'boolean',
width: 140,
editable: true,
},
...
Is using cellRender (in cols definition (https://mui.com/x/react-data-grid/column-definition/#rendering-cells)) the only way to render my own green or red icons depending if value is true or false? Or is there a better way?
So far this seems the easiest way:
const columns: GridColumns = [
...
{
field: 'isPaid',
headerName: 'Is paid?',
type: 'boolean',
width: 140,
editable: true,
renderCell: (params) => {
return params.value ? (
<CheckIcon
style={{
color: theme.palette.success.light,
}}
/>
) : (
<CloseIcon
style={{
color: grey[500],
}}
/>
);
},
},
...
Example at https://plnkr.co/edit/0CPdb8dXPCafCJjI
const gridOptions = {
columnDefs: [
{ field: 'athlete',
minWidth: 150,
rowGroup: true,
hide: true, },
{ field: 'year', maxWidth: 90 },
],
defaultColDef: {
flex: 1,
minWidth: 100,
editable: true,
},
enableRangeSelection: true,
enableFillHandle: true,
fillHandleDirection: "y",
groupDisplayType: "groupRows",
groupDefaultExpanded: 1,
};
Grid has row groups. Selecting 2004, holding down "alt" and dragging down increases the value in column "Year" as intended. The issue comes when dragging over to a new group. I would like first row for "Natalie Coughlin" to be 2006, but it seems like AG grid is counting group row header as a regular row.
Anyone know how to accomplish this?
I want to export aggrid data to Excel. But i want to export selected columns only. I didn't find any option to exclude columns while export.
Can anyone suggest how to export selected columns only.
You can define specific columns using the columnKeys parameter in exportDataAsExcel().
See the documentation here: https://www.ag-grid.com/javascript-grid/excel-export-api/#excelexportparams
Using 'columnKeys' in the params is the correct way to do this. For example you can grab your column field names and pass them in: In this example my field names are 'employeeNumber', 'firstLastName', and 'currentlyRequestedHours' which I grab from my columnDefs.
{
field: 'employeeNumber',
headerName: 'ID',
filter: 'text',
sortable: true,
filterParams: { suppressAndOrCondition: true },
},
{
autoHeight: true,
field: 'firstLastName',
headerName: 'Name',
sortable: true,
filter: 'text',
filterParams: { suppressAndOrCondition: true },
},
{
field: 'currentlyRequestedHours',
headerName: 'Pending Hours',
sortable: true,
valueFormatter: gridDateValueFormatter,
filter: 'agDateColumnFilter',
filterParams: { suppressAndOrCondition: true },
type: 'numericColumn',
}...
private params = {
columnKeys: ['employeeNumber', 'firstLastName', 'currentlyRequestedHours']
};
onBtExport() {
this.gridApi?.exportDataAsExcel(this.params);
}
How to hide the column in AG-Grid and also it should not be displayed in Tool Panel...
var columnDefs = [{ headerName: "Stone_ID", field: "Stone_ID", width: 100, hide: "true" }]
You can set the column property of suppressToolPanel to true to achieve that.
var columnDefs = [
{
headerName: "Stone_ID",
field: "Stone_ID",
width: 100,
hide: true,
suppressToolPanel: true
}
]
If you are looking for dynamically show/hide columns follow below:
You can use either setColumnVisible or setColumnsVisible.
NOTE: those functions expect a colKey(s) which is related to the field you set in columnDefs.
columnDefs = [
{
headerName: "Name",
field: "name", // => that!
width: 150
},
{
headerName: "Last Name",
field: "last_name", // => that!
width: 150
},
// ...
];
When using setColumnVisible you can show/hide a single column
gridOptions.columnApi.setColumnVisible('name', false) //In that case we hide it
When using setColumnsVisible you can show/hide multiple columns
gridOptions.columnApi.setColumnsVisible(['name', 'last_name'], true) //In that case we show them
To do this programatically you can use:
Hide columns:
this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], false);
Show columns:
this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], true);
To do this for a whole column group you can use:
const group = this.columnApi.getColumnGroup("MY_GROUP");
group.children.forEach(child => this.columnApi.setColumnsVisible(child, false));
Posting late but It may helpful for others with some extra details:
If you want to hide your column on the grid you can use hide property to hide that column from the grid.
Only hide from grid colDef example:
colMainDef = [
{
headerName: 'Approved',
field: 'status',
hide: true
}]
But the same column will still be accessible on the side menu panel if you want to hide it from the side menu you can use one more property suppressColumnsToolPanel by making this true it will hide the column from the side menu.
Hide column from the grid as well as from side panel colDef example:
colMainDef = [
{
headerName: 'Approved',
field: 'status',
suppressColumnsToolPanel: true,
hide: true,
}]
Hope this will helps to hide/show columns as per your requirements.
var columnDefs = [{ headerName: "Stone_ID", field: "Stone_ID", width: 100, hide: true }]
{
...,
hide: true,
suppressColumnsToolPanel: true
}
In the package.json:
"dependencies": {
"#ag-grid-community/angular": "^24.1.0",
"#ag-grid-enterprise/all-modules": "^24.1.0",
...
}
hide: should get the value true, not the string "true" (like width: gets 100, not "100")
Just add "hide: true" in your column definition.
Ex:
var columnDefs = [{ headerName: "ABC", field: "XYZ", hide: true }]
hide column on load
{
headerName: 'ROE',
field: 'roe',
width: 100,
hide: true
},
based on selection you can show/hide it using
example
this.gridColumnApi.setColumnVisible('roe',true);
We can hide column dynamically in the following way using onColumnVisible listen event
const onColumnVisible = useCallback(params => {
if (params.source === 'toolPanelUi') {
const colId = params.column ? [ params.column.colId ] : params.columns.map(col => col.colId)
const value = columns.map(v => {
if (v.colId === colId.find(c => c === v.colId)) {
params.visible ? v.hide = false : v.hide = true
}
return v
})
if (value) {
setColumns(value)
}
}
}, [ gridParams, setColumns ])
<Grid onColumnVisible={onColumnVisible } />
I have a FormPanel with 3 columns. Each column is 33% of the FormPanel width. Looks something like this:
searchForm = new Ext.FormPanel({
frame: true,
title: 'Search Criteria',
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
width: 900,
items: [{
layout: 'column',
items: [{ // column #1
columnWidth: .33,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Banner ID',
name: 'bannerID',
anchor: '95%',
},
new Ext.form.ComboBox({
fieldLabel: 'Advertiser',
typeAhead: true,
triggerAction: 'all',
mode: 'local',
emptyText: 'Advertiser',
store: advertiserList,
valueField: 'id',
displayField: 'name'
})] // close items for first column
}, {
columnWidth: .33,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Banner Name',
name: 'bannerName',
anchor: '95%',
},
new Ext.form.ComboBox({
fieldLabel: 'Art Type',
typeAhead: true,
triggerAction: 'all',
mode: 'local',
emptyText: 'Art Type',
store: artTypesList,
valueField: 'id',
displayField: 'name'
})] // close items for second column
}, {
columnWidth: .33,
layout: 'form',
items: [{
xtype: 'hidden'
},
new Ext.form.ComboBox({
fieldLabel: 'Art Size',
typeAhead: true,
triggerAction: 'all',
mode: 'local',
emptyText: 'Art Size',
store: artSizeList,
valueField: 'id',
displayField: 'name'
})] // close items for third column
}]
}]
}); // close searchForm FormPanel
It displayed something that looks like this:
Only problem is I want the "Art Size" field/label to be aligned on the same row as the "Advertiser" and "Art Type" fields. Is there any way to add a "blank" item, such that it forces the entry down to the correct row? Is there another approach to this that I'm missing?
Thanks!
EDIT:
This worked:
{
xtype: 'component',
fieldLabel: ' ',
labelSeparator: ' ',
}
by default empty labels are hidden (the field is pushed to the left).
instead of putting '  ;' label ...
fieldLabel: ' ',
labelSeparator: ' ',
you can do it properly:
hideEmptyLabel : false
witch will align your filed component even if no label is specified.
EDIT: This worked:
{
xtype: 'component',
fieldLabel: ' ',
labelSeparator: ' ',
}
Your solution will work but it is not the ExtJS(/HTML tables) way.
You are using a column layout so you can use colspan: 2 on the banner name field which results in the same output.
You also can use rowspan to have your field cover two rows :)
None of the above seems to have worked for me. I had to explicitly set the height of the empy cell.
xtype: 'label',
text: ' ',
flex:1,
height:22
Disappointing to say the least.
However this only works with vBox layout. If I use anchor layout then nothing works :(