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 {
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
-Utilise Grid Features Programmatically Using the APIs - Available
- Grid API - Column API -Customer the Header with React Components
- Header Component - Header Group Component -Filter with Quick Filters, Floating Filters, Built In - Filters - or Using the - Filter API
- Quick - Filter - Floating Filters - Built in - Filters - Filter API -Pinned Columns, Checkbox Selection, Customer Renderers, - Data - Updates
- React with ag-Grid - Pinned Column - Checkbox Selection - Cell - Renderers - Updating Data -