diff --git a/package.json b/package.json index 08f1ed6..0b467f0 100644 --- a/package.json +++ b/package.json @@ -38,39 +38,38 @@ }, "homepage": "http://www.ag-grid.com/", "devDependencies": { - "babel-core": "6.24.x", + "babel-core": "6.26.x", "babel-loader": "6.4.x", "babel-preset-es2015": "6.24.x", "babel-preset-react": "6.24.x", "babel-preset-stage-0": "6.24.x", "babel-preset-stage-1": "6.24.x", - "css-loader": "0.23.x", + "css-loader": "0.28.x", "mkdirp": "0.5.1", "ncp": "2.0.0", "prop-types": "15.6.0", "rimraf": "2.5.x", - "style-loader": "0.13.x", - "webpack": "1.12.x", - "webpack-dev-server": "1.14.x", + "style-loader": "0.19.x", + "webpack": "1.15.x", + "webpack-dev-server": "1.15.x", "gulp": "3.9.x", - "gulp-typescript": "3.1.x", + "gulp-typescript": "3.2.x", "merge2": "1.0.x", - "typescript": "2.3.x" + "typescript": "2.6.2", + "file-loader": "0.11.1" }, "dependencies": { - "ag-grid": "^14.0.0", - "ag-grid-enterprise": "^14.0.0", - "ag-grid-react": "^14.0.0", + "ag-grid": "^15.0.0", + "ag-grid-enterprise": "^15.0.0", + "ag-grid-react": "^15.0.0", "bootstrap": "3.3.7", "d3": "4.9.1", - "file-loader": "0.11.1", "lodash": "4.17.4", - "react": "16.0.0", - "react-dom": "16.0.0", + "react": "16.2.x", + "react-dom": "16.2.x", "react-dom-factories": "1.0.2", "react-redux": "5.0.x", "react-router-dom": "4.2.x", - "redux": "3.6.x", - "url-search-params-polyfill": "1.2.0" + "redux": "3.7.x" } } diff --git a/src-examples/App.jsx b/src-examples/App.jsx index 6491390..713e0f4 100644 --- a/src-examples/App.jsx +++ b/src-examples/App.jsx @@ -3,33 +3,13 @@ import {Redirect, Route, Switch} from "react-router-dom"; import NavItem from "./NavItem"; -import DynamicComponentsExample from "./dynamicComponentExample/DynamicComponentsExample"; -import RichGridExample from "./richGridExample/RichGridExample"; import RichGridDeclarativeExample from "./richGridDeclarativeExample/RichGridDeclarativeExample"; -import RichComponentsExample from "./richComponentExample/RichComponentsExample"; -import EditorComponentsExample from "./editorComponentExample/EditorComponentsExample"; -import PinnedRowComponentExample from "./pinnedRowExample/PinnedRowComponentExample"; -import FullWidthComponentExample from "./fullWidthExample/FullWidthComponentExample"; -import GroupedRowInnerRendererComponentExample from "./groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample"; -import FilterComponentExample from "./filterComponentExample/FilterComponentExample"; -import SimpleReduxExample from "./simpleReduxExample/SimpleReduxExample"; -import FloatingFilterGridExample from "./floatingFilter/FloatingFilterGridExample"; import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample"; const SideBar = () => (
@@ -42,18 +22,8 @@ class App extends Component {
- - + - - - - - - - - -
diff --git a/src-examples/dynamicComponentExample/ChildMessageRenderer.jsx b/src-examples/dynamicComponentExample/ChildMessageRenderer.jsx deleted file mode 100644 index e028220..0000000 --- a/src-examples/dynamicComponentExample/ChildMessageRenderer.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React, {Component} from "react"; - -export default class ChildMessageRenderer extends Component { - constructor(props) { - super(props); - } - - invokeParentMethod = () => { - let rowIndex = this.props.node.rowIndex; - let headerName = this.props.colDef.headerName; - - this.props.context.componentParent.methodFromParent(`Row: ${rowIndex}, Col: ${headerName}`) - }; - - render() { - return ( - - ); - } -}; diff --git a/src-examples/dynamicComponentExample/CubeRenderer.jsx b/src-examples/dynamicComponentExample/CubeRenderer.jsx deleted file mode 100644 index 73cd4e6..0000000 --- a/src-examples/dynamicComponentExample/CubeRenderer.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, {Component} from "react"; - -export default class CubeRenderer extends Component { - constructor(props) { - super(props); - - this.state = { - value: this.valueSquared() - }; - } - - valueSquared() { - return this.props.value * this.props.value * this.props.value; - } - - render() { - return ( - {this.state.value} - ); - } -}; diff --git a/src-examples/dynamicComponentExample/CurrencyRenderer.jsx b/src-examples/dynamicComponentExample/CurrencyRenderer.jsx deleted file mode 100644 index 462ad27..0000000 --- a/src-examples/dynamicComponentExample/CurrencyRenderer.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import React, {Component} from "react"; - -export default class CurrencyRenderer extends Component { - constructor(props) { - super(props); - - this.state = { - value: props.value - } - } - - static formatValueToCurrency(currency, value) { - return `${currency}${value}` - } - - // noinspection JSUnusedGlobalSymbols - refresh(params) { - if(params.value !== this.state.value) { - this.setState({ - value: params.value.toFixed(2) - }) - } - return true; - } - - render() { - return ( - {CurrencyRenderer.formatValueToCurrency('EUR', this.state.value)} - ); - } -}; diff --git a/src-examples/dynamicComponentExample/DynamicComponentsExample.jsx b/src-examples/dynamicComponentExample/DynamicComponentsExample.jsx deleted file mode 100644 index a7786dd..0000000 --- a/src-examples/dynamicComponentExample/DynamicComponentsExample.jsx +++ /dev/null @@ -1,162 +0,0 @@ -import React, {Component} from "react"; - -import {AgGridReact} from "ag-grid-react"; -import SquareRenderer from "./SquareRenderer"; -import CubeRenderer from "./CubeRenderer"; -import ParamsRenderer from "./ParamsRenderer"; -import CurrencyRenderer from "./CurrencyRenderer"; -import ChildMessageRenderer from "./ChildMessageRenderer"; - -export default class DynamicComponentsExample extends Component { - constructor(props) { - super(props); - - this.state = { - gridOptions: { - context: { - componentParent: this - } - }, - - rowData: DynamicComponentsExample.createRowData(), - - columnDefs: DynamicComponentsExample.createColumnDefs() - }; - - } - - onGridReady = (params) => { - this.gridApi = params.api; - this.columnApi = params.columnApi; - - this.gridApi.sizeColumnsToFit(); - }; - - methodFromParent(cell) { - alert(`Parent Component Method from ${cell}!`); - } - - refreshEvenRowsCurrencyData = () => { - this.gridApi.forEachNode(rowNode => { - if (rowNode.data.value % 2 === 0) { - rowNode.setDataValue('currency', rowNode.data.value + Number(Math.random().toFixed(2))) - } - }); - - this.gridApi.refreshCells({ - columns: ['currency'] - }) - }; - - static createColumnDefs() { - return [ - {headerName: "Row", field: "row", width: 100}, - { - headerName: "Square", - field: "value", - cellRendererFramework: SquareRenderer, - editable: true, - colId: "square", - width: 100 - }, - { - headerName: "Cube", - field: "value", - cellRendererFramework: CubeRenderer, - colId: "cube", - width: 100 - }, - { - headerName: "Row Params", - field: "row", - cellRendererFramework: ParamsRenderer, - colId: "params", - width: 215 - }, - { - headerName: "Currency", - field: "currency", - cellRendererFramework: CurrencyRenderer, - colId: "currency", - width: 135 - }, - { - headerName: "Child/Parent", - field: "value", - cellRendererFramework: ChildMessageRenderer, - colId: "params", - width: 120 - } - ]; - } - - static createRowData() { - let rowData = []; - - for (let i = 0; i < 15; i++) { - rowData.push({ - row: "Row " + i, - value: i, - currency: 1 + Number(Math.random()).toFixed(2) - }); - } - - return rowData; - } - - render() { - return ( -
-

Dynamic React Component Example

- - - -
-

Dynamic React Component Example

-
-
-
-
This example demonstrates Dynamic React Components with ag-Grid, Parent/Child Communication - (cell component to parent grid component), as well as - dynamic data updates of the Currency column.
-

Square, Cube, Row Params, Currency and Child/Parent: - React Components within the Grid

-

Currency (Pipe): An React Component mimicking a - Currency Pipe, dynamically updated with the button above.

-

Child/Parent: Demonstrates the Child Cell Component - communicating with the Parent Grid Component.

-

Refresh Even Row Currency Data: Dynamically Updates - Event Rows Currency Value. Only the Currency column will be re-rendered.

-
-
-
-
-
-
-

React Functionality

-

Utilise React Components within ag-Grid

- React with ag-Grid - React Renderers - Updating Data -
-
-
-
-
- ); - } -}; diff --git a/src-examples/dynamicComponentExample/ParamsRenderer.jsx b/src-examples/dynamicComponentExample/ParamsRenderer.jsx deleted file mode 100644 index 752cbd9..0000000 --- a/src-examples/dynamicComponentExample/ParamsRenderer.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, {Component} from "react"; - -export default class ParamsRenderer extends Component { - constructor(props) { - super(props); - } - - render() { - return ( - Field: {this.props.colDef.field}, Value: {this.props.value} - ); - } -}; diff --git a/src-examples/dynamicComponentExample/SquareRenderer.jsx b/src-examples/dynamicComponentExample/SquareRenderer.jsx deleted file mode 100644 index 372eaa3..0000000 --- a/src-examples/dynamicComponentExample/SquareRenderer.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, {Component} from "react"; - -export default class SquareRenderer extends Component { - constructor(props) { - super(props); - - this.state = { - value: this.valueSquared() - }; - } - - valueSquared() { - return this.props.value * this.props.value; - } - - render() { - return ( - {this.state.value} - ); - } -}; diff --git a/src-examples/editorComponentExample/EditorComponentsExample.jsx b/src-examples/editorComponentExample/EditorComponentsExample.jsx deleted file mode 100644 index d1d99e6..0000000 --- a/src-examples/editorComponentExample/EditorComponentsExample.jsx +++ /dev/null @@ -1,132 +0,0 @@ -import React, {Component} from "react"; - -import {AgGridReact} from "ag-grid-react"; -import MoodRenderer from "./MoodRenderer"; -import MoodEditor from "./MoodEditor"; -import NumericEditor from "./NumericEditor"; - -export default class EditorComponentsExample extends Component { - constructor(props) { - super(props); - - this.state = { - rowData: EditorComponentsExample.createRowData(), - columnDefs: EditorComponentsExample.createColumnDefs() - }; - - this.onGridReady = this.onGridReady.bind(this); - } - - onGridReady(params) { - this.gridApi = params.api; - this.columnApi = params.columnApi; - - this.gridApi.sizeColumnsToFit(); - } - - static createColumnDefs() { - return [ - { - headerName: "Name", - field: "name", - width: 300, - editable: true, - cellEditor: 'richSelect', - cellEditorParams: { - values: [ - "Bob", - "Harry", - "Sally", - "Mary", - "John", - "Jack", - "Sue", - "Sean", - "Niall", - "Albert", - "Fred", - "Jenny", - "Larry" - ] - } - }, - { - headerName: "Mood", - field: "mood", - cellRendererFramework: MoodRenderer, - cellEditorFramework: MoodEditor, - editable: true, - width: 250 - }, - { - headerName: "Numeric", - field: "number", - cellEditorFramework: NumericEditor, - editable: true, - width: 250 - } - ]; - } - - static createRowData() { - return [ - {name: "Bob", mood: "Happy", number: 10}, - {name: "Harry", mood: "Sad", number: 3}, - {name: "Sally", mood: "Happy", number: 20}, - {name: "Mary", mood: "Sad", number: 5}, - {name: "John", mood: "Happy", number: 15}, - {name: "Jack", mood: "Happy", number: 25}, - {name: "Sue", mood: "Sad", number: 43}, - {name: "Sean", mood: "Sad", number: 1335}, - {name: "Niall", mood: "Happy", number: 2}, - {name: "Alberto", mood: "Happy", number: 123}, - {name: "Fred", mood: "Sad", number: 532}, - {name: "Jenny", mood: "Happy", number: 34}, - {name: "Larry", mood: "Happy", number: 13}, - ]; - } - - render() { - return ( -
-

Cell Editor Component Example

- - -
-

Cell Editor Component Example

-
-
-
-
This example demonstrates React Editor Components within ag-Grid, as well as an example using the built in Rich Select editor.
-

Name: Utilises the built in RichSelect editor

-

Mood: A Custom React Editor demonstrating popup functionality, with full keyboard control.

-

Numeric: A Custom React Editor demonstrating pre & post validation. Only numeric characters are allowed, - and numbers greater than 1000000 will be rejected.

-
-
-
-
-
-
-

React Functionality

-

Utilise React Components within ag-Grid

- Cell Editing - Editor Components - React with ag-Grid - React Editor Components -
-
-
-
-
- - ); - } -}; diff --git a/src-examples/editorComponentExample/MoodEditor.jsx b/src-examples/editorComponentExample/MoodEditor.jsx deleted file mode 100644 index 53d52b5..0000000 --- a/src-examples/editorComponentExample/MoodEditor.jsx +++ /dev/null @@ -1,120 +0,0 @@ -import React, {Component} from "react"; -import ReactDOM from "react-dom"; - -export default class MoodEditor extends Component { - constructor(props) { - super(props); - - this.onHappyClick = this.onHappyClick.bind(this); - this.onSadClick = this.onSadClick.bind(this); - - this.state = { - happy: false - } - } - - componentWillMount() { - this.setHappy(this.props.value === "Happy"); - } - - componentDidMount() { - this.refs.container.addEventListener('keydown', this.checkAndToggleMoodIfLeftRight); - this.focus(); - } - - componentWillUnmount() { - this.refs.container.removeEventListener('keydown', this.checkAndToggleMoodIfLeftRight); - } - - checkAndToggleMoodIfLeftRight = (event) => { - if ([37, 39].indexOf(event.keyCode) > -1) { // left and right - this.toggleMood(); - event.stopPropagation(); - } - } - - componentDidUpdate() { - this.focus(); - } - - focus() { - setTimeout(() => { - let container = ReactDOM.findDOMNode(this.refs.container); - if (container) { - container.focus(); - } - }) - } - - getValue() { - return this.state.happy ? "Happy" : "Sad"; - } - - isPopup() { - return true; - } - - setHappy(happy) { - this.setState({ - happy - }); - } - - onHappyClick() { - this.setState({ - happy: true - }, - () => this.props.api.stopEditing() - ); - } - - onSadClick() { - this.setState({ - happy: false - }, - () => this.props.api.stopEditing() - ); - } - - toggleMood() { - this.setHappy(!this.state.happy); - } - - render() { - let mood = { - borderRadius: 15, - border: "1px solid grey", - background: "#e6e6e6", - padding: 15, - textAlign: "center", - display: "inline-block" - }; - - let unselected = { - paddingLeft: 10, - paddingRight: 10, - border: "1px solid transparent", - padding: 4 - }; - - let selected = { - paddingLeft: 10, - paddingRight: 10, - border: "1px solid lightgreen", - padding: 4 - }; - - let happyStyle = this.state.happy ? selected : unselected; - let sadStyle = !this.state.happy ? selected : unselected; - - return ( -
- - -
- ); - } -} \ No newline at end of file diff --git a/src-examples/editorComponentExample/MoodRenderer.jsx b/src-examples/editorComponentExample/MoodRenderer.jsx deleted file mode 100644 index 9e03c88..0000000 --- a/src-examples/editorComponentExample/MoodRenderer.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, {Component} from "react"; - -export default class MoodRenderer extends Component { - constructor(props) { - super(props); - } - - componentWillMount() { - this.setMood(this.props.value) - } - - refresh(params) { - this.setMood(params.value); - } - - setMood(mood) { - this.setState({ - imgForMood: mood === 'Happy' ? 'images/smiley.png' : 'images/smiley-sad.png' - }) - }; - - render() { - return ( - - ); - } -} diff --git a/src-examples/editorComponentExample/NumericEditor.jsx b/src-examples/editorComponentExample/NumericEditor.jsx deleted file mode 100644 index 8076545..0000000 --- a/src-examples/editorComponentExample/NumericEditor.jsx +++ /dev/null @@ -1,102 +0,0 @@ -import React, {Component} from "react"; - -export default class NumericEditor extends Component { - constructor(props) { - super(props); - - // if the character pressed to start editing isn't numeric we set this flag, which will mean editing wont be initiated - this.cancelBeforeStart = this.props.charPress && ('1234567890'.indexOf(this.props.charPress) < 0); - - let value = this.props.value; - if (!this.cancelBeforeStart && this.props.charPress) { - value = value + this.props.charPress; - } - - this.state = { - value - }; - } - - componentDidMount() { - this.refs.input.addEventListener('keydown', this.onKeyDown); - this.focus(); - } - - componentWillUnmount() { - this.refs.input.removeEventListener('keydown', this.onKeyDown); - } - - // componentDidUpdate() { - // this.focus(); - // } - - focus() { - if (!this.cancelBeforeStart) { - setTimeout(() => { - this.refs.input.focus(); - this.refs.input.setSelectionRange(this.refs.input.value.length, this.refs.input.value.length); - }) - } - } - - getValue() { - return this.state.value; - } - - isCancelBeforeStart() { - return this.cancelBeforeStart; - } - - // will reject the number if it greater than 1,000,000 - // not very practical, but demonstrates the method. - isCancelAfterEnd() { - return this.state.value > 1000000; - }; - - handleChange = (event) => { - this.setState({value: event.target.value}); - }; - - onKeyDown = (event) => { - // allow back and forth navigation, as well as editing - if (NumericEditor.isAllowableKeypress(event)) { - event.stopPropagation(); - return; - } - - // if not a numeral, then reject the keypress - if (!NumericEditor.isKeyPressedNumeric(event)) { - if (event.preventDefault) event.preventDefault(); - } - }; - - static isAllowableKeypress(event) { - // left, right, backspace & delete - return [37, 39, 46, 8].indexOf(event.keyCode) > -1; - } - - static getCharCodeFromEvent(event) { - event = event || window.event; - return (typeof event.which === "undefined") ? event.keyCode : event.which; - } - - static isCharNumeric(charStr) { - return !!/\d/.test(charStr); - } - - static isKeyPressedNumeric(event) { - const charCode = NumericEditor.getCharCodeFromEvent(event); - const charStr = event.key ? event.key : String.fromCharCode(charCode); - return this.isCharNumeric(charStr); - } - - render() { - return ( - - ); - } -} \ No newline at end of file diff --git a/src-examples/filterComponentExample/FilterComponentExample.jsx b/src-examples/filterComponentExample/FilterComponentExample.jsx deleted file mode 100644 index 22cfe1c..0000000 --- a/src-examples/filterComponentExample/FilterComponentExample.jsx +++ /dev/null @@ -1,90 +0,0 @@ -import React, {Component} from "react"; - -import {AgGridReact} from "ag-grid-react"; - -import "ag-grid-enterprise"; - -import PartialMatchFilter from "./PartialMatchFilter"; - -export default class FilterComponentExample extends Component { - constructor(props) { - super(props); - - this.state = { - rowData: FilterComponentExample.createRowData(), - columnDefs: FilterComponentExample.createColumnDefs(), - }; - } - - onGridReady = (params) => { - this.gridApi = params.api; - this.columnApi = params.columnApi; - - this.gridApi.sizeColumnsToFit(); - }; - - onClicked = () => { - this.gridApi.getFilterInstance("name").getFrameworkComponentInstance().componentMethod("Hello World!"); - }; - - static createColumnDefs() { - return [ - { - field: "row", - width: 400, - suppressMenu: true - }, - { - headerName: "Filter Component", - field: "name", - filterFramework: PartialMatchFilter, - width: 400, - menuTabs: ['filterMenuTab'] - } - ]; - } - - static createRowData() { - return [ - {"row": "Row 1", "name": "Michael Phelps"}, - {"row": "Row 2", "name": "Natalie Coughlin"}, - {"row": "Row 3", "name": "Aleksey Nemov"}, - {"row": "Row 4", "name": "Alicia Coutts"}, - {"row": "Row 5", "name": "Missy Franklin"}, - {"row": "Row 6", "name": "Ryan Lochte"}, - {"row": "Row 7", "name": "Allison Schmitt"}, - {"row": "Row 8", "name": "Natalie Coughlin"}, - {"row": "Row 9", "name": "Ian Thorpe"}, - {"row": "Row 10", "name": "Bob Mill"}, - {"row": "Row 11", "name": "Willy Walsh"}, - {"row": "Row 12", "name": "Sarah McCoy"}, - {"row": "Row 13", "name": "Jane Jack"}, - {"row": "Row 14", "name": "Tina Wills"} - ]; - } - - render() { - return ( -
-

Filter Component Example

- - - -

The filter on the Filter Component column uses a Custom React Filter Component

-

This filter will allow partial matches - for example enter "m p" which will match Michael Phelps.

-
- ); - } -}; diff --git a/src-examples/filterComponentExample/PartialMatchFilter.jsx b/src-examples/filterComponentExample/PartialMatchFilter.jsx deleted file mode 100644 index 71bcbdd..0000000 --- a/src-examples/filterComponentExample/PartialMatchFilter.jsx +++ /dev/null @@ -1,83 +0,0 @@ -import React, {Component} from "react"; - -export default class PartialMatchFilter extends Component { - constructor(props) { - super(props); - - this.state = { - text: '' - }; - - this.valueGetter = this.props.valueGetter; - } - - isFilterActive() { - return this.state.text !== null && this.state.text !== undefined && this.state.text !== ''; - } - - doesFilterPass(params) { - return this.state.text.toLowerCase() - .split(" ") - .every((filterWord) => { - return this.valueGetter(params.node).toString().toLowerCase().indexOf(filterWord) >= 0; - }); - } - - getModel() { - return {value: this.state.text}; - } - - setModel(model) { - this.state.text = model ? model.value : ''; - } - - componentDidMount() { - this.focus(); - } - - focus() { - setTimeout(() => { - if (this.refs.input) { - this.refs.input.focus(); - } - }) - } - - componentMethod(message) { - alert(`Alert from PartialMatchFilterComponent ${message}`); - } - - onChange = (event) => { - let newValue = event.target.value; - if (this.state.text !== newValue) { - this.setState({ - text: newValue - }, () => { - // wait for the state to be applied, then let the grid know about the change - this.props.filterChangedCallback(); - }); - - } - }; - - render() { - console.log("render"); - let style = { - border: "2px solid #22ff22", - borderRadius: "5px", - backgroundColor: "#bbffbb", - width: "200px", - height: "50px" - }; - - return ( -
- Filter: -
- ); - } -}; diff --git a/src-examples/floatingFilter/FloatingFilterGridExample.jsx b/src-examples/floatingFilter/FloatingFilterGridExample.jsx deleted file mode 100644 index 6f96eff..0000000 --- a/src-examples/floatingFilter/FloatingFilterGridExample.jsx +++ /dev/null @@ -1,134 +0,0 @@ -import React, {Component} from "react"; -import {AgGridReact} from "ag-grid-react"; -import SlidingFloatingFilter from "./SlidingFloatingFilter"; - -export default class FloatingFilterGridExample extends Component { - constructor(props) { - super(props); - - this.state = { - columnDefs: FloatingFilterGridExample.createColumnDefs(), - rowData: FloatingFilterGridExample.createRowData() - } - } - - onGridReady(params) { - this.gridApi = params.api; - this.columnApi = params.columnApi; - - this.gridApi.sizeColumnsToFit(); - } - - static createColumnDefs() { - return [ - { - field: "country", - suppressFilter: true - }, - { - field: "language", - suppressFilter: true - }, - { - field: "name", - suppressFilter: true - }, - { - field: "gold", - floatingFilterComponentFramework: SlidingFloatingFilter, - floatingFilterComponentParams: { - maxValue: 7, - suppressFilterButton: true - }, - filter: 'number', - suppressMenu: false - }, - { - field: "silver", - filter: 'number', - floatingFilterComponentFramework: SlidingFloatingFilter, - floatingFilterComponentParams: { - maxValue: 5, - suppressFilterButton: true - }, - suppressMenu: false - }, - { - field: "bronze", - filter: 'number', - floatingFilterComponentFramework: SlidingFloatingFilter, - floatingFilterComponentParams: { - maxValue: 10, - suppressFilterButton: true - }, - suppressMenu: false - } - ]; - } - - static createRowData() { - return [ - {country: "United States", language: "English", name: "Bob", gold: 1, silver: 3, bronze: 0}, - {country: "United States", language: "English", name: "Jack", gold: 0, silver: 1, bronze: 1}, - {country: "United States", language: "English", name: "Sue", gold: 3, silver: 0, bronze: 1}, - {country: "United Kingdom", language: "English", name: "Mary", gold: 1, silver: 1, bronze: 2}, - {country: "United Kingdom", language: "English", name: "Tess", gold: 2, silver: 1, bronze: 1}, - {country: "United Kingdom", language: "English", name: "John", gold: 0, silver: 2, bronze: 1}, - {country: "Jamaica", language: "English", name: "Bob", gold: 4, silver: 1, bronze: 2}, - {country: "Jamaica", language: "English", name: "Jack", gold: 3, silver: 1, bronze: 2}, - {country: "Jamaica", language: "English", name: "Mary", gold: 1, silver: 1, bronze: 2}, - {country: "South Africa", language: "English", name: "Bob", gold: 4, silver: 0, bronze: 1}, - {country: "South Africa", language: "English", name: "Jack", gold: 3, silver: 0, bronze: 1}, - {country: "South Africa", language: "English", name: "Mary", gold: 5, silver: 3, bronze: 1}, - {country: "South Africa", language: "English", name: "John", gold: 2, silver: 3, bronze: 1}, - {country: "New Zealand", language: "English", name: "Bob", gold: 5, silver: 3, bronze: 10}, - {country: "New Zealand", language: "English", name: "Jack", gold: 1, silver: 1, bronze: 1}, - {country: "New Zealand", language: "English", name: "Sue", gold: 1, silver: 3, bronze: 1}, - {country: "Australia", language: "English", name: "Mary", gold: 1, silver: 1, bronze: 3}, - {country: "Australia", language: "English", name: "Tess", gold: 2, silver: 1, bronze: 1}, - {country: "Australia", language: "English", name: "John", gold: 3, silver: 2, bronze: 1}, - {country: "Canada", language: "English", name: "Bob", gold: 7, silver: 5, bronze: 3}, - {country: "Canada", language: "English", name: "Jack", gold: 2, silver: 1, bronze: 3}, - {country: "Canada", language: "English", name: "Mary", gold: 0, silver: 1, bronze: 3}, - {country: "Switzerland", language: "French", name: "Bob", gold: 2, silver: 3, bronze: 1}, - {country: "Switzerland", language: "French", name: "Jack", gold: 2, silver: 3, bronze: 1}, - {country: "Switzerland", language: "French", name: "Mary", gold: 1, silver: 3, bronze: 1}, - {country: "Switzerland", language: "French", name: "John", gold: 1, silver: 4, bronze: 1}, - {country: "Spain", language: "Spanish", name: "Bob", gold: 1, silver: 4, bronze: 0}, - {country: "Spain", language: "Spanish", name: "Jack", gold: 0, silver: 1, bronze: 1}, - {country: "Spain", language: "Spanish", name: "Sue", gold: 1, silver: 4, bronze: 1}, - {country: "Portugal", language: "Portuguese", name: "Mary", gold: 2, silver: 1, bronze: 4}, - {country: "Portugal", language: "Portuguese", name: "Tess", gold: 3, silver: 1, bronze: 1}, - {country: "Portugal", language: "Portuguese", name: "John", gold: 5, silver: 2, bronze: 1}, - {country: "Zimbabwe", language: "English", name: "Bob", gold: 3, silver: 1, bronze: 4}, - {country: "Zimbabwe", language: "English", name: "Jack", gold: 4, silver: 1, bronze: 4}, - {country: "Zimbabwe", language: "English", name: "Mary", gold: 2, silver: 1, bronze: 4}, - {country: "Brazil", language: "Brazillian", name: "Bob", gold: 3, silver: 4, bronze: 1}, - {country: "Brazil", language: "Brazillian", name: "Jack", gold: 2, silver: 4, bronze: 1}, - {country: "Brazil", language: "Brazillian", name: "Mary", gold: 4, silver: 0, bronze: 1}, - {country: "Brazil", language: "Brazillian", name: "John", gold: 1, silver: 0, bronze: 1}]; - } - - render() { - let divStyle = { - height: 400, - width: 900 - }; - - return ( -
-

Floating Filter Example

- - -
- ) - } -}; diff --git a/src-examples/floatingFilter/SlidingFloatingFilter.jsx b/src-examples/floatingFilter/SlidingFloatingFilter.jsx deleted file mode 100644 index 5d9e116..0000000 --- a/src-examples/floatingFilter/SlidingFloatingFilter.jsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, {Component} from "react"; - -export default class SlidingFloatingFilter extends Component { - constructor(props) { - super(props); - - this.state = { - maxValue: props.maxValue, - currentValue: 0 - } - } - - valueChanged = (event) => { - this.setState({ - currentValue: event.target.value - }, - () => { - this.props.onFloatingFilterChanged({model: this.buildModel()}); - }) - - }; - - onParentModelChanged(parentModel) { - // note that the filter could be anything here, but our purposes we're assuming a greater than filter only, - // so just read off the value and use that - this.setState({ - currentValue: !parentModel ? 0 : parentModel.filter - }); - } - - buildModel() { - if (this.state.currentValue === 0) { - return null; - } - return { - filterType: 'number', - type: 'greaterThan', - filter: this.state.currentValue, - filterTo: null - }; - } - - render() { - return ( - - ) - } -} \ No newline at end of file diff --git a/src-examples/fullWidthExample/FullWidthComponentExample.jsx b/src-examples/fullWidthExample/FullWidthComponentExample.jsx deleted file mode 100644 index 14442d6..0000000 --- a/src-examples/fullWidthExample/FullWidthComponentExample.jsx +++ /dev/null @@ -1,88 +0,0 @@ -import React, {Component} from "react"; - -import {AgGridReact} from "ag-grid-react"; -import NameAndAgeRenderer from "./NameAndAgeRenderer"; - -export default class FullWidthComponentExample extends Component { - constructor(props) { - super(props); - - this.state = { - gridOptions: {}, - - rowData: FullWidthComponentExample.createRowData(), - columnDefs: FullWidthComponentExample.createColumnDefs() - }; - - this.onGridReady = this.onGridReady.bind(this); - } - - onGridReady(params) { - this.gridApi = params.api; - this.columnApi = params.columnApi; - - this.gridApi.sizeColumnsToFit(); - } - - isFullWidthCell(rowNode) { - return (rowNode.id === "0") || (parseInt(rowNode.id) % 2 === 0); - } - - static createColumnDefs() { - return [ - { - headerName: "Name", - field: "name", - width: 400 - }, - { - headerName: "Age", - field: "age", - width: 399 - }, - ]; - } - - static createRowData() { - return [ - {name: "Bob", age: 10}, - {name: "Harry", age: 3}, - {name: "Sally", age: 20}, - {name: "Mary", age: 5}, - {name: "John", age: 15}, - {name: "Bob", age: 10}, - {name: "Harry", age: 3}, - {name: "Sally", age: 20}, - {name: "Mary", age: 5}, - {name: "John", age: 15}, - {name: "Jack", age: 25}, - {name: "Sue", age: 43}, - {name: "Sean", age: 44}, - {name: "Niall", age: 2}, - {name: "Alberto", age: 32}, - {name: "Fred", age: 53}, - {name: "Jenny", age: 34}, - {name: "Larry", age: 13}, - ]; - } - - render() { - return ( -
-

Full Width Renderer Example

- - -
- ); - } -}; diff --git a/src-examples/fullWidthExample/NameAndAgeRenderer.jsx b/src-examples/fullWidthExample/NameAndAgeRenderer.jsx deleted file mode 100644 index 1054997..0000000 --- a/src-examples/fullWidthExample/NameAndAgeRenderer.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, {Component} from "react"; - -export default class NameAndAgeRenderer extends Component { - constructor(props) { - super(props); - - this.values = `Name: ${this.props.data.name}, Age: ${this.props.data.age}`; - } - - render() { - let style = { - border: "2px solid #22ff22", - borderRadius: "5px", - backgroundColor: "#bbffbb" - }; - - return ( -
Full Width Column! { this.values }
- ); - } -}; diff --git a/src-examples/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx b/src-examples/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx deleted file mode 100644 index ce59185..0000000 --- a/src-examples/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx +++ /dev/null @@ -1,126 +0,0 @@ -import React, {Component} from "react"; - -import {AgGridReact} from "ag-grid-react"; -import MedalRenderer from "./MedalRenderer"; - -import "ag-grid-enterprise"; - -export default class GroupedRowInnerRendererComponentExample extends Component { - constructor(props) { - super(props); - - this.state = { - gridOptions: {}, - - rowData: this.createRowData(), - columnDefs: this.createColumnDefs(), - }; - - this.onGridReady = this.onGridReady.bind(this); - } - - onGridReady(params) { - this.gridApi = params.api; - this.columnApi = params.columnApi; - - this.gridApi.sizeColumnsToFit(); - } - - createColumnDefs() { - return [ - { - headerName: "Country", - field: "country", - width: 100, - rowGroupIndex: 0 - }, - { - headerName: "Name", - field: "name", - width: 100 - }, - { - headerName: "Gold", - field: "gold", - width: 100, - aggFunc: 'sum' - }, - { - headerName: "Silver", - field: "silver", - width: 100, - aggFunc: 'sum' - }, - { - headerName: "Bronze", - field: "bronze", - width: 100, - aggFunc: 'sum' - }, - ]; - } - - createRowData() { - return [ - {country: "United States", name: "Bob", gold: 1, silver: 0, bronze: 0}, - {country: "United States", name: "Jack", gold: 0, silver: 1, bronze: 1}, - {country: "United States", name: "Sue", gold: 1, silver: 0, bronze: 1}, - {country: "United Kingdom", name: "Mary", gold: 1, silver: 1, bronze: 0}, - {country: "United Kingdom", name: "Tess", gold: 0, silver: 1, bronze: 1}, - {country: "United Kingdom", name: "John", gold: 0, silver: 2, bronze: 1}, - {country: "Jamaica", name: "Bob", gold: 1, silver: 1, bronze: 0}, - {country: "Jamaica", name: "Jack", gold: 1, silver: 1, bronze: 0}, - {country: "Jamaica", name: "Mary", gold: 1, silver: 1, bronze: 0}, - {country: "South Africa", name: "Bob", gold: 1, silver: 0, bronze: 1}, - {country: "South Africa", name: "Jack", gold: 1, silver: 0, bronze: 1}, - {country: "South Africa", name: "Mary", gold: 1, silver: 0, bronze: 1}, - {country: "South Africa", name: "John", gold: 1, silver: 0, bronze: 1}, - {country: "New Zealand", name: "Bob", gold: 1, silver: 0, bronze: 0}, - {country: "New Zealand", name: "Jack", gold: 0, silver: 1, bronze: 1}, - {country: "New Zealand", name: "Sue", gold: 1, silver: 0, bronze: 1}, - {country: "Australia", name: "Mary", gold: 1, silver: 1, bronze: 0}, - {country: "Australia", name: "Tess", gold: 0, silver: 1, bronze: 1}, - {country: "Australia", name: "John", gold: 0, silver: 2, bronze: 1}, - {country: "Canada", name: "Bob", gold: 1, silver: 1, bronze: 0}, - {country: "Canada", name: "Jack", gold: 1, silver: 1, bronze: 0}, - {country: "Canada", name: "Mary", gold: 1, silver: 1, bronze: 0}, - {country: "Switzerland", name: "Bob", gold: 1, silver: 0, bronze: 1}, - {country: "Switzerland", name: "Jack", gold: 1, silver: 0, bronze: 1}, - {country: "Switzerland", name: "Mary", gold: 1, silver: 0, bronze: 1}, - {country: "Switzerland", name: "John", gold: 1, silver: 0, bronze: 1}, - {country: "Spain", name: "Bob", gold: 1, silver: 0, bronze: 0}, - {country: "Spain", name: "Jack", gold: 0, silver: 1, bronze: 1}, - {country: "Spain", name: "Sue", gold: 1, silver: 0, bronze: 1}, - {country: "Portugal", name: "Mary", gold: 1, silver: 1, bronze: 0}, - {country: "Portugal", name: "Tess", gold: 0, silver: 1, bronze: 1}, - {country: "Portugal", name: "John", gold: 0, silver: 2, bronze: 1}, - {country: "Zimbabwe", name: "Bob", gold: 1, silver: 1, bronze: 0}, - {country: "Zimbabwe", name: "Jack", gold: 1, silver: 1, bronze: 0}, - {country: "Zimbabwe", name: "Mary", gold: 1, silver: 1, bronze: 0}, - {country: "Brazil", name: "Bob", gold: 1, silver: 0, bronze: 1}, - {country: "Brazil", name: "Jack", gold: 1, silver: 0, bronze: 1}, - {country: "Brazil", name: "Mary", gold: 1, silver: 0, bronze: 1}, - {country: "Brazil", name: "John", gold: 1, silver: 0, bronze: 1} - ]; - } - - render() { - return ( -
-

Group Row Renderer Example

- - -
- ); - } -}; diff --git a/src-examples/groupedRowInnerRendererExample/MedalRenderer.jsx b/src-examples/groupedRowInnerRendererExample/MedalRenderer.jsx deleted file mode 100644 index d5895e6..0000000 --- a/src-examples/groupedRowInnerRendererExample/MedalRenderer.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, {Component} from "react"; - -export default class MedalRenderer extends Component { - constructor(props) { - super(props); - - this.country = this.props.node.key; - this.gold = this.props.node.aggData.gold; - this.silver = this.props.node.aggData.silver; - this.bronze = this.props.node.aggData.bronze; - - // override the containing div so that the +/- and label are inline - this.props.reactContainer.style.display = "inline-block"; - } - - render() { - return ( - {this.country} Gold: {this.gold}, Silver: {this.silver}, Bronze: {this.bronze} - ); - } -}; diff --git a/src-examples/pinnedRowExample/PinnedRowComponentExample.jsx b/src-examples/pinnedRowExample/PinnedRowComponentExample.jsx deleted file mode 100644 index 0e73aac..0000000 --- a/src-examples/pinnedRowExample/PinnedRowComponentExample.jsx +++ /dev/null @@ -1,85 +0,0 @@ -import React, {Component} from "react"; - -import {AgGridReact} from "ag-grid-react"; -import StyledRenderer from "./StyledRenderer"; - -export default class PinnedRowComponentExample extends Component { - constructor(props) { - super(props); - - this.state = { - gridOptions: {}, - - rowData: this.createRowData(), - columnDefs: this.createColumnDefs(), - - pinnedTopRowData: [{row: "Top Row", number: "Top Number"}], - pinnedBottomRowData: [{row: "Bottom Row", number: "Bottom Number"}] - }; - - this.onGridReady = this.onGridReady.bind(this); - } - - onGridReady(params) { - this.gridApi = params.api; - this.columnApi = params.columnApi; - - this.gridApi.sizeColumnsToFit(); - } - - createColumnDefs() { - return [ - { - headerName: "Row", - field: "row", - width: 400, - pinnedRowCellRendererFramework: StyledRenderer, - pinnedRowCellRendererParams: { - style: {'fontWeight': 'bold'} - } - }, - { - headerName: "Number", - field: "number", - width: 399, - pinnedRowCellRendererFramework: StyledRenderer, - pinnedRowCellRendererParams: { - style: {'fontStyle': 'italic'} - } - }, - ]; - } - - createRowData() { - let rowData = []; - - for (let i = 0; i < 15; i++) { - rowData.push({ - row: "Row " + i, - number: Math.round(Math.random() * 100) - }); - } - - return rowData; - } - - render() { - return ( -
-

Pinned Row Renderer Example

- - -
- ); - } -}; diff --git a/src-examples/pinnedRowExample/StyledRenderer.jsx b/src-examples/pinnedRowExample/StyledRenderer.jsx deleted file mode 100644 index 09d79e6..0000000 --- a/src-examples/pinnedRowExample/StyledRenderer.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, {Component} from "react"; - -export default class CurrencyRenderer extends Component { - constructor(props) { - super(props); - } - - render() { - return ( - {this.props.value} - ); - } -}; diff --git a/src-examples/richComponentExample/ClickableRenderer.jsx b/src-examples/richComponentExample/ClickableRenderer.jsx deleted file mode 100644 index dc5951c..0000000 --- a/src-examples/richComponentExample/ClickableRenderer.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, {Component} from "react"; - -export default class ClickableRenderer extends Component { - constructor(props) { - super(props); - - this.state = { - cell: { - row: this.props.value, - col: this.props.colDef.headerName - } - }; - } - - clicked = () => { - console.log("Child Cell Clicked: " + JSON.stringify(this.state.cell)); - }; - - render() { - let buttonStyle = { - lineHeight: 0.5, - width: "98%" - }; - return ( - - ); - } -} \ No newline at end of file diff --git a/src-examples/richComponentExample/RatioRenderer.jsx b/src-examples/richComponentExample/RatioRenderer.jsx deleted file mode 100644 index 3be8a7c..0000000 --- a/src-examples/richComponentExample/RatioRenderer.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import React, {Component} from "react"; - -export default class RatioRenderer extends Component { - constructor(props) { - super(props); - } - - render() { - let agRatioStyle = { - display: "block", - overflow: "hidden", - border: "1px solid #ccc", - borderRadius: "6px", - background: "#fff", - height: 20 - }; - - let svg = { - width: "100%", - height: "100%", - pointerEvents: "none" - }; - - let topBar = { - fill: "#ff9933" - }; - - let bottomBar = { - fill: "#6699ff" - }; - - return ( - - - - - - - ); - } -} \ No newline at end of file diff --git a/src-examples/richComponentExample/RichComponentsExample.jsx b/src-examples/richComponentExample/RichComponentsExample.jsx deleted file mode 100644 index d0c5c8d..0000000 --- a/src-examples/richComponentExample/RichComponentsExample.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import React, {Component} from "react"; - -import {AgGridReact} from "ag-grid-react"; -import RatioRenderer from "./RatioRenderer"; -import ClickableRenderer from "./ClickableRenderer"; - -export default class RichComponentsExample extends Component { - constructor(props) { - super(props); - - this.state = { - rowData: RichComponentsExample.createRowData(), - columnDefs: RichComponentsExample.createColumnDefs() - }; - } - - onGridReady = (params) => { - this.gridApi = params.api; - this.columnApi = params.columnApi; - - this.gridApi.sizeColumnsToFit(); - }; - - static createColumnDefs() { - return [ - { - headerName: "Name", - field: "name", - width: 200 - }, - { - headerName: "Ratio Component", - field: "ratios", - cellRendererFramework: RatioRenderer, - width: 350 - }, - { - headerName: "Clickable Component", - field: "name", - cellRendererFramework: ClickableRenderer, - width: 250 - } - ]; } - - static createRowData() { - return [ - {name: 'Homer Simpson', ratios: {top: 0.25, bottom: 0.75}}, - {name: 'Marge Simpson', ratios: {top: 0.67, bottom: 0.39}}, - {name: 'Bart Simpson', ratios: {top: 0.82, bottom: 0.47}}, - {name: 'Lisa Simpson', ratios: {top: 0.39, bottom: 1}}, - {name: 'Barney', ratios: {top: 0.22, bottom: 0.78}}, - {name: 'Sideshow Bob', ratios: {top: 0.13, bottom: 0.87}}, - {name: 'Ned Flanders', ratios: {top: 0.49, bottom: 0.51}}, - {name: 'Milhouse', ratios: {top: 0.69, bottom: 0.31}}, - {name: 'Apu', ratios: {top: 0.89, bottom: 0.11}}, - {name: 'Moe', ratios: {top: 0.64, bottom: 0.36}}, - {name: 'Smithers', ratios: {top: 0.09, bottom: 0.91}}, - {name: 'Edna Krabappel', ratios: {top: 0.39, bottom: 0.61}}, - {name: 'Krusty', ratios: {top: 0.74, bottom: 0.26}} - ]; - } - - render() { - return ( -
-

Dynamic React Components - Richer Example

- - -
-
-
This example demonstrates Dynamic React Components with ag-Grid. Functionally similar - to the Dynamic React Components Example but with slightly richer components.
-
-
-
-
-
-
-

React Functionality

-

Utilise React Components within ag-Grid

- React with ag-Grid - React Renderers -
-
-
-
-
- ); - } -}; diff --git a/src-examples/richGridExample/ColDefFactory.jsx b/src-examples/richGridExample/ColDefFactory.jsx deleted file mode 100644 index 15e0ea5..0000000 --- a/src-examples/richGridExample/ColDefFactory.jsx +++ /dev/null @@ -1,124 +0,0 @@ -import SkillsCellRenderer from './SkillsCellRenderer.jsx'; -import NameCellEditor from './NameCellEditor.jsx'; -import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx'; -import RefData from './RefData'; -import SkillsFilter from './SkillsFilter.jsx'; -import ProficiencyFilter from './ProficiencyFilter.jsx'; -import HeaderGroupComponent from './HeaderGroupComponent.jsx'; - -export default class ColDefFactory { - createColDefs() { - return [ - { - headerName: '#', - width: 30, - checkboxSelection: true, - suppressSorting: true, - suppressMenu: true, - suppressFilter: true, - pinned: true - }, - { - headerName: 'Employee', - headerGroupComponentFramework: HeaderGroupComponent, - children: [ - { - 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, - // an example of using a non-React cell renderer - cellRenderer: countryCellRenderer, - pinned: true, - filterParams: { - cellRenderer: countryCellRenderer, - cellHeight: 20 - } - }, - { - headerName: "DOB", - field: "dob", - width: 145, - 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' - } - ] - }, - { - headerName: 'IT Skills', - children: [ - { - headerName: "Skills", - width: 125, - suppressSorting: true, - field: 'skills', - enableRowGroup: true, - enablePivot: true, - // supply a React component - cellRendererFramework: SkillsCellRenderer, - // supply a React component - filterFramework: SkillsFilter - }, - { - headerName: "Proficiency", - field: "proficiency", - width: 135, - enableValue: true, - // supply a React component - cellRendererFramework: ProficiencyCellRenderer, - // supply a React component - filterFramework: ProficiencyFilter - } - ] - }, - { - headerName: 'Contact', - children: [ - {headerName: "Mobile", field: "mobile", width: 150, filter: 'text'}, - {headerName: "Land-line", field: "landline", width: 150, filter: 'text'}, - {headerName: "Address", field: "address", width: 500, filter: 'text'} - ] - } - ]; - } -} - -// this is a simple cell renderer, putting together static html, no -// need to use React for it. -function countryCellRenderer(params) { - if (params.value) { - const flag = ""; - return flag + " " + params.value; - } else { - return null; - } -} - -//Utility function used to pad the date formatting. -function pad(num, totalStringSize) { - let asString = num + ""; - while (asString.length < totalStringSize) asString = "0" + asString; - return asString; -} diff --git a/src-examples/richGridExample/DateComponent.jsx b/src-examples/richGridExample/DateComponent.jsx deleted file mode 100644 index ba5145e..0000000 --- a/src-examples/richGridExample/DateComponent.jsx +++ /dev/null @@ -1,171 +0,0 @@ -import React from "react"; -import * as PropTypes from "prop-types"; - -// Date Component to be used in the date filter. -// This is a very simple example of how a React component can be plugged as a DateComponentFramework -// as you can see, the only requirement is that the React component implements the required methods -// getDate and setDate and that it calls back into props.onDateChanged every time that the date changes. -export default class DateComponent extends React.Component { - - constructor(props) { - super(props); - //The state of this component is represented of: - // The current date it holds, null by default, null if the date typed by the user is not valid or fields are blank - // The current values that the user types in the input boxes, by default '' - - //The textBoxes state is necessary since it can be set from ag-Grid. This can be seen in this example through - // the usage of the button DOB equals to 01/01/2000 in the example page. - this.state = { - date: null, - textBoxes: { - dd: '', - mm: '', - yyyy: '' - } - } - } - - render() { - //Inlining styles to make simpler the component - let filterStyle = { - margin: '2px' - }; - let ddStyle = { - width: '30px' - }; - let mmStyle = { - width: '30px' - }; - let yyyyStyle = { - width: '40px' - }; - let resetStyle = { - padding: '2px', - backgroundColor: 'red', - borderRadius: '3px', - fontSize: '10px', - marginRight: '5px', - color: 'white' - }; - - return ( -
- x - / - / - -
- ); - } - - //********************************************************************************* - // METHODS REQUIRED BY AG-GRID - //********************************************************************************* - - getDate() { - //ag-grid will call us here when in need to check what the current date value is hold by this - //component. - return this.state.date; - } - - setDate(date) { - //ag-grid will call us here when it needs this component to update the date that it holds. - this.setState({ - date, - textBoxes: { - dd: date ? date.getDate() : '', - mm: date ? date.getMonth() + 1 : '', - yyyy: date ? date.getFullYear() : '' - } - }) - } - - //********************************************************************************* - // LINKS THE INTERNAL STATE AND AG-GRID - //********************************************************************************* - - updateAndNotifyAgGrid(date, textBoxes) { - this.setState({ - date: date, - textBoxes: textBoxes - }, - //Callback after the state is set. This is where we tell ag-grid that the date has changed so - //it will proceed with the filtering and we can then expect ag-Grid to call us back to getDate - this.props.onDateChanged - ); - } - - - //********************************************************************************* - // LINKING THE UI, THE STATE AND AG-GRID - //********************************************************************************* - - resetDate() { - let date = null; - let textBoxes = { - dd: '', - mm: '', - yyyy: '', - }; - - this.updateAndNotifyAgGrid(date, textBoxes) - } - - onDateChanged() { - let date = this.parseDate(this.refs.dd.value, this.refs.mm.value, this.refs.yyyy.value); - let textBoxes = { - dd: this.refs.dd.value, - mm: this.refs.mm.value, - yyyy: this.refs.yyyy.value, - }; - - this.updateAndNotifyAgGrid(date, textBoxes) - } - - //********************************************************************************* - // INTERNAL LOGIC - //********************************************************************************* - - parseDate(dd, mm, yyyy) { - //If any of the three input date fields are empty, stop and return null - if (dd.trim() === '' || mm.trim() === '' || yyyy.trim() === '') { - return null; - } - - let day = Number(dd); - let month = Number(mm); - let year = Number(yyyy); - - let date = new Date(year, month - 1, day); - - //If the date is not valid - if (isNaN(date.getTime())) { - return null; - } - - //Given that new Date takes any garbage in, it is possible for the user to specify a new Date - //like this (-1, 35, 1) and it will return a valid javascript date. In this example, it will - //return Sat Dec 01 1 00:00:00 GMT+0000 (GMT) - Go figure... - //To ensure that we are not letting non sensical dates to go through we check that the resultant - //javascript date parts (month, year and day) match the given date fields provided as parameters. - //If the javascript date parts don't match the provided fields, we assume that the input is non - //sensical... ie: Day=-1 or month=14, if this is the case, we return null - //This also protects us from non sensical dates like dd=31, mm=2 of any year - if (date.getDate() != day || date.getMonth() + 1 != month || date.getFullYear() != year) { - return null; - } - - return date; - } -} - -// 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. -DateComponent.propTypes = { - params: PropTypes.object -}; \ No newline at end of file diff --git a/src-examples/richGridExample/HeaderGroupComponent.jsx b/src-examples/richGridExample/HeaderGroupComponent.jsx deleted file mode 100644 index 30fc1da..0000000 --- a/src-examples/richGridExample/HeaderGroupComponent.jsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import * as PropTypes from 'prop-types'; - -// Header component to be used as default for all the columns. -export default class HeaderGroupComponent extends React.Component { - - constructor(props) { - super(props); - this.props.columnGroup.getOriginalColumnGroup().addEventListener('expandedChanged', this.onExpandChanged.bind(this)); - this.state = { - expanded: null - }; - } - - componentDidMount() { - 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. -HeaderGroupComponent.propTypes = { - params: PropTypes.object -}; \ No newline at end of file diff --git a/src-examples/richGridExample/NameCellEditor.jsx b/src-examples/richGridExample/NameCellEditor.jsx deleted file mode 100644 index b7c2a65..0000000 --- a/src-examples/richGridExample/NameCellEditor.jsx +++ /dev/null @@ -1,117 +0,0 @@ -import React from 'react'; -import * as PropTypes from 'prop-types'; - -const KEY_BACKSPACE = 8; -const KEY_DELETE = 46; -const KEY_F2 = 113; - -// cell renderer for the proficiency column. this is a very basic cell editor, -export default class NameCellEditor extends React.Component { - - constructor(props) { - super(props); - // the entire ag-Grid properties are passed as one single object inside the params - this.state = this.createInitialState(props); - } - - // work out how to present the data based on what the user hit. you don't need to do any of - // this for your ag-Grid cellEditor to work, however it makes sense to do this so the user - // experience is similar to Excel - createInitialState(props) { - - let startValue; - const putCursorAtEndOnFocus = false; - const highlightAllOnFocus = false; - - if (props.keyPress === KEY_BACKSPACE || props.keyPress === KEY_DELETE) { - // if backspace or delete pressed, we clear the cell - startValue = ''; - } else if (props.charPress) { - // if a letter was pressed, we start with the letter - startValue = props.charPress; - } else { - // otherwise we start with the current value - startValue = props.value; - if (props.keyPress === KEY_F2) { - this.putCursorAtEndOnFocus = true; - } else { - this.highlightAllOnFocus = true; - } - } - - return { - value: startValue, - putCursorAtEndOnFocus: putCursorAtEndOnFocus, - highlightAllOnFocus: highlightAllOnFocus - } - } - - render() { - return ( - - ); - } - - onChangeListener(event) { - // if doing React, you will probably be using a library for managing immutable - // objects better. to keep this example simple, we don't use one. - const newState = { - value: event.target.value, - putCursorAtEndOnFocus: this.state.putCursorAtEndOnFocus, - highlightAllOnFocus: this.state.highlightAllOnFocus - }; - this.setState(newState); - } - - // called by ag-Grid, to get the final value - getValue() { - return this.state.value; - } - - // cannot use componentDidMount because although the component might be ready from React's point of - // view, it may not yet be in the browser (put in by ag-Grid) so focus will not work - afterGuiAttached() { - // get ref from React component - const eInput = this.refs.textField; - eInput.focus(); - if (this.highlightAllOnFocus) { - eInput.select(); - } else { - // when we started editing, we want the carot at the end, not the start. - // this comes into play in two scenarios: a) when user hits F2 and b) - // when user hits a printable character, then on IE (and only IE) the carot - // was placed after the first character, thus 'apply' would end up as 'pplea' - const length = eInput.value ? eInput.value.length : 0; - if (length > 0) { - eInput.setSelectionRange(length, length); - } - } - } - - // if we want the editor to appear in a popup, then return true. - isPopup() { - return false; - } - - // return true here if you don't want to allow editing on the cell. - isCancelBeforeStart() { - return false; - } - - // just to demonstrate, if you type in 'cancel' then the edit will not take effect - isCancelAfterEnd() { - if (this.state.value && this.state.value.toUpperCase() === 'CANCEL') { - return true; - } else { - return false; - } - } -} - -// 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. -NameCellEditor.propTypes = { - params: PropTypes.object -}; \ No newline at end of file diff --git a/src-examples/richGridExample/ProficiencyCellRenderer.jsx b/src-examples/richGridExample/ProficiencyCellRenderer.jsx deleted file mode 100644 index d2760de..0000000 --- a/src-examples/richGridExample/ProficiencyCellRenderer.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -// cell renderer for the proficiency column. this is a very basic cell renderer, -// it is arguable that we should not of used React and just returned a string of -// html as a normal ag-Grid cellRenderer. -export default class ProficiencyCellRenderer extends React.Component { - - render() { - let backgroundColor; - if (this.props.value < 20) { - backgroundColor = 'red'; - } else if (this.props.value < 60) { - backgroundColor = '#ff9900'; - } else { - backgroundColor = '#00A000'; - } - - return ( -
-
{this.props.value}%
-
- ); - } -} diff --git a/src-examples/richGridExample/ProficiencyFilter.jsx b/src-examples/richGridExample/ProficiencyFilter.jsx deleted file mode 100644 index b2d2900..0000000 --- a/src-examples/richGridExample/ProficiencyFilter.jsx +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react'; - -const PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%']; - -// the proficiency filter component. this demonstrates how to integrate -// a React filter component with ag-Grid. -export default class ProficiencyFilter extends React.Component { - - constructor(props) { - super(props); - this.state = { - selected: PROFICIENCY_NAMES[0] - }; - } - - // called by agGrid - doesFilterPass(params) { - const value = this.props.valueGetter(params); - const valueAsNumber = parseFloat(value); - - switch (this.state.selected) { - case PROFICIENCY_NAMES[1] : - return valueAsNumber >= 40; - case PROFICIENCY_NAMES[2] : - return valueAsNumber >= 60; - case PROFICIENCY_NAMES[3] : - return valueAsNumber >= 80; - default : - return true; - } - }; - - // called by agGrid - isFilterActive() { - return this.state.selected !== PROFICIENCY_NAMES[0]; - }; - - onButtonPressed(name) { - const newState = {selected: name}; - // set the state, and once it is done, then call filterChangedCallback - this.setState(newState, this.props.filterChangedCallback); - } - - - getModel() { - return '' - } - - setModel(model) { - } - - render() { - const rows = []; - PROFICIENCY_NAMES.forEach((name) => { - const selected = this.state.selected === name; - rows.push( -
- -
- ); - }); - - return ( -
-
- Custom Proficiency Filter -
- {rows} -
- ); - } - - // these are other method that agGrid calls that we - // could of implemented, but they are optional and - // we have no use for them in this particular filter. - //getApi() {} - //afterGuiAttached(params) {} - //onNewRowsLoaded() {} - //onAnyFilterChanged() {} -} diff --git a/src-examples/richGridExample/RefData.js b/src-examples/richGridExample/RefData.js deleted file mode 100644 index d5a2941..0000000 --- a/src-examples/richGridExample/RefData.js +++ /dev/null @@ -1,129 +0,0 @@ -export default class RefData { -} - -RefData.FIRST_NAMES = [ - "Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella", - "Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby", - "Ella", "Evie", "Freya", "Isla", "Poppy", "Daisy", "Layla" -]; - -RefData.LAST_NAMES = [ - "Beckham", "Black", "Braxton", "Brennan", "Brock", "Bryson", "Cadwell", - "Cage", "Carson", "Chandler", "Cohen", "Cole", "Corbin", "Dallas", "Dalton", "Dane", - "Donovan", "Easton", "Fisher", "Fletcher", "Grady", "Greyson", "Griffin", "Gunner", - "Hayden", "Hudson", "Hunter", "Jacoby", "Jagger", "Jaxon", "Jett", "Kade", "Kane", - "Keating", "Keegan", "Kingston", "Kobe" -]; - -RefData.COUNTRY_CODES = { - Ireland: "ie", - Spain: "es", - "United Kingdom": "gb", - France: "fr", - Germany: "de", - Sweden: "se", - Italy: "it", - Greece: "gr", - Iceland: "is", - Portugal: "pt", - Malta: "mt", - Norway: "no", - Brazil: "br", - Argentina: "ar", - Colombia: "co", - Peru: "pe", - Venezuela: "ve", - Uruguay: "uy" -}; - -RefData.COUNTRIES = [ - {country: "Ireland", continent: "Europe", language: "English"}, - {country: "Spain", continent: "Europe", language: "Spanish"}, - {country: "United Kingdom", continent: "Europe", language: "English"}, - {country: "France", continent: "Europe", language: "French"}, - {country: "Germany", continent: "Europe", language: "(other)"}, - {country: "Sweden", continent: "Europe", language: "(other)"}, - {country: "Norway", continent: "Europe", language: "(other)"}, - {country: "Italy", continent: "Europe", language: "(other)"}, - {country: "Greece", continent: "Europe", language: "(other)"}, - {country: "Iceland", continent: "Europe", language: "(other)"}, - {country: "Portugal", continent: "Europe", language: "Portuguese"}, - {country: "Malta", continent: "Europe", language: "(other)"}, - {country: "Brazil", continent: "South America", language: "Portuguese"}, - {country: "Argentina", continent: "South America", language: "Spanish"}, - {country: "Colombia", continent: "South America", language: "Spanish"}, - {country: "Peru", continent: "South America", language: "Spanish"}, - {country: "Venezuela", continent: "South America", language: "Spanish"}, - {country: "Uruguay", continent: "South America", language: "Spanish"} -]; - -RefData.DOB = [ - new Date(2000, 0, 1), - new Date(2001, 1, 2), - new Date(2002, 2, 3), - new Date(2003, 3, 4), - new Date(2004, 4, 5), - new Date(2005, 5, 6), - new Date(2006, 6, 7), - new Date(2007, 7, 8), - new Date(2008, 8, 9), - new Date(2009, 9, 10), - new Date(2010, 10, 11), - new Date(2011, 11, 12) -]; - -RefData.ADDRESSES = [ - '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763', - '3685 Rocky Glade, Showtucket, NU, X1E-9I0, CA, (867) 371-4215', - '3235 High Forest, Glen Campbell, MS, 39035-6845, US, (601) 638-8186', - '2234 Sleepy Pony Mall , Drain, DC, 20078-4243, US, (202) 948-3634', - '2722 Hazy Turnabout, Burnt Cabins, NY, 14120-5642, US, (917) 604-6597', - '6686 Lazy Ledge, Two Rock, CA, 92639-3020, US, (619) 901-9911', - '2000 Dewy Limits, Wacahoota, NF, A4L-2V9, CA, (709) 065-3959', - '7710 Noble Pond Avenue, Bolivia, RI, 02931-1842, US, (401) 865-2160', - '3452 Sunny Vale, Pyro, ON, M8V-4Z0, CA, (519) 072-8609', - '4402 Dusty Cove, Many Farms, UT, 84853-8223, US, (435) 518-0673', - '5198 Silent Parade, Round Bottom, MD, 21542-9798, US, (301) 060-7245', - '8550 Shady Moor, Kitty Fork, CO, 80941-6207, US, (303) 502-3767', - '2131 Old Dell, Merry Midnight, AK, 99906-8842, US, (907) 369-2206', - '7390 Harvest Crest, Mosquito Crossing, RI, 02957-6116, US, (401) 463-6348', - '874 Little Point, Hot Coffee, BC, V3U-2P6, CA, (250) 706-9207', - '8834 Stony Pioneer Heights, Newlove, OR, 97419-8670, US, (541) 408-2213', - '9829 Grand Beach, Flint, UT, 84965-9900, US, (435) 700-5161', - '3799 Cozy Blossom Ramp, Ptarmigan, MS, 38715-0313, US, (769) 740-1526', - '3254 Silver Island Loop, Maunaloa, DE, 19869-3169, US, (302) 667-7671', - '1081 Middle Wood, Taylors Gut Landing, OR, 97266-2873, US, (541) 357-6310', - '1137 Umber Trail, Shacktown, NW, X3U-5Y8, CA, (867) 702-6883', - '9914 Hidden Bank, Wyoming, MO, 64635-9665, US, (636) 280-4192', - '7080 Misty Nectar Townline, Coward, AB, T9U-3N4, CA, (403) 623-2838', - '1184 Wishing Grounds, Vibank, NW, X7D-0V9, CA, (867) 531-2730', - '126 Easy Pointe, Grandview Beach, KY, 40928-9539, US, (502) 548-0956', - '6683 Colonial Street, Swan River, BC, V1A-9I8, CA, (778) 014-4257', - '960 Gentle Oak Lane, Shakopee, ND, 58618-6277, US, (701) 327-1219', - '6918 Cotton Pine Corner, Kenaston, IA, 52165-3975, US, (515) 906-7427', - '2368 Burning Woods, Ernfold, NY, 11879-9186, US, (646) 819-0355', - '5646 Quiet Shadow Chase, Tiger Tail, IA, 52283-5537, US, (712) 375-9225', - '5466 Foggy Mountain Dale, Sweet Home, MT, 59738-0251, US, (406) 881-1706', - '5313 Clear Willow Route, Amazon, BC, V0S-2S6, CA, (604) 340-7596', - '7000 Pleasant Autoroute, Spaceport City, UT, 84749-2448, US, (435) 154-3360', - '8359 Quaking Anchor Road, Gross, BC, V9O-0H5, CA, (250) 985-3859', - '5143 Amber Deer Hollow, New Deal, ND, 58446-0853, US, (701) 927-0322', - '6230 Jagged Bear Key, Young, AR, 72337-3811, US, (501) 805-7239', - '7207 Heather Vista, Devon, WY, 82520-1771, US, (307) 358-7092', - '9416 Red Rise Place, Spraytown, OK, 73809-4766, US, (580) 867-1973', - '3770 Golden Horse Diversion, Yelland, IL, 60471-1487, US, (224) 717-9349', - '4819 Honey Treasure Park, Alaska, NB, E1U-3I0, CA, (506) 656-9138', - '6187 Round Front, Land O Lakes, AK, 99873-6403, US, (907) 853-9063', - '9218 Crystal Highway, Pickelville, MT, 59847-9299, US, (406) 076-0024', - '6737 Bright Quay, Lazy Mountain, KY, 42390-4772, US, (606) 256-7288', - '237 Merry Campus, Twentysix, SC, 29330-4909, US, (864) 945-0157', - '446 Fallen Gate Rise, Petrolia, SC, 29959-9527, US, (864) 826-0553', - '2347 Indian Boulevard, Frisbee, VA, 23797-6458, US, (703) 656-8445', - '365 Emerald Grove Line, Level, NC, 28381-1514, US, (919) 976-7958', - '1207 Iron Extension, Klickitat, SC, 29197-8571, US, (803) 535-7888', - '6770 Cinder Glen, Caronport, OH, 45053-5002, US, (440) 369-4018', - '7619 Tawny Carrefour, Senlac, NV, 89529-9876, US, (775) 901-6433']; - -RefData.IT_SKILLS = ['android', 'css', 'html5', 'mac', 'windows']; - -RefData.IT_SKILLS_NAMES = ['Android', 'CSS', 'HTML 5', 'Mac', 'Windows']; diff --git a/src-examples/richGridExample/RichGridExample.css b/src-examples/richGridExample/RichGridExample.css deleted file mode 100644 index e3bdaf9..0000000 --- a/src-examples/richGridExample/RichGridExample.css +++ /dev/null @@ -1,27 +0,0 @@ -.ag-cell { - padding-top: 2px !important; - padding-bottom: 2px !important; -} - -label { - font-weight: normal !important; -} - -.div-percent-bar { - display: inline-block; - height: 20px; - position: relative; -} - -.div-percent-value { - position: absolute; - padding-left: 4px; - font-weight: bold; - font-size: 13px; -} - -.div-outer-div { - display: inline-block; - height: 100%; - width: 100%; -} diff --git a/src-examples/richGridExample/RichGridExample.jsx b/src-examples/richGridExample/RichGridExample.jsx deleted file mode 100644 index 3586571..0000000 --- a/src-examples/richGridExample/RichGridExample.jsx +++ /dev/null @@ -1,316 +0,0 @@ -import React, {Component} from "react"; -import {AgGridReact} from "ag-grid-react"; -import RowDataFactory from "./RowDataFactory"; -import ColDefFactory from "./ColDefFactory.jsx"; -import DateComponent from "./DateComponent.jsx"; -import SortableHeaderComponent from "./SortableHeaderComponent"; - -import "./RichGridExample.css"; -// take this line out if you do not want to use ag-Grid-Enterprise -import "ag-grid-enterprise"; - -export default class RichGridExample extends Component { - - constructor() { - super(); - - this.state = { - quickFilterText: null, - showToolPanel: false, - columnDefs: new ColDefFactory().createColDefs(), - rowData: new RowDataFactory().createRowData(), - icons: { - columnRemoveFromGroup: '', - filter: '', - sortAscending: '', - sortDescending: '', - groupExpanded: '', - groupContracted: '', - columnGroupOpened: '', - columnGroupClosed: '' - } - }; - - // the grid options are optional, because you can provide every property - // to the grid via standard React properties. however, the react interface - // doesn't block you from using the standard JavaScript interface if you - // wish. Maybe you have the gridOptions stored as JSON on your server? If - // you do, the providing the gridOptions as a standalone object is just - // what you want! - this.gridOptions = { - //We register the react date component that ag-grid will use to render - dateComponentFramework: DateComponent, - // this is how you listen for events using gridOptions - onModelUpdated: function () { - console.log('event onModelUpdated received'); - }, - defaultColDef: { - headerComponentFramework: SortableHeaderComponent, - headerComponentParams: { - menuIcon: 'fa-bars' - } - }, - // this is a simple property - rowBuffer: 10, // no need to set this, the default is fine for almost all scenarios, - floatingFilter: true - }; - } - - - /* Grid Events we're listening to */ - onGridReady = (params) => { - this.api = params.api; - this.columnApi = params.columnApi; - }; - - onCellClicked = (event) => { - console.log('onCellClicked: ' + event.data.name + ', col ' + event.colIndex); - }; - - onRowSelected = (event) => { - console.log('onRowSelected: ' + event.node.data.name); - }; - - /* Demo related methods */ - onToggleToolPanel = (event) => { - this.setState({showToolPanel: event.target.checked}); - }; - - deselectAll() { - this.api.deselectAll(); - } - - onQuickFilterText = (event) => { - this.setState({quickFilterText: event.target.value}); - }; - - onRefreshData = () => { - this.setState({ - rowData: new RowDataFactory().createRowData() - }); - }; - - invokeSkillsFilterMethod = () => { - let skillsFilter = this.api.getFilterInstance('skills'); - let componentInstance = skillsFilter.getFrameworkComponentInstance(); - componentInstance.helloFromSkillsFilter(); - }; - - dobFilter = () => { - let dateFilterComponent = this.api.getFilterInstance('dob'); - dateFilterComponent.setFilterType('equals'); - dateFilterComponent.setDateFrom('2000-01-01'); - - // as the date filter is a React component, and its using setState internally, we need - // to allow time for the state to be set (as setState is an async operation) - // simply wait for the next tick - setTimeout(() => { - this.api.onFilterChanged(); - }, 0) - }; - - render() { - return ( -
-

