diff --git a/index.html b/index.html index 126238f..de8ea1e 100644 --- a/index.html +++ b/index.html @@ -53,6 +53,68 @@ } .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); + } + } diff --git a/src-standard/ColDefFactory.jsx b/src-standard/ColDefFactory.jsx index c70d348..d68d513 100644 --- a/src-standard/ColDefFactory.jsx +++ b/src-standard/ColDefFactory.jsx @@ -4,6 +4,7 @@ import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx'; import RefData from './RefData'; import SkillsFilter from './SkillsFilter.jsx'; import ProficiencyFilter from './ProficiencyFilter.jsx'; +import MyReactHeaderGroupComponent from './MyReactHeaderGroupComponent.jsx'; export default class ColDefFactory { @@ -14,22 +15,28 @@ export default class ColDefFactory { suppressMenu: true, pinned: true}, { headerName: 'Employee', + headerGroupComponentFramework: MyReactHeaderGroupComponent, children: [ - {headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true, + { + headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true, width: 150, pinned: true, editable: true, // use a React cellEditor 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 cellRenderer: countryCellRenderer, pinned: true, - filterParams: {cellRenderer: countryCellRenderer, cellHeight: 20}} - , - {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(); - }} + filterParams: { + cellRenderer: countryCellRenderer, cellHeight: 20 + }, columnGroupShow: 'open' + }, { + headerName: "DOB", field: "dob", width: 110, enableRowGroup: true, enablePivot: true, filter:'date', + pinned: true, cellRenderer: function(params) { + return pad(params.value.getDate(), 2) + '/' + + pad(params.value.getMonth() + 1, 2)+ '/' + + params.value.getFullYear(); + }, columnGroupShow: 'open' + } ] }, { diff --git a/src-standard/MyReactHeaderGroupComponent.jsx b/src-standard/MyReactHeaderGroupComponent.jsx new file mode 100644 index 0000000..7fe3037 --- /dev/null +++ b/src-standard/MyReactHeaderGroupComponent.jsx @@ -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
+
{this.props.displayName}
+
+
+ } + + 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 +}; \ No newline at end of file