I tried setting rowGrouping to a specific column as shown below:
columnDefs[index]["rowGroup"] = true;
this.setState({ columnDefs: columnDefs });
params.api.setColumnDefs(columnDefs);
The grid is getting rerendered but the row grouping is not getting set. Is there any other ag-grid api to set the row groups manually(just like columnApi.setColumnVisible to hide/show a specific column).
Looks like your updated columnDefs is not being applied to the grid.
Setting your columnDef to an empty array or creating a new ColumnDef object altogether should solve this.
gridOptions.api.setColumnDefs([]);
gridOptions.api.setColumnDefs(newColDefs);
Related
How can I show total in header?
For example, I want to show sum of age as Age(x)
In ag-grid add onRowDataChanged event and create function.
<AgGridReact onRowDataChanged={onRowDataChanged}></AgGridReact>
Using ag-grid column api to get column object and change its header name. After that, refresh the header component
const onRowDataChanged = (params) => {
var ageColumn = gridRef.current.columnApi.getColumn("age")
var rowCount = gridRef.current.api.getDisplayedRowCount()
ageColumn.colDef.headerName = `Age ${rowCount}`;
gridRef.current.api.refreshHeader();
}
If you are using AdapTable with AG grid then you dont need any code.
Just set showGroupingTotalsAsHeader to true in General Options and AdapTable will do it for you:
https://docs.adaptabletools.com/guide/reference-options-general#showgroupingtotalsasheader
How do I set up AG Grid such that there is always a blank placeholder row at the bottom for new records? So that it behaves like Excel, or like Slickgrid when enableAddRow is true.
When passing the rowData array to the grid component, you can include an extra object with blank values.
For example, if you had a grid of Employee objects with attributes name and title, the following would work with ES6:
rowData=[ ...existingEmployees, { name: '', title: '' } ]
Is it possible to change the style of a column based on whether it's pinned or not?
I'm able to change the style based on the value while the table is rendered for the first time. What I'm trying to do is change the style when the column is pinned using the mouse (drag and pin).
I'm able to figure out which column has been pinned by firing the ColumnPinnedEvent in gridOptions. I tried modifying the cellClass of the column obtained from 'event.column' but it does not get reflected on the table.
onColumnPinned(event: ColumnPinnedEvent) {
const column = event.column;
if (column) {
const columnDef = column.getColDef();
const userProvidedColDef = columnDef;
userProvidedColDef.cellStyle = event.pinned ? { color: 'white', backgroundColor: 'black' } : {};
column.setColDef(columnDef, userProvidedColDef);
}
}
You can achieve the same by just with the CSS.
Have a look at the plunk I've created: Column Pinning and styling. Add or remove any column to see the styles updated for it.
.ag-body-viewport .ag-pinned-left-cols-container .ag-row {
background-color: yellow;
}
Here .ag-body-viewport .ag-pinned-left-cols-container hierarchy is important. Just using .ag-pinned-left-cols-container .ag-row will not work as some row levels' styling of ag-grid will overwrite it.
So far this information is enough to solve your challenge, let me know in addition to this, you have some more details to provide.
I tried removing the default filter of ag-grid which hides the column(s) and appears in the most right side of each column header, but I couldn't find the property. Can anyone help me?
You should use menuTabs property in column definition like this -
{
headerName: "Athlete",
field: "athlete",
width: 150,
filter: "agSetColumnFilter",
menuTabs: [ 'filterMenuTab', 'generalMenuTab']
}
As per docs -
menuTabs Set to an array containing zero, one or many of the
following options 'filterMenuTab', 'generalMenuTab' and
'columnsMenuTab'. This is used to figure out which menu tabs and in
which order the tabs are shown
We'd like to use React Data Grid from Adazzle (as mentioned in the tag with this question) now that we're using React (16.xx) and the older jsGrid is less appealing.
Two questions:
Our old jsGrid had a data type to include in the grid called Checkbox. This was immensely helpful. I haven't found a similar type in the React Grid. Have I just missed it or is it not a part of the library?
In each row, in some columns, we'd like to actually have two rows of data inside the column -- i.e., two lines of text separated by carriage return. But the react-data-grid demos only seem to show one line per column. Is this a limitation, or can we use CSS in the values inside columns?
Is there search included for the rows shown in the table at any given point in time?
I will provide answer to your question part by part
1) In react-data-grid column you can include a checkbox by using the formatter
attribute that is specified while the columns are defined.
Consider the following example
let columns = [
{
key: 'name',
name: 'Name',
resizable: true,
width: 100
},
{
key: 'checkbox',
name: 'CheckBox',
formatter:checkBoxFormatter,
resizable: true,
width: 100
}
]
class checkBoxFormatter extends React.Component {
render() {
return (
<div>
<CheckBox></Checkbox> //Provide your checkbox code here
</div>
)
}
}
2)You can exapand the rows for that you need to use getSubRowDetails and onCellExpand attributes of ReactDataGrid component .For example refer this documentation
3)Search is available for filtering .For example refer this documentation