Rich Grid with Declarative Markup Example

-
-
- Employees Skills and Contact Details -
-
-
-
- - Grid API: - - - - - Column API: - - - -
-
-
- -
-
- -
-
- -
-
- Filter API: - - -
-
-
- enableColResize="true") - suppressRowClickSelection - rowSelection="multiple" - enableColResize - enableSorting - enableFilter - groupHeaders - rowHeight="22"/> -
-
-
-

Rich Grid Example

-
-
-
-
This example demonstrates many features of ag-Grid.
-

Select All/Clear Selection: Select or Deselect - All - Rows

-

Hide/Show Country Column: Select or Deselect - All - Rows - (expand the Employee column to show the Country column first)

-

Toggle The Tool Panel: Let your users Pivot, - Group - and - Aggregate using the Tool Panel

-

Refresh Data: Dynamically Update Grid Data

-

Quick Filter: Perform Quick Grid Wide - Filtering - with - the Quick Filter

-

DOB Filter: Set the DOB filter to 01/01/2000 - using - the - Filter API (expand the Employee column to show the DOB column)

-

Custom Headers: Sort, Filter and Render - Headers - using - Header Components

-
-
-
-
-
-
-

Grid & Column API

-

Utilise Grid Features Programmatically Using the APIs - Available

- Grid API - Column API -
-
-
-
-
-
-

