diff --git a/package.json b/package.json index c5abfdd..7ebc1e4 100644 --- a/package.json +++ b/package.json @@ -38,15 +38,15 @@ }, "homepage": "http://www.ag-grid.com/", "devDependencies": { - "@babel/core": "7.3.3", - "@babel/plugin-proposal-class-properties": "7.3.3", + "@babel/core": "7.3.4", + "@babel/plugin-proposal-class-properties": "7.3.4", "@babel/plugin-proposal-function-bind": "7.2.0", - "@babel/preset-env": "7.3.1", + "@babel/preset-env": "7.3.4", "@babel/preset-react": "7.0.0", - "@types/react": "^16.8.6", - "@types/react-dom": "^16.8.2", + "@types/react": "16.8.8", + "@types/react-dom": "16.8.2", "babel-loader": "8.0.5", - "css-loader": "2.1.0", + "css-loader": "2.1.1", "file-loader": "3.0.1", "gulp": "3.9.1", "merge2": "1.2.3", @@ -55,10 +55,10 @@ "prop-types": "15.7.2", "rimraf": "2.6.3", "style-loader": "0.23.1", - "typescript": "^3.3.3333", - "webpack": "4.29.5", - "webpack-cli": "3.2.3", - "webpack-dev-server": "3.2.0" + "typescript": "3.3.3333", + "webpack": "4.29.6", + "webpack-cli": "3.3.0", + "webpack-dev-server": "3.2.1" }, "dependencies": { "ag-grid-community": "^20.0.0", @@ -67,8 +67,8 @@ "bootstrap": "4.3.1", "d3": "4.9.1", "lodash": "4.17.11", - "react": "16.8.2", - "react-dom": "16.8.2", + "react": "16.8.4", + "react-dom": "16.8.4", "react-redux": "6.0.1", "react-router-dom": "5.0.0", "redux": "4.0.1" diff --git a/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx b/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx index f0a6c8c..0350d8a 100644 --- a/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx +++ b/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx @@ -16,14 +16,14 @@ import "./RichGridDeclarativeExample.css"; import "ag-grid-enterprise"; export default class RichGridDeclarativeExample extends Component { - - constructor() { - super(); + constructor(props) { + super(props); this.state = { quickFilterText: null, sideBar: false, rowData: new RowDataFactory().createRowData(), + rowCount: null, icons: { columnRemoveFromGroup: '', filter: '', @@ -39,6 +39,8 @@ export default class RichGridDeclarativeExample extends Component { onGridReady = (params) => { this.api = params.api; this.columnApi = params.columnApi; + + this.calculateRowCount(); }; onCellClicked = (event) => { @@ -86,7 +88,18 @@ export default class RichGridDeclarativeExample extends Component { // simply wait for the next tick setTimeout(() => { this.api.onFilterChanged(); - }, 0) + }); + }; + + calculateRowCount = () => { + if (this.api && this.state.rowData) { + const model = this.api.getModel(); + const totalRows = this.state.rowData.length; + const processedRows = model.getRowCount(); + this.setState({ + rowCount: processedRows.toLocaleString() + ' / ' + totalRows.toLocaleString() + }); + } }; static countryCellRenderer(params) { @@ -115,7 +128,7 @@ export default class RichGridDeclarativeExample extends Component {

Rich Grid with Declarative Markup Example

- Employees Skills and Contact Details + Employees Skills and Contact Details: { this.state.rowCount }
@@ -152,15 +165,14 @@ export default class RichGridDeclarativeExample extends Component {
-
+
- + +
-
- +
+ +
@@ -169,6 +181,7 @@ export default class RichGridDeclarativeExample extends Component { onGridReady={this.onGridReady} onRowSelected={this.onRowSelected} onCellClicked={this.onCellClicked} + onModelUpdated={this.calculateRowCount} // binding to simple properties sideBar={this.state.sideBar} @@ -184,7 +197,6 @@ export default class RichGridDeclarativeExample extends Component { // boolean properties will default to true if provided (ie suppressRowClickSelection => suppressRowClickSelection="true") suppressRowClickSelection rowSelection="multiple" - floatingFilter groupHeaders // setting grid wide date component @@ -199,10 +211,7 @@ export default class RichGridDeclarativeExample extends Component { headerComponentParams: { menuIcon: 'fa-bars' } - }} - - reactNext={true} - > + }}> @@ -236,130 +245,6 @@ export default class RichGridDeclarativeExample extends Component {
-
-
-

Rich Grid with Declarative Markup Example

-
-
-
-
This example demonstrates many features of ag-Grid, with Grid and Column Definition - defined declaratively (i.e. with markup).
-

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 Side Bar: Let your users Pivot, - Group - and - Aggregate using the Side Bar

-

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 -
-
-
-
-
-
-
-
-

Side Bar

-

Let your users Pivot, Group and Aggregate using the - Side Bar

- Side Bar -
-
-
-
-
-
-

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/simpleReduxDynamicComponentExample/HeaderComponent.jsx b/src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx index 6c3b80a..49debc9 100644 --- a/src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx +++ b/src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx @@ -25,8 +25,8 @@ class HeaderComponent extends Component { render() { return (
- - + +
) } @@ -82,4 +82,4 @@ export default connect( rowData: state.rowData } } -)(HeaderComponent); \ No newline at end of file +)(HeaderComponent); diff --git a/src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx b/src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx index 45d157d..3ce0ab4 100644 --- a/src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx +++ b/src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx @@ -10,7 +10,7 @@ export default function SimpleReduxHookExample() {

Simple Example using Hooks (with useContext and useReducer)

- +