I am working on grid using AgGridReact and enabling rowGrouping by setting it to true. However, it only adds the column "Group" but no actual grouping happens
const columnDef = [
{field: "module", width: 120, rowGroup: true, hide: true},
{headerName: "Ref Name", field: "referenceName", width: 120, },
{headerName: "ID", field: "referenceId", width: 120, }
]
const gridOptions = {
columnDefs: columnDef,
animateRows: true,
defaultColDef: {
sortable: true,
resizable: true,
enableRowGroup: true
},
rowData: mediaUsage
}
As you can see in the below image, it only adds GROUP column but no actual label appears
It should be group by Module column which is below
I've watched multiple tutorials and it's the rowGroup property that will display the grouping, but it doesnt in my case. Hope anyone could help. Thanks!
I have a large table that spans multiple horizontal screen widths on a normal display because it has many columns. These columns are grouped in column groups, which can be quite large. Now I have the problem that when looking at the values in the table, it is not directly visible in which column group a cell is because the only visual guide is in the column header. Since in my use case there are multiple column groups with similar information, it is quite hard to tell which cell belongs to which column group and/or column.
Let's say we have the following column defs:
var columnDefs = {
headerName: "Sports Results 2016",
marryChildren: true,
children: [
{headerName: "Gold", field: "gold", width: 75},
{headerName: "Silver", field: "silver", width: 75},
{headerName: "Bronze", field: "bronze", width: 75},
{headerName: "Total", field: "total", width: 75}
]
},
{
headerName: "Sports Results 2017",
marryChildren: true,
children: [
{headerName: "Gold", field: "gold", width: 75},
{headerName: "Silver", field: "silver", width: 75},
{headerName: "Bronze", field: "bronze", width: 75},
{headerName: "Total", field: "total", width: 75}
]
},
{
headerName: "Sports Results 2018",
marryChildren: true,
children: [
{headerName: "Gold", field: "gold", width: 75},
{headerName: "Silver", field: "silver", width: 75},
{headerName: "Bronze", field: "bronze", width: 75},
{headerName: "Total", field: "total", width: 75}
]
};
Now when I look at a row at the bottom, it's kind of hard to compare the values between column groups. And it gets worse if the units differ from column to column (m, kg, sec, etc) and are only written in the header.
Here the plunkr for the code with the resulting layout.
Now I am searching for a way to add a some styling to the column group, so there is a visual distinction within the data table between different column groups. Something like vertical lines between column groups. Like in the following picture (color red chosen for demonstration, in the end black or a similar style as in the header row would be nice):
I tried to find a easy way to get such a layout in ag-grid, but I only found ways to add a style only to the headers or every cell in the column group. Does someone have some experience with such a situation or have an idea how to make the distinction more clear?
Help is appreciated!
I found a solution that works, but uses a undocumented property of the cell object used during the cell customization. And it only works with cellStyle and not with cellClass or cellClassRule. (See section Cell Styles -> cell style in Ag grid documentation)
Basically you can add a default column definition to the grid options that sets the cell style of each column and therefore of each cell to a function. This function paints a border on the left side of a cell, if the column of the cell is the first displayed child of it's parent.
var defaultColumnDefs = {
cellStyle: (cell) => isFirstColumn(cell) ? {'border-left': '2px solid red'} : null
};
var gridOptions = {
...
columnDefs: columnDefs,
defaultColDef: defaultColumnDefs
};
function inFirstColumn(cell) {
// cell.column is not a documented property!!
return cell.column.colId === cell.column.parent.displayedChildren[0].colId;
}
Here is the updated Plnkr.
The demo of the solution I would do:
updated plunker
What I did is I used the cellStyle in column definition and gave it a solid red border :
cellStyle: {'border-left': '5px solid red'}}
Or to put that together in appropriate element:
{
headerName: "Sports Results 2016",
marryChildren: true,
children: [
{headerName: "Gold", field: "gold", width: 75, filter: 'agNumberColumnFilter',
cellStyle: {'border-left': '5px solid red'}},
{headerName: "Silver", field: "silver", width: 75, filter: 'agNumberColumnFilter'},
{headerName: "Bronze", field: "bronze", width: 75, filter: 'agNumberColumnFilter'},
{headerName: "Total", field: "total", width: 75, filter: 'agNumberColumnFilter'}
]
}
Simply do that for all the cells columns you wanna. The only difference is that there are breaks in the lines, if that does not bother you, solution conveys the message of splitting up a table at certain rows and is really simple to do.
You might also wanna to separate CSS from your cell definitions and you can do that with cellClass property in the definition.
More info on both approaches here:
ag-grid Cell Styling
Since you told you already know how to style headers, add the same to headers if you wanna line to go from header to bottom. If you wanna full line, however, I can only think of making a really thin cell with all borders and background red to mimic the vertical line. Then you need to add that in front of every element you wanna to have the line on left side.
Maybe something like this:
{
headerName: "Sports Results 2017",
marryChildren: true,
children: [
{width: 1,
cellStyle: {
'padding': 0, background: 'red', width: '3px'}
},
{headerName: "Gold", field: "gold", width: 75, filter: 'agNumberColumnFilter'},
{headerName: "Silver", field: "silver", width: 75, filter: 'agNumberColumnFilter'},
{headerName: "Bronze", field: "bronze", width: 75, filter: 'agNumberColumnFilter'},
{headerName: "Total", field: "total", width: 75, filter: 'agNumberColumnFilter'}
]
},
I am using React-data-grid with Filter options in the table. For some column cells, i am passing a DOM object (not as a string). And for this column, the filter functionality is not working.
this._columns = [
{
key: 'date',
name: 'Shipment date',
width: 220,
sortable: true,
filterable: true,
},{
key: 'price',
name: 'Shipment Price',
width: 220,
sortable: true,
filterable: true,
}];
And here are the Rows...
let rows = [];
_.each(response, function(value, index){
rows.push({
date: value.date
price: <div>{value.currencySymbol} <span>{value.price}</span></div>
})
});
So, this is my Column Metadata , and Rows. I am passing this metadata to ReactDataGrid Component.
Now the date filter is working fine. However this price filter is not working well due to this inline DOM element.
Can Someone please help me to get this solved?
Resolved this by using 'formatter' or else we could use 'getRowMetaData'
formatter: an adaptor/middleware for rendering the value in DOM
getRowMetaData: it is used to get the adjacent cell values of the row. And, We could achieve using props.dependentValues where it will have all the column data of the row. I used this in 'Shipment Price' column, to get the other column values of that row.
this._columns = [
{
key: 'date',
name: 'Shipment date',
width: 220,
sortable: true,
filterable: true,
formatter: (props)=>(<div style={{border: '0px'}}>{props.value}</div>),
},{
key: 'price',
name: 'Shipment Price',
width: 220,
sortable: true,
filterable: true,
formatter: (props) => (this.getTrackingUrl(props.dependentValues.rawObj, props.dependentValues.indexVal)),
getRowMetaData: (row) => (row)
}];
Imagine that i have the structure below:
$scope.gridOptions = {
enableHorizontalScrollbar: 1,
enableFiltering: true,
paginationPageSizes: [150, 300, 450],
paginationPageSize: 150,
rowHeight: 110,
data: data,
columnDefs: [
{ name: 'IdQuestion', field: 'IdQuestion', displayName: 'Question Number' , enableCellEdit: false , width :'60' },
{ name: 'Category', field: 'Category', displayName: 'Category' , enableCellEdit: false , width :'83' }
I need to create a button in order to hide the Category column, i was thinking that this would work :/
$("#gridOptions").field("Category").hide();
but it didn't , can you guys let me know the correct way to access to the category column.
Thanks in advance.
<label ng-show="gridOptions[0].enableCellEdit">Category</label>
in the above code if enableCellEdit is true then that label will show other wise it will hide.
I'm using Angular Ui Grid.How can I show multiple fields for the single column ? Thanks.
I need to show both streetNumber and StreetName on the same column.How can I do that ?
vm.propertyListGridOptions = {
appScopeProvider: vm,
flatEntityAccess: false,
fastWatch: true,
showHeader: false,
columnDefs: [
{
name: app.localize('IplNumber'),
field: 'id',
width: 100,
},
{
name: app.localize('BrAddress'),
field: 'address.streetNumber',
width: 140,
}
],
data: []
};
You can use custom template like this
$scope.gridOptions['columnDefs'] = [
{field: 'name', displayName: 'Name'},
{field: 'options',displayName: 'Options', cellTemplate: '<span>{{row.entity.streetNumber}} {{row.entity.StreetName}}</span>'}
];
You can also refer this page for documentation for custom templates http://ui-grid.info/docs/#/tutorial/317_custom_templates