Header Components

-

Customer the Header with React Components

- Header Component - Header Group Component -
-
-
-
-
-
-

Filters

-

Filter with Quick Filters, Floating Filters, Built In - Filters - or Using the - Filter API

- Quick - Filter - Floating Filters - Built in - Filters - Filter API -
-
-
-
-
-
-
-
-

Tool Panel

-

Let your users Pivot, Group and Aggregate using the - Tool - Panel

- Tool Panel -
-
-
-
-
-
-

The Rest

-

Pinned Columns, Checkbox Selection, Customer Renderers, - Data - Updates

- React with ag-Grid - Pinned Column - Checkbox Selection - Cell - Renderers - Updating Data -
-
-
-
-
-
-
- ); - } -} diff --git a/src-examples/richGridExample/RowDataFactory.js b/src-examples/richGridExample/RowDataFactory.js deleted file mode 100644 index 27ff58e..0000000 --- a/src-examples/richGridExample/RowDataFactory.js +++ /dev/null @@ -1,45 +0,0 @@ -import RefData from './RefData'; - -export default class RowDataFactory { - - createRowData() { - const rowData = []; - - for (let i = 0; i < 200; i++) { - const countryData = RefData.COUNTRIES[i % RefData.COUNTRIES.length]; - rowData.push({ - name: RefData.FIRST_NAMES[i % RefData.FIRST_NAMES.length] + ' ' + RefData.LAST_NAMES[i % RefData.LAST_NAMES.length], - skills: { - android: Math.random() < 0.4, - html5: Math.random() < 0.4, - mac: Math.random() < 0.4, - windows: Math.random() < 0.4, - css: Math.random() < 0.4 - }, - dob: RefData.DOB[i % RefData.DOB.length], - address: RefData.ADDRESSES[i % RefData.ADDRESSES.length], - years: Math.round(Math.random() * 100), - proficiency: Math.round(Math.random() * 100), - country: countryData.country, - continent: countryData.continent, - language: countryData.language, - mobile: this.createRandomPhoneNumber(), - landline: this.createRandomPhoneNumber() - }); - } - - return rowData; - } - - createRandomPhoneNumber() { - let result = '+'; - for (let i = 0; i < 12; i++) { - result += Math.round(Math.random() * 10); - if (i === 2 || i === 5 || i === 8) { - result += ' '; - } - } - return result; - } - -} \ No newline at end of file diff --git a/src-examples/richGridExample/SkillsCellRenderer.jsx b/src-examples/richGridExample/SkillsCellRenderer.jsx deleted file mode 100644 index 7c22d51..0000000 --- a/src-examples/richGridExample/SkillsCellRenderer.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import * as PropTypes from 'prop-types'; -import RefData from './RefData'; - -export default class SkillsCellRenderer extends React.Component { - - render() { - const skills = []; - const rowData = this.props.data; - RefData.IT_SKILLS.forEach((skill) => { - if (rowData && rowData.skills && rowData.skills[skill]) { - skills.push(); - } - }); - - return {skills}; - } - -} - -// 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. -SkillsCellRenderer.propTypes = { - params: PropTypes.object -}; \ No newline at end of file diff --git a/src-examples/richGridExample/SkillsFilter.jsx b/src-examples/richGridExample/SkillsFilter.jsx deleted file mode 100644 index cb44c89..0000000 --- a/src-examples/richGridExample/SkillsFilter.jsx +++ /dev/null @@ -1,126 +0,0 @@ -import React from 'react'; -import RefData from './RefData'; - -// the skills filter component. this can be laid out much better in a 'React' -// way. there are design patterns you can apply to layout out your React classes. -// however, i'm not worried, as the intention here is to show you ag-Grid -// working with React, and that's all. i'm not looking for any awards for my -// React design skills. -export default class SkillsFilter extends React.Component { - - constructor(props) { - super(props); - this.state = { - android: false, - css: false, - html5: false, - mac: false, - windows: false - }; - } - - getModel() { - return { - android: this.state.android, - css: this.state.css, - html5: this.state.html5, - mac: this.state.mac, - windows: this.state.windows - } - } - - setModel(model) { - this.setState({ - android: model ? model.android : null, - css: model ? model.css : null, - html5: model ? model.html5 : null, - mac: model ? model.mac : null, - windows: model ? model.windows : null - }); - } - - // called by agGrid - doesFilterPass(params) { - - const rowSkills = params.data.skills; - let passed = true; - - RefData.IT_SKILLS.forEach((skill) => { - if (this.state[skill]) { - if (!rowSkills[skill]) { - passed = false; - } - } - }); - - return passed; - }; - - getModel() { - return '' - } - - // called by agGrid - isFilterActive() { - const somethingSelected = this.state.android || this.state.css || - this.state.html5 || this.state.mac || this.state.windows; - return somethingSelected; - }; - - onSkillChanged(skill, event) { - const newValue = event.target.checked; - const newModel = {}; - newModel[skill] = newValue; - // set the state, and once it is done, then call filterChangedCallback - this.setState(newModel, this.props.filterChangedCallback); - } - - helloFromSkillsFilter() { - alert("Hello From The Skills Filter!"); - } - - render() { - - const skillsTemplates = []; - RefData.IT_SKILLS.forEach((skill, index) => { - - const skillName = RefData.IT_SKILLS_NAMES[index]; - const template = ( - - ); - - skillsTemplates.push(template); - }); - - return ( -
-
- Custom Skills Filter -
- {skillsTemplates} -
- ); - } - - // these are other method that agGrid calls that we - // could of implemented, but they are optional and - // we have no use for them in this particular filter. - //afterGuiAttached(params) {} - //onNewRowsLoaded() {} - //onAnyFilterChanged() {} -} diff --git a/src-examples/richGridExample/SortableHeaderComponent.jsx b/src-examples/richGridExample/SortableHeaderComponent.jsx deleted file mode 100644 index fe88a5a..0000000 --- a/src-examples/richGridExample/SortableHeaderComponent.jsx +++ /dev/null @@ -1,89 +0,0 @@ -import React from "react"; -import * as PropTypes from "prop-types"; - -// Header component to be used as default for all the columns. -export default class SortableHeaderComponent extends React.Component { - - constructor(props) { - super(props); - - // this.sortChanged = this.onSortChanged.bind(this); - this.props.column.addEventListener('sortChanged', this.onSortChanged); - - //The state of this component contains the current sort state of this column - //The possible values are: 'asc', 'desc' and '' - this.state = { - sorted: '' - } - } - - componentWillUnmount() { - this.props.column.removeEventListener('sortChanged', this.onSortChanged); - } - - 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.enableMenu) { - 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. -SortableHeaderComponent.propTypes = { - params: PropTypes.object -}; \ No newline at end of file diff --git a/src-examples/simpleReduxExample/GridComponent.jsx b/src-examples/simpleReduxExample/GridComponent.jsx deleted file mode 100644 index 91a8da7..0000000 --- a/src-examples/simpleReduxExample/GridComponent.jsx +++ /dev/null @@ -1,102 +0,0 @@ -import React, {Component} from "react"; - -import {AgGridReact} from "ag-grid-react"; -import {connect} from "react-redux"; - -// take this line out if you do not want to use ag-Grid-Enterprise -import "ag-grid-enterprise"; - -import {updateRowSelection} from "./gridDataActions"; - -/* - * This component serves to display the row data (provided by redux) - */ -class GridComponent extends Component { - constructor(props) { - super(props); - - this.state = { - columnDefs: [ - {headerName: 'Symbol', field: 'symbol'}, - {headerName: 'Price', field: 'price'}, - {headerName: 'Group', field: 'group'} - ] - }; - } - - onGridReady = (params) => { - this.gridApi = params.api; - this.columnApi = params.columnApi; - - this.gridApi.sizeColumnsToFit(); - - // set the initial group state - this.setGroupingEnabled(false); - }; - - // on selection publish selected row ids - onSelectionChanged = () => { - let selectedRowNodes = this.gridApi.getSelectedNodes(); - let selectedIds = selectedRowNodes.map((rowNode) => rowNode.id); - - this.props.dispatch(updateRowSelection(selectedIds)); - }; - - setGroupingEnabled = (enabled) => { - if (enabled) { - this.columnApi.addRowGroupColumn('group'); - this.columnApi.setColumnVisible('group', false); - this.columnApi.setColumnVisible('symbol', false); - } else { - this.columnApi.removeRowGroupColumn('group'); - this.columnApi.setColumnVisible('group', true); - this.columnApi.setColumnVisible('symbol', true); - } - }; - - // row data will be provided via redux on this.props.rowData - // we bind to this and using "deltaRowDataMode" the grid will only re-render rows that have changed - // this requires each row to have a uniquely identifying property - in this case the row data "symbol" (see getRowNodeId) - render() { - return ( -
- data.symbol} - - // events - onGridReady={this.onGridReady} - onSelectionChanged={this.onSelectionChanged}> - -
- ) - } -} - -// pull off row data changes -export default connect( - (state) => { - return { - rowData: state.rowData - } - }, - null, - null, - {withRef: true} -)(GridComponent); \ No newline at end of file diff --git a/src-examples/simpleReduxExample/HeaderComponent.jsx b/src-examples/simpleReduxExample/HeaderComponent.jsx deleted file mode 100644 index 3068bb6..0000000 --- a/src-examples/simpleReduxExample/HeaderComponent.jsx +++ /dev/null @@ -1,175 +0,0 @@ -import React, {Component} from "react"; -import {connect} from "react-redux"; -// take this line out if you do not want to use ag-Grid-Enterprise -import "ag-grid-enterprise"; - -import {updateRowData} from "./gridDataActions"; - -/* - * This component serves both to host the demo controls, which in turn will drive row data state changes - */ -class HeaderComponent extends Component { - constructor(props) { - super(props); - - this.state = { - groupingOn: false - } - } - - componentDidMount() { - // provide the initial data to the store (which in turn will populate the grid) - this.props.dispatch(updateRowData(this.createRowData())); - } - - // add five new items to the row data and publish the change - addFiveItems = () => { - let newRowData = this.props.rowData.slice(); - for (let i = 0; i < 5; i++) { - let newItem = this.createItem(); - newRowData.push(newItem); - } - - this.props.dispatch(updateRowData(newRowData)); - }; - - - // remove selected rows from the data set and publish the change - removeSelected = () => { - let newRowData = this.props.rowData.filter((dataItem) => (this.props.rowSelection.indexOf(dataItem.symbol) < 0)); - this.props.dispatch(updateRowData(newRowData)); - }; - - // group data based on selection and publish the change - setSelectedToGroup = (newGroup) => { - let selectedIds = this.props.rowSelection; - let newRowData = this.props.rowData.map((dataItem) => { - let itemSelected = selectedIds.indexOf(dataItem.symbol) >= 0; - if (itemSelected) { - return { - // symbol and price stay the same - symbol: dataItem.symbol, - price: dataItem.price, - // group gets the group - group: newGroup - }; - } else { - return dataItem; - } - }); - - this.props.dispatch(updateRowData(newRowData)); - }; - - // randomly update prices in the row data and publish the change - updatePrices = () => { - let newRowData = []; - this.props.rowData.forEach(function (item) { - newRowData.push({ - // use same symbol as last time, this is the unique id - symbol: item.symbol, - // group also stays the same - group: item.group, - // add random price - price: Math.floor(Math.random() * 100) - }); - }); - - this.props.dispatch(updateRowData(newRowData)); - }; - - setGroupingEnabled = (enabled) => { - this.setState({ - groupingOn: enabled - }); - - // let the parent (and the grid in turn) know about the grouping state change - this.props.setGroupingEnabled(enabled); - - // toggle the grouping buttons visibility - this.setItemVisible('groupingOn', !enabled); - this.setItemVisible('groupingOff', enabled); - }; - - setItemVisible = (id, visible) => { - let element = document.querySelector('#' + id); - element.style.display = visible ? null : 'none'; - }; - - render() { - return ( -
- - - - - - - - - - Group Selected Rows: - - - - -
- ) - } - - // the following methods are for creating dummy row data - createRowData() { - let rowData = []; - - for (let i = 0; i < 14; i++) { - let newItem = this.createItem(); - rowData.push(newItem); - } - - return rowData; - } - - createItem() { - return { - group: 'A', - symbol: this.createUniqueRandomSymbol(), - price: Math.floor(Math.random() * 100) - }; - } - - // creates a unique symbol, eg 'ADG' or 'ZJD' - createUniqueRandomSymbol() { - let symbol; - let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; - - let isUnique = false; - while (!isUnique) { - symbol = ''; - // create symbol - for (let i = 0; i < 3; i++) { - symbol += possible.charAt(Math.floor(Math.random() * possible.length)); - } - // check uniqueness - isUnique = true; - this.props.rowData.forEach(function (oldItem) { - if (oldItem.symbol === symbol) { - isUnique = false; - } - }); - } - - return symbol; - } -} - -// pull off row data and selected row changes -export default connect( - (state) => { - return { - rowData: state.rowData, - rowSelection: state.rowSelection - } - } -)(HeaderComponent); \ No newline at end of file diff --git a/src-examples/simpleReduxExample/SimpleReduxExample.jsx b/src-examples/simpleReduxExample/SimpleReduxExample.jsx deleted file mode 100644 index 4c9f753..0000000 --- a/src-examples/simpleReduxExample/SimpleReduxExample.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import React, {Component} from "react"; -import {Provider} from "react-redux"; -import {createStore} from "redux"; - -// take this line out if you do not want to use ag-Grid-Enterprise -import "ag-grid-enterprise"; - -import HeaderComponent from "./HeaderComponent"; -import GridComponent from "./GridComponent"; - -import gridData from "./gridDataReducer"; - -let store = createStore(gridData); - -/* - * This component serves as a container for both the header and grid components. It's primarily here to act as a container - * for the redux Provider - */ -export default class SimpleReduxExample extends Component { - constructor(props) { - super(props); - - this.setGroupingEnabled = this.setGroupingEnabled.bind(this); - } - - setGroupingEnabled(enabled) { - this.grid.setGroupingEnabled(enabled); - } - - render() { - return ( - -
-

