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

ag-49 Custom Header example completed

Browse Source
This commit is contained in:
Alberto
2017-02-03 10:14:20 +00:00
parent 9c8cf08d2a
commit 6376a24e3a
4 changed files with 123 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@@ -16,6 +16,43 @@
margin-left: 4px;
margin-right: 4px;
}
.customHeaderMenuButton{
margin-top: 5px;
margin-left: 4px;
float: left;
}
.customHeaderLabel{
margin-left: 5px;
margin-top: 3px;
float: left;
}
.customSortDownLabel{
float: left;
margin-left: 10px;
margin-top: 5px;
}
.customSortUpLabel{
float: left;
margin-left: 3px;
margin-top: 4px;
}
.customSortRemoveLabel{
float: left;
font-size: 11px;
margin-left: 3px;
margin-top: 6px;
}
.active {
color: cornflowerblue;
}
.hidden { display:none; }
</style>
<body>

4
src-standard/ColDefFactory.jsx
View File

@@ -25,7 +25,7 @@ export default class ColDefFactory {
cellRenderer: countryCellRenderer, pinned: true,
filterParams: {cellRenderer: countryCellRenderer, cellHeight: 20}}
,
{headerName: "DOB", field: "dob", width: 90, enableRowGroup: true, enablePivot: true, filter:'date', cellRenderer: function(params) {
{headerName: "DOB", field: "dob", width: 110, enableRowGroup: true, enablePivot: true, filter:'date', cellRenderer: function(params) {
return pad(params.value.getDate(), 2) + '/' +
pad(params.value.getMonth() + 1, 2)+ '/' +
params.value.getFullYear();
@@ -41,7 +41,7 @@ export default class ColDefFactory {
// supply a React component
filterFramework: SkillsFilter
},
{headerName: "Proficiency", field: "proficiency", width: 120, enableValue: true,
{headerName: "Proficiency", field: "proficiency", width: 135, enableValue: true,
// supply a React component
cellRendererFramework: ProficiencyCellRenderer,
// supply a React component

76
src-standard/MyReactHeaderComponent.jsx Normal file
View File

@@ -0,0 +1,76 @@
import React from 'react';
// Header component to be used as default for all the columns.
export default class MyReactHeaderComponent extends React.Component {
constructor(props) {
super(props);
this.props.column.addEventListener('sortChanged', this.onSortChanged.bind(this));
//The state of this component contains the current sort state of this column
//The possible values are: 'asc', 'desc' and ''
this.state = {
sorted: ''
}
}
render() {
let sortElements = [];
if (this.props.enableSorting){
let downArrowClass = "customSortDownLabel " + (this.state.sorted === 'desc' ? " active" : "");
let upArrowClass = "customSortUpLabel " + (this.state.sorted === 'asc' ? " active" : "");
let removeArrowClass = "customSortRemoveLabel " + (this.state.sorted === '' ? " active" : "");
sortElements.push(<div className={downArrowClass} onClick={this.onSortRequested.bind(this, 'desc')}><i className="fa fa-long-arrow-down"/></div>)
sortElements.push(<div className={upArrowClass} onClick={this.onSortRequested.bind(this, 'asc')}><i className="fa fa-long-arrow-up"/></div>)
sortElements.push(<div className={removeArrowClass} onClick={this.onSortRequested.bind(this, '')}><i className="fa fa-times"/></div>)
}
let menuButton = null;
if (this.props.enableSorting){
menuButton = <div ref="menuButton" className="customHeaderMenuButton" onClick={this.onMenuClick.bind(this)}><i className={"fa " + this.props.menuIcon}/></div>
}
return <div>
{menuButton}
<div className="customHeaderLabel">{this.props.displayName}</div>
{sortElements}
</div>
}
onSortRequested (order, event) {
this.props.setSort (order, event.shiftKey);
};
onSortChanged (){
if (this.props.column.isSortAscending()){
this.setState({
sorted: 'asc'
})
} else if (this.props.column.isSortDescending()){
this.setState({
sorted: 'desc'
})
} else {
this.setState({
sorted: ''
})
}
};
onMenuClick (){
this.props.showColumnMenu (this.refs.menuButton);
};
}
// 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.
MyReactHeaderComponent.propTypes = {
params: React.PropTypes.object
};

9
src-standard/myApp.jsx
View File

@@ -3,6 +3,7 @@ import {AgGridReact} from "ag-grid-react";
import RowDataFactory from "./RowDataFactory";
import ColDefFactory from "./ColDefFactory.jsx";
import MyReactDateComponent from "./MyReactDateComponent.jsx";
import MyReactHeaderComponent from "./MyReactHeaderComponent.jsx";
import "./myApp.css";
import "ag-grid-enterprise";
@@ -44,6 +45,12 @@ export default class MyApp extends React.Component {
onModelUpdated: function () {
console.log('event onModelUpdated received');
},
defaultColDef : {
headerComponentFramework : MyReactHeaderComponent,
headerComponentParams : {
menuIcon: 'fa-bars'
}
},
// this is a simple property
rowBuffer: 10 // no need to set this, the default is fine for almost all scenarios
};
@@ -203,7 +210,7 @@ export default class MyApp extends React.Component {
);
}
return <div style={{width: '800px'}}>
return <div style={{width: '1024px'}}>
<div style={{padding: '4px'}}>
{topHeaderTemplate}
{bottomHeaderTemplate}