mohiit1502/ag-grid-react-example
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ag-49 Custom Group Header example completed

Browse Source
This commit is contained in:
Alberto
2017-02-03 11:16:17 +00:00
parent 6376a24e3a
commit 6d686f1c02
3 changed files with 120 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
index.html
View File

@@ -53,6 +53,68 @@
} }
.hidden { display:none; } .hidden { display:none; }
.customHeaderLabel{
margin-left: 5px;
margin-top: 3px;
float: left;
}
.customExpandButton{
float:right;
margin-top: 5px;
margin-left: 3px;
}
.expanded {
animation-name: toExpanded;
animation-duration: 1s;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
.collapsed {
color: cornflowerblue;
animation-name: toCollapsed;
animation-duration: 1s;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
@keyframes toExpanded{
from {
color: cornflowerblue;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
to {
color: black;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
}
@keyframes toCollapsed{
from {
color: black;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
to {
color: cornflowerblue;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
}
</style> </style>
<body> <body>

27
src-standard/ColDefFactory.jsx
View File

@@ -4,6 +4,7 @@ import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx';
import RefData from './RefData'; import RefData from './RefData';
import SkillsFilter from './SkillsFilter.jsx'; import SkillsFilter from './SkillsFilter.jsx';
import ProficiencyFilter from './ProficiencyFilter.jsx'; import ProficiencyFilter from './ProficiencyFilter.jsx';
import MyReactHeaderGroupComponent from './MyReactHeaderGroupComponent.jsx';
export default class ColDefFactory { export default class ColDefFactory {
@@ -14,22 +15,28 @@ export default class ColDefFactory {
suppressMenu: true, pinned: true}, suppressMenu: true, pinned: true},
{ {
headerName: 'Employee', headerName: 'Employee',
headerGroupComponentFramework: MyReactHeaderGroupComponent,
children: [ children: [
{headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true, {
headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
width: 150, pinned: true, editable: true, width: 150, pinned: true, editable: true,
// use a React cellEditor // use a React cellEditor
cellEditorFramework: NameCellEditor cellEditorFramework: NameCellEditor
}, }, {
{headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true, headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
// an example of using a non-React cell renderer // an example of using a non-React cell renderer
cellRenderer: countryCellRenderer, pinned: true, cellRenderer: countryCellRenderer, pinned: true,
filterParams: {cellRenderer: countryCellRenderer, cellHeight: 20}} filterParams: {
, cellRenderer: countryCellRenderer, cellHeight: 20
{headerName: "DOB", field: "dob", width: 110, enableRowGroup: true, enablePivot: true, filter:'date', cellRenderer: function(params) { }, columnGroupShow: 'open'
return pad(params.value.getDate(), 2) + '/' + }, {
pad(params.value.getMonth() + 1, 2)+ '/' + headerName: "DOB", field: "dob", width: 110, enableRowGroup: true, enablePivot: true, filter:'date',
params.value.getFullYear(); pinned: true, cellRenderer: function(params) {
}} return pad(params.value.getDate(), 2) + '/' +
pad(params.value.getMonth() + 1, 2)+ '/' +
params.value.getFullYear();
}, columnGroupShow: 'open'
}
] ]
}, },
{ {

41
src-standard/MyReactHeaderGroupComponent.jsx Normal file
View File

@@ -0,0 +1,41 @@
import React from 'react';
// Header component to be used as default for all the columns.
export default class MyReactHeaderGroupComponent extends React.Component {
constructor(props) {
super(props);
this.props.columnGroup.getOriginalColumnGroup().addEventListener('expandedChanged', this.onExpandChanged.bind(this));
this.state = {
expanded:null
}
this.onExpandChanged();
}
render() {
let arrowClassName = "customExpandButton " + (this.state.expanded ? " expanded": " collapsed");
return <div>
<div className="customHeaderLabel"> {this.props.displayName}</div>
<div onClick={this.expandOrCollapse.bind(this)} className={arrowClassName}><i className="fa fa-arrow-right" /></div>
</div>
}
expandOrCollapse (){
this.props.setExpanded(!this.state.expanded);
};
onExpandChanged (){
this.setState({
expanded: this.props.columnGroup.getOriginalColumnGroup().isExpanded()
})
}
}
// the grid will always pass in one props called 'params',
// which is the grid passing you the params for the cellRenderer.
// this piece is optional. the grid will always pass the 'params'
// props, so little need for adding this validation meta-data.
MyReactHeaderGroupComponent.propTypes = {
params: React.PropTypes.object
};