Simple Redux Example using ag-Grid's deltaRowMode

- - { this.grid = grid ? grid.getWrappedInstance() : null }} /> -
- - ) - } -}; diff --git a/src-examples/simpleReduxExample/gridDataActions.jsx b/src-examples/simpleReduxExample/gridDataActions.jsx deleted file mode 100644 index 8768140..0000000 --- a/src-examples/simpleReduxExample/gridDataActions.jsx +++ /dev/null @@ -1,13 +0,0 @@ -export function updateRowData(rowData) { - return { - type: 'ROW_DATA_CHANGED', - rowData - } -} - -export function updateRowSelection(rowSelection) { - return { - type: 'ROW_SELECTION_CHANGED', - rowSelection - } -} \ No newline at end of file diff --git a/src-examples/simpleReduxExample/gridDataReducer.jsx b/src-examples/simpleReduxExample/gridDataReducer.jsx deleted file mode 100644 index 6e7b867..0000000 --- a/src-examples/simpleReduxExample/gridDataReducer.jsx +++ /dev/null @@ -1,16 +0,0 @@ -export default (state = {rowData: [], rowSelection: []}, action) => { - switch (action.type) { - case 'ROW_DATA_CHANGED': - return { - ...state, - rowData: action.rowData, - }; - case 'ROW_SELECTION_CHANGED': - return { - ...state, - rowSelection: action.rowSelection, - }; - default: - return state; - } -}; \ No newline at end of file