diff --git a/index.html b/index.html index 0ee551e..126238f 100644 --- a/index.html +++ b/index.html @@ -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; } diff --git a/src-standard/ColDefFactory.jsx b/src-standard/ColDefFactory.jsx index ceca815..c70d348 100644 --- a/src-standard/ColDefFactory.jsx +++ b/src-standard/ColDefFactory.jsx @@ -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 diff --git a/src-standard/MyReactHeaderComponent.jsx b/src-standard/MyReactHeaderComponent.jsx new file mode 100644 index 0000000..df4f659 --- /dev/null +++ b/src-standard/MyReactHeaderComponent.jsx @@ -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(
) + sortElements.push(
) + sortElements.push(
) + } + + + let menuButton = null; + if (this.props.enableSorting){ + menuButton =
+ } + + return
+ {menuButton} +
{this.props.displayName}
+ {sortElements} +
+ } + + 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 +}; \ No newline at end of file diff --git a/src-standard/myApp.jsx b/src-standard/myApp.jsx index acdc39f..3478875 100644 --- a/src-standard/myApp.jsx +++ b/src-standard/myApp.jsx @@ -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
+ return
{topHeaderTemplate} {bottomHeaderTemplate}