diff --git a/package.json b/package.json index 7cc0aba..d0fd2b2 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,9 @@ "typescript": "2.3.x" }, "dependencies": { + "ag-grid": "13.1.x", + "ag-grid-enterprise": "13.1.x", + "ag-grid-react": "13.1.x", "bootstrap": "3.3.7", "d3": "4.9.1", "file-loader": "0.11.1", @@ -66,10 +69,8 @@ "react-dom": "15.6.x", "react-dom-factories": "1.0.0", "react-redux": "5.0.x", + "react-router-dom": "4.2.x", "redux": "3.6.x", - "url-search-params-polyfill": "1.2.0", - "ag-grid": "13.1.x", - "ag-grid-enterprise": "13.1.x", - "ag-grid-react": "13.1.x" + "url-search-params-polyfill": "1.2.0" } } diff --git a/src/App.jsx b/src/App.jsx index 7c88682..56913a5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,7 @@ import React, {Component} from "react"; +import {Redirect, Route, Switch} from "react-router-dom"; -import "url-search-params-polyfill"; +import NavItem from "./NavItem"; import DynamicComponentsExample from "./dynamicComponentExample/DynamicComponentsExample"; import RichGridExample from "./richGridExample/RichGridExample"; @@ -15,6 +16,55 @@ import SimpleReduxExample from "./simpleReduxExample/SimpleReduxExample"; import FloatingFilterGridExample from "./floatingFilter/FloatingFilterGridExample"; import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample"; +const SideBar = () => ( +
+ +
+); + +class App extends Component { + render() { + return ( +
+ +
+ + + + + + + + + + + + + + + +
+
+ ) + } +} + +export default App + +/* class App extends Component { constructor(props) { super(props); @@ -106,3 +156,4 @@ class App extends Component { } export default App +*/ diff --git a/src/NavItem.jsx b/src/NavItem.jsx new file mode 100644 index 0000000..975c7aa --- /dev/null +++ b/src/NavItem.jsx @@ -0,0 +1,19 @@ +import React, {PropTypes} from 'react' +import {Route, Link} from 'react-router-dom' + +// for bootstrap li active functionality +export default function NavItem({children, to, exact}) { + return ( + ( +
  • + {children} +
    • + )}/> + ) +} + +NavItem.propTypes = { + to: PropTypes.string.isRequired, + exact: PropTypes.bool, + children: PropTypes.node.isRequired, +}; diff --git a/src/dynamicComponentExample/ChildMessageRenderer.jsx b/src/dynamicComponentExample/ChildMessageRenderer.jsx index f359419..7ba4321 100644 --- a/src/dynamicComponentExample/ChildMessageRenderer.jsx +++ b/src/dynamicComponentExample/ChildMessageRenderer.jsx @@ -13,7 +13,7 @@ export default class ChildMessageRenderer extends Component { render() { return ( - + ); } }; diff --git a/src/dynamicComponentExample/CurrencyRenderer.jsx b/src/dynamicComponentExample/CurrencyRenderer.jsx index 46cd9eb..d44c908 100644 --- a/src/dynamicComponentExample/CurrencyRenderer.jsx +++ b/src/dynamicComponentExample/CurrencyRenderer.jsx @@ -3,15 +3,29 @@ import React, {Component} from "react"; export default class CurrencyRenderer extends Component { constructor(props) { super(props); + + this.state = { + value: props.value + } } 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 ( - {this.formatValueToCurrency('EUR', this.props.value)} + {this.formatValueToCurrency('EUR', this.state.value)} ); } }; diff --git a/src/dynamicComponentExample/DynamicComponentsExample.jsx b/src/dynamicComponentExample/DynamicComponentsExample.jsx index 8817342..fe05c08 100644 --- a/src/dynamicComponentExample/DynamicComponentsExample.jsx +++ b/src/dynamicComponentExample/DynamicComponentsExample.jsx @@ -18,13 +18,13 @@ export default class DynamicComponentsExample extends Component { } }, - rowData: this.createRowData(), + rowData: DynamicComponentsExample.createRowData(), - columnDefs: this.createColumnDefs() + columnDefs: DynamicComponentsExample.createColumnDefs() }; this.onGridReady = this.onGridReady.bind(this); - this.refreshRowData = this.refreshRowData.bind(this); + this.refreshEvenRowsCurrencyData = this.refreshEvenRowsCurrencyData.bind(this); } onGridReady(params) { @@ -34,22 +34,30 @@ export default class DynamicComponentsExample extends Component { this.gridApi.sizeColumnsToFit(); } - onCellValueChanged($event) { - this.gridApi.refreshCells([$event.node],["cube"]); - } - methodFromParent(cell) { alert(`Parent Component Method from ${cell}!`); } - createColumnDefs() { + 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, + editable: true, colId: "square", width: 100 }, @@ -71,7 +79,7 @@ export default class DynamicComponentsExample extends Component { headerName: "Currency", field: "currency", cellRendererFramework: CurrencyRenderer, - colId: "params", + colId: "currency", width: 135 }, { @@ -84,12 +92,7 @@ export default class DynamicComponentsExample extends Component { ]; } - refreshRowData() { - let rowData = this.createRowData(); - this.gridApi.setRowData(rowData); - } - - createRowData() { + static createRowData() { let rowData = []; for (let i = 0; i < 15; i++) { @@ -102,12 +105,13 @@ export default class DynamicComponentsExample extends Component { 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/editorComponentExample/EditorComponentsExample.jsx b/src/editorComponentExample/EditorComponentsExample.jsx index f95287a..d1d99e6 100644 --- a/src/editorComponentExample/EditorComponentsExample.jsx +++ b/src/editorComponentExample/EditorComponentsExample.jsx @@ -10,8 +10,8 @@ export default class EditorComponentsExample extends Component { super(props); this.state = { - rowData: this.createRowData(), - columnDefs: this.createColumnDefs() + rowData: EditorComponentsExample.createRowData(), + columnDefs: EditorComponentsExample.createColumnDefs() }; this.onGridReady = this.onGridReady.bind(this); @@ -24,9 +24,32 @@ export default class EditorComponentsExample extends Component { this.gridApi.sizeColumnsToFit(); } - createColumnDefs() { + static createColumnDefs() { return [ - {headerName: "Name", field: "name", width: 300}, + { + 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", @@ -45,7 +68,7 @@ export default class EditorComponentsExample extends Component { ]; } - createRowData() { + static createRowData() { return [ {name: "Bob", mood: "Happy", number: 10}, {name: "Harry", mood: "Sad", number: 3}, @@ -65,7 +88,7 @@ export default class EditorComponentsExample extends Component { 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/editorComponentExample/NumericEditor.jsx b/src/editorComponentExample/NumericEditor.jsx index 389e2f5..2c8b9e0 100644 --- a/src/editorComponentExample/NumericEditor.jsx +++ b/src/editorComponentExample/NumericEditor.jsx @@ -1,16 +1,19 @@ import React, {Component} from "react"; -import ReactDOM from "react-dom"; export default class MoodEditor extends Component { constructor(props) { super(props); - this.state = { - value: this.props.value - }; - 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 + }; + this.onKeyDown = this.onKeyDown.bind(this); this.handleChange = this.handleChange.bind(this); } @@ -30,10 +33,9 @@ export default class MoodEditor extends Component { focus() { setTimeout(() => { - let container = ReactDOM.findDOMNode(this.refs.input); - if (container) { - container.focus(); - } + this.refs.input.focus(); + this.refs.input.setSelectionRange(this.state.value.length, this.state.value.length); + }) } @@ -52,7 +54,7 @@ export default class MoodEditor extends Component { }; onKeyDown(event) { - if(this.isLeftOrRight(event)) { + if (this.isLeftOrRight(event)) { event.stopPropagation(); return; } @@ -90,6 +92,7 @@ export default class MoodEditor extends Component { ); } diff --git a/src/filterComponentExample/FilterComponentExample.jsx b/src/filterComponentExample/FilterComponentExample.jsx index b83c780..3e7eca4 100644 --- a/src/filterComponentExample/FilterComponentExample.jsx +++ b/src/filterComponentExample/FilterComponentExample.jsx @@ -66,10 +66,10 @@ export default class FilterComponentExample extends Component { render() { return ( -

    Filter Component Example

    - + Filter: +
    Filter:
    ); } }; diff --git a/src/floatingFilter/FloatingFilterGridExample.jsx b/src/floatingFilter/FloatingFilterGridExample.jsx index dd06de7..e5254dd 100644 --- a/src/floatingFilter/FloatingFilterGridExample.jsx +++ b/src/floatingFilter/FloatingFilterGridExample.jsx @@ -44,7 +44,7 @@ export default class FloatingFilterGridExample extends Component { render() { let divStyle = { height: 400, - width: 945 + width: 900 }; // combine the styles diff --git a/src/fullWidthExample/FullWidthComponentExample.jsx b/src/fullWidthExample/FullWidthComponentExample.jsx index 9d165dd..9cbd64b 100644 --- a/src/fullWidthExample/FullWidthComponentExample.jsx +++ b/src/fullWidthExample/FullWidthComponentExample.jsx @@ -68,7 +68,7 @@ export default class FullWidthComponentExample extends Component { render() { return ( -

    Full Width Renderer Example

    Full Width Column! { this.values } +
    Full Width Column! { this.values }
    ); } }; diff --git a/src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx b/src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx index c44f410..ce59185 100644 --- a/src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx +++ b/src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx @@ -106,7 +106,7 @@ export default class GroupedRowInnerRendererComponentExample extends Component { render() { return ( -

    Group Row Renderer Example

    a { + margin-top: 5px + } + + .btn-primary { + margin-right: 5px; + } + button { margin-left: 4px; margin-right: 4px; @@ -68,8 +80,8 @@ .expanded { animation-name: toExpanded; animation-duration: 1s; - -ms-transform: rotate(180deg); /* IE 9 */ - -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ + -ms-transform: rotate(180deg); /* IE 9 */ + -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); } @@ -77,22 +89,22 @@ color: cornflowerblue; animation-name: toCollapsed; animation-duration: 1s; - -ms-transform: rotate(0deg); /* IE 9 */ - -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */ + -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 */ + -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 */ + -ms-transform: rotate(180deg); /* IE 9 */ + -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); } } @@ -100,14 +112,14 @@ @keyframes toCollapsed { from { color: black; - -ms-transform: rotate(180deg); /* IE 9 */ - -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ + -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 */ + -ms-transform: rotate(0deg); /* IE 9 */ + -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */ transform: rotate(0deg); } } diff --git a/src/index.js b/src/index.js index bd1abb6..36350b3 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,7 @@ import React from "react"; import {render} from "react-dom"; +import {BrowserRouter} from "react-router-dom"; import "ag-grid-root/dist/styles/ag-grid.css"; import "ag-grid-root/dist/styles/theme-fresh.css"; @@ -15,7 +16,9 @@ import App from "./App"; document.addEventListener('DOMContentLoaded', () => { render( - , + + + , document.querySelector('#app') ); }); diff --git a/src/masterDetailExample/MasterDetailExample.jsx b/src/masterDetailExample/MasterDetailExample.jsx index 0749875..f6afef1 100644 --- a/src/masterDetailExample/MasterDetailExample.jsx +++ b/src/masterDetailExample/MasterDetailExample.jsx @@ -116,7 +116,7 @@ export default class MasterDetailExample extends Component { render() { return ( -

    Master-Detail Example

    Pinned Row Renderer Example

    Click Me + ); } } \ No newline at end of file diff --git a/src/richComponentExample/RichComponentsExample.jsx b/src/richComponentExample/RichComponentsExample.jsx index 715b113..e066534 100644 --- a/src/richComponentExample/RichComponentsExample.jsx +++ b/src/richComponentExample/RichComponentsExample.jsx @@ -25,7 +25,11 @@ export default class RichComponentsExample extends Component { createColumnDefs() { return [ - {headerName: "Name", field: "name", width: 200}, + { + headerName: "Name", + field: "name", + width: 200 + }, { headerName: "Ratio Component", field: "ratios", @@ -60,8 +64,7 @@ export default class RichComponentsExample extends Component { 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/richGridExample/ColDefFactory.jsx b/src/richGridExample/ColDefFactory.jsx index d74df2d..5d60678 100644 --- a/src/richGridExample/ColDefFactory.jsx +++ b/src/richGridExample/ColDefFactory.jsx @@ -16,6 +16,7 @@ export default class ColDefFactory { checkboxSelection: true, suppressSorting: true, suppressMenu: true, + suppressFilter: true, pinned: true }, { @@ -32,7 +33,8 @@ export default class ColDefFactory { editable: true, // use a React cellEditor cellEditorFramework: NameCellEditor - }, { + }, + { headerName: "Country", field: "country", width: 150, @@ -44,9 +46,9 @@ export default class ColDefFactory { filterParams: { cellRenderer: countryCellRenderer, cellHeight: 20 - }, - columnGroupShow: 'open' - }, { + } + }, + { headerName: "DOB", field: "dob", width: 110, diff --git a/src/richGridExample/ProficiencyFilter.jsx b/src/richGridExample/ProficiencyFilter.jsx index 3da73e2..c52afb7 100644 --- a/src/richGridExample/ProficiencyFilter.jsx +++ b/src/richGridExample/ProficiencyFilter.jsx @@ -37,6 +37,10 @@ export default class ProficiencyFilter extends React.Component { this.setState(newState, this.props.filterChangedCallback); } + getModel() { + return '' + } + render() { var rows = []; PROFICIENCY_NAMES.forEach( (name)=> { diff --git a/src/richGridExample/RichGridExample.jsx b/src/richGridExample/RichGridExample.jsx index e913f2c..3f2660a 100644 --- a/src/richGridExample/RichGridExample.jsx +++ b/src/richGridExample/RichGridExample.jsx @@ -16,7 +16,6 @@ export default class RichGridExample extends Component { this.state = { quickFilterText: null, - showGrid: true, showToolPanel: false, columnDefs: new ColDefFactory().createColDefs(), rowData: new RowDataFactory().createRowData(), @@ -28,10 +27,7 @@ export default class RichGridExample extends Component { groupExpanded: '', groupContracted: '', columnGroupOpened: '', - columnGroupClosed: '', - checkboxChecked: '', - checkboxUnchecked: '', - checkboxIndeterminate: '' + columnGroupClosed: '' } }; @@ -55,7 +51,8 @@ export default class RichGridExample extends Component { } }, // this is a simple property - rowBuffer: 10 // no need to set this, the default is fine for almost all scenarios + rowBuffer: 10, // no need to set this, the default is fine for almost all scenarios, + floatingFilter: true }; this.onGridReady = this.onGridReady.bind(this); @@ -63,12 +60,6 @@ export default class RichGridExample extends Component { this.onCellClicked = this.onCellClicked.bind(this); } - onShowGrid(show) { - this.setState({ - showGrid: show - }); - } - onToggleToolPanel(event) { this.setState({showToolPanel: event.target.checked}); } @@ -125,109 +116,214 @@ export default class RichGridExample extends Component { } render() { - let gridTemplate; - let bottomHeaderTemplate; - let topHeaderTemplate; - - topHeaderTemplate = ( -
    -
    - - - + return ( +
    +

    Rich Grid Example

    +
    +
    + Employees Skills and Contact Details +
    -
    - Employees Skills and Contact Details +
    +
    + + Grid API: + + + + + Column API: + + + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + Filter API: + + +
    +
    +
    + +
    +
    +
    +

    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 +
    +
    +
    +
    +
    ); - - // showing the bottom header and grid is optional, so we put in a switch - if (this.state.showGrid) { - bottomHeaderTemplate = ( -
    -
    - - Grid API: - {/* use ref to access the api in selectAll */} - - - - - Column API: - - - -
    -
    -
    - - - - - - Filter API: - - - -
    -
    -
    - ); - gridTemplate = ( -
    - -
    - ); - } - - return
    -
    - {topHeaderTemplate} - {bottomHeaderTemplate} - {gridTemplate} -
    -
    ; } - } diff --git a/src/richGridExample/SkillsFilter.jsx b/src/richGridExample/SkillsFilter.jsx index 55e4ca4..d61eb14 100644 --- a/src/richGridExample/SkillsFilter.jsx +++ b/src/richGridExample/SkillsFilter.jsx @@ -45,7 +45,7 @@ export default class SkillsFilter extends React.Component { var rowSkills = params.data.skills; var passed = true; - RefData.IT_SKILLS.forEach( (skill) => { + RefData.IT_SKILLS.forEach((skill) => { if (this.state[skill]) { if (!rowSkills[skill]) { passed = false; @@ -56,6 +56,10 @@ export default class SkillsFilter extends React.Component { return passed; }; + getModel() { + return '' + } + // called by agGrid isFilterActive() { var somethingSelected = this.state.android || this.state.css || @@ -68,7 +72,7 @@ export default class SkillsFilter extends React.Component { var newModel = {}; newModel[skill] = newValue; // set the state, and once it is done, then call filterChangedCallback - this.setState(newModel, this.props.filterChangedCallback ); + this.setState(newModel, this.props.filterChangedCallback); } helloFromSkillsFilter() { @@ -78,16 +82,17 @@ export default class SkillsFilter extends React.Component { render() { var skillsTemplates = []; - RefData.IT_SKILLS.forEach( (skill, index) => { + RefData.IT_SKILLS.forEach((skill, index) => { var skillName = RefData.IT_SKILLS_NAMES[index]; var template = ( -