├── 01-getting-started ├── README.md └── react-gs │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── serviceWorker.js │ └── yarn.lock ├── 02-data ├── README.md ├── finished-code │ ├── aggr-data │ │ ├── .gitignore │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── data │ │ │ ├── data.json │ │ │ ├── generate-data │ │ │ ├── generate.js │ │ │ └── routes.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.js │ │ │ ├── NameFieldComponent.js │ │ │ ├── index.css │ │ │ └── index.js │ │ └── yarn.lock │ ├── aggr-infinite │ │ ├── .gitignore │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── loading.gif │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.js │ │ │ ├── index.css │ │ │ └── index.js │ │ └── yarn.lock │ └── aggr-redux │ │ ├── .gitignore │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ ├── src │ │ ├── FileView.js │ │ ├── actions │ │ │ └── fileActions.js │ │ ├── index.css │ │ ├── index.js │ │ ├── middleware │ │ │ └── logger.js │ │ ├── reducers │ │ │ └── fileReducer.js │ │ ├── store.js │ │ └── types │ │ │ └── fileTypes.js │ │ └── yarn.lock └── starting-points │ ├── aggr-data │ ├── .gitignore │ ├── .prettierrc │ ├── README.md │ ├── data │ │ ├── data.json │ │ ├── generate-data │ │ ├── generate.js │ │ └── routes.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.js │ │ ├── index.css │ │ └── index.js │ └── yarn.lock │ ├── aggr-infinite │ ├── .gitignore │ ├── .prettierrc │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── loading.gif │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.js │ │ ├── index.css │ │ └── index.js │ └── yarn.lock │ └── aggr-redux │ ├── .gitignore │ ├── .prettierrc │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── FileView.js │ ├── actions │ │ └── fileActions.js │ ├── index.css │ ├── index.js │ ├── middleware │ │ └── logger.js │ ├── reducers │ │ └── fileReducer.js │ ├── store.js │ └── types │ │ └── fileTypes.js │ └── yarn.lock ├── 03-columns ├── README.md ├── finished-code │ ├── aggr-column-span │ │ ├── .gitignore │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── loading.gif │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.js │ │ │ ├── index.css │ │ │ └── index.js │ │ └── yarn.lock │ ├── aggr-column-state │ │ ├── .gitignore │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.js │ │ │ ├── actions │ │ │ │ └── columnActions.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── middleware │ │ │ │ └── logger.js │ │ │ ├── reducers │ │ │ │ └── columnReducer.js │ │ │ ├── store.js │ │ │ └── types │ │ │ │ └── columnTypes.js │ │ └── yarn.lock │ └── aggr-columns │ │ ├── .gitignore │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── data │ │ ├── data.json │ │ ├── generate-data │ │ ├── generate.js │ │ └── routes.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ ├── src │ │ ├── App.js │ │ ├── index.css │ │ └── index.js │ │ └── yarn.lock └── starting-points │ ├── aggr-column-span │ ├── .gitignore │ ├── .prettierrc │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── loading.gif │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.js │ │ ├── index.css │ │ └── index.js │ └── yarn.lock │ ├── aggr-column-state │ ├── .gitignore │ ├── .prettierrc │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.js │ │ ├── actions │ │ │ └── columnActions.js │ │ ├── index.css │ │ ├── index.js │ │ ├── middleware │ │ │ └── logger.js │ │ ├── reducers │ │ │ └── columnReducer.js │ │ ├── store.js │ │ └── types │ │ │ └── columnTypes.js │ └── yarn.lock │ └── aggr-columns │ ├── .gitignore │ ├── .prettierrc │ ├── README.md │ ├── data │ ├── data.json │ ├── generate-data │ ├── generate.js │ └── routes.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.js │ ├── index.css │ └── index.js │ └── yarn.lock ├── 04-filters ├── README.md ├── finished-code │ └── aggr-filters │ │ ├── .gitignore │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── data │ │ ├── data.json │ │ ├── generate-data │ │ ├── generate.js │ │ └── routes.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.js │ │ ├── index.css │ │ └── index.js └── starting-points │ └── aggr-filters │ ├── .gitignore │ ├── .prettierrc │ ├── README.md │ ├── data │ ├── data.json │ ├── generate-data │ ├── generate.js │ └── routes.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── index.css │ └── index.js ├── 05-rows ├── README.md ├── finished-code │ └── aggr-rows │ │ ├── .gitignore │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── data │ │ ├── data.json │ │ ├── generate-data │ │ ├── generate.js │ │ └── routes.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.js │ │ ├── index.css │ │ └── index.js └── starting-points │ └── aggr-rows │ ├── .gitignore │ ├── .prettierrc │ ├── README.md │ ├── data │ ├── data.json │ ├── generate-data │ ├── generate.js │ └── routes.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── index.css │ └── index.js ├── 06-styling ├── README.md ├── finished-code │ └── aggr-styling │ │ ├── .gitignore │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── data │ │ ├── data.json │ │ ├── generate-data │ │ ├── generate.js │ │ └── routes.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.js │ │ ├── index.css │ │ └── index.js └── starting-points │ └── aggr-styling │ ├── .gitignore │ ├── .prettierrc │ ├── README.md │ ├── data │ ├── data.json │ ├── generate-data │ ├── generate.js │ └── routes.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── index.css │ └── index.js ├── 07-selection ├── README.md ├── finished-code │ └── aggr-selection │ │ ├── .gitignore │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── data │ │ ├── data.json │ │ ├── generate-data │ │ ├── generate.js │ │ └── routes.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.js │ │ ├── index.css │ │ └── index.js └── starting-points │ └── aggr-selection │ ├── .gitignore │ ├── .prettierrc │ ├── README.md │ ├── data │ ├── data.json │ ├── generate-data │ ├── generate.js │ └── routes.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── index.css │ └── index.js ├── 08-cell-editing ├── README.md ├── finished-code │ └── aggr-cell-editing │ │ ├── .gitignore │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── data │ │ ├── data.json │ │ ├── generate-data │ │ ├── generate.js │ │ └── routes.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.js │ │ ├── NumericCellEditor.js │ │ ├── helpers.js │ │ ├── index.css │ │ └── index.js └── starting-points │ └── aggr-cell-editing │ ├── .gitignore │ ├── .prettierrc │ ├── README.md │ ├── data │ ├── data.json │ ├── generate-data │ ├── generate.js │ └── routes.json │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── helpers.js │ ├── index.css │ └── index.js └── README.md /01-getting-started/README.md: -------------------------------------------------------------------------------- 1 | # 01 - Getting Started with ag-Grid Community & React 2 | The goal of this first tutorial is to get you up and running as fast as possible with ag-Grid Community. You'll find the finished sample code for this tutorial in the `react-gs` folder. 3 | 4 | As always, feel free to [reach out to me on Twitter](https://twitter.com/samjulien) if you need anything! 5 | 6 | ## Helpful Links 7 | - [ag-Grid Site](https://www.ag-grid.com/) 8 | - [ag-Grid Docs](https://www.ag-grid.com/documentation-main/documentation.php) 9 | - [ag-Grid: Getting Started with React](https://www.ag-grid.com/react-grid/) -------------------------------------------------------------------------------- /01-getting-started/react-gs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /01-getting-started/react-gs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-gs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "ag-grid-community": "^22.0.0", 7 | "ag-grid-react": "^22.0.0", 8 | "react": "^16.10.2", 9 | "react-dom": "^16.10.2", 10 | "react-scripts": "3.2.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": { 22 | "production": [ 23 | ">0.2%", 24 | "not dead", 25 | "not op_mini all" 26 | ], 27 | "development": [ 28 | "last 1 chrome version", 29 | "last 1 firefox version", 30 | "last 1 safari version" 31 | ] 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /01-getting-started/react-gs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/01-getting-started/react-gs/public/favicon.ico -------------------------------------------------------------------------------- /01-getting-started/react-gs/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /01-getting-started/react-gs/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/01-getting-started/react-gs/public/logo192.png -------------------------------------------------------------------------------- /01-getting-started/react-gs/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/01-getting-started/react-gs/public/logo512.png -------------------------------------------------------------------------------- /01-getting-started/react-gs/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /01-getting-started/react-gs/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /01-getting-started/react-gs/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | } 8 | 9 | .App-header { 10 | background-color: #282c34; 11 | min-height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | font-size: calc(10px + 2vmin); 17 | color: white; 18 | } 19 | 20 | .App-link { 21 | color: #09d3ac; 22 | } 23 | -------------------------------------------------------------------------------- /01-getting-started/react-gs/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /01-getting-started/react-gs/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /01-getting-started/react-gs/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /02-data/README.md: -------------------------------------------------------------------------------- 1 | # 02 - Working with Data 2 | This tutorial is all about working with data in ag-Grid. I've broken the examples into 3 different sample projects. Each one has a `starting-point` repo and a `finished-code` repo. 3 | 4 | - Use the `aggr-data` starting point and finished code for the videos on value getters, basic cell renderers, and framework component cell renderers. 5 | - Use the `aggr-infinite` starting point and finished code for the video on the infinite row model. 6 | - Use the `aggr-redux` starting point and finished code for the videos on setting up and updating ag-Grid with Redux. 7 | 8 | ## Helpful Links 9 | - [ag-Grid Docs: Value Getters](https://www.ag-grid.com/javascript-grid-value-getters/) 10 | - [ag-Grid Docs: Value Cache](https://www.ag-grid.com/javascript-grid-value-getters/#value-cache) 11 | - [ag-Grid Docs: Cell Renderering](https://www.ag-grid.com/javascript-grid-cell-rendering/) 12 | - [ag-Grid Docs: React Cell Rendering](https://www.ag-grid.com/javascript-grid-cell-rendering-components/#react-cell-rendering) 13 | - [ag-Grid Docs: Registering Framework Components](https://www.ag-grid.com/javascript-grid-components/#registering-framework-components) 14 | - [ag-Grid Docs: Infinite Row Model](https://www.ag-grid.com/javascript-grid-infinite-scrolling/) 15 | - [ag-Grid Docs: Redux Integration](https://www.ag-grid.com/react-redux-integration-pt1/) 16 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-data/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-data/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /02-data/finished-code/aggr-data/data/generate-data: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | const DATA_PATH = path.resolve(__dirname, './data.json'); 7 | 8 | async function generate() { 9 | const data = require('./generate.js')(); 10 | await new Promise((resolve, reject) => { 11 | fs.writeFile(DATA_PATH, JSON.stringify(data), error => { 12 | if (error) { 13 | reject(error); 14 | return; 15 | } 16 | resolve(); 17 | }); 18 | }); 19 | } 20 | 21 | module.exports = generate; 22 | 23 | if (require.main === module) { 24 | function main() { 25 | generate().then(() => process.exit(0)); 26 | } 27 | 28 | main(); 29 | } 30 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-data/data/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1" 3 | } 4 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-data/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "~22.1.0", 10 | "ag-grid-react": "~22.1.0", 11 | "concurrently": "^5.0.0", 12 | "json-server": "^0.15.1", 13 | "react": "^16.12.0", 14 | "react-dom": "^16.12.0", 15 | "react-scripts": "3.3.0" 16 | }, 17 | "scripts": { 18 | "start": "concurrently --prefix-colors white.bgBlue,white.bgGreen --names react,json-server --kill-others \"npm run serve:client\" \"npm run serve:server\"", 19 | "serve:client": "react-scripts start", 20 | "serve:server": "json-server --watch data/data.json --routes data/routes.json --port 3001", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "generate": "node ./data/generate-data" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "faker": "^4.1.0" 43 | }, 44 | "proxy": "http://localhost:3001" 45 | } 46 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-data/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/finished-code/aggr-data/public/favicon.ico -------------------------------------------------------------------------------- /02-data/finished-code/aggr-data/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-data/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/finished-code/aggr-data/public/logo192.png -------------------------------------------------------------------------------- /02-data/finished-code/aggr-data/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/finished-code/aggr-data/public/logo512.png -------------------------------------------------------------------------------- /02-data/finished-code/aggr-data/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-data/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-data/src/NameFieldComponent.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | export default class NameFieldComponent extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.value = this.props.value; 7 | this.rowIndex = this.props.rowIndex; 8 | this.id = this.props.data.id; 9 | this.api = props.api; 10 | this.state = { 11 | flaggedForReview: false 12 | }; 13 | } 14 | 15 | flag = () => { 16 | alert(`${this.value} is flagged for review! (id: ${this.id})`); 17 | this.setState({ flaggedForReview: true }); 18 | }; 19 | 20 | render() { 21 | return ( 22 |
23 | 24 | {this.value}! 25 | 26 | 34 |
35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-data/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-data/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /02-data/finished-code/aggr-infinite/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-infinite/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /02-data/finished-code/aggr-infinite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-infinite", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.1", 10 | "ag-grid-react": "^22.1.1", 11 | "react": "^16.12.0", 12 | "react-dom": "^16.12.0", 13 | "react-scripts": "3.3.0" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-infinite/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/finished-code/aggr-infinite/public/favicon.ico -------------------------------------------------------------------------------- /02-data/finished-code/aggr-infinite/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-infinite/public/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/finished-code/aggr-infinite/public/loading.gif -------------------------------------------------------------------------------- /02-data/finished-code/aggr-infinite/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/finished-code/aggr-infinite/public/logo192.png -------------------------------------------------------------------------------- /02-data/finished-code/aggr-infinite/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/finished-code/aggr-infinite/public/logo512.png -------------------------------------------------------------------------------- /02-data/finished-code/aggr-infinite/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-infinite/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-infinite/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-infinite/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-redux", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.1", 10 | "ag-grid-react": "^22.1.1", 11 | "react": "^16.12.0", 12 | "react-dom": "^16.12.0", 13 | "react-redux": "^7.1.3", 14 | "react-scripts": "3.3.0", 15 | "redux": "^4.0.4" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": "react-app" 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/finished-code/aggr-redux/public/favicon.ico -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | ag-Grid Redux 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/finished-code/aggr-redux/public/logo192.png -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/finished-code/aggr-redux/public/logo512.png -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/src/actions/fileActions.js: -------------------------------------------------------------------------------- 1 | import { types } from "../types/fileTypes"; 2 | 3 | export const actions = { 4 | newFile(file) { 5 | return { 6 | type: types.NEW_FILE, 7 | payload: { file } 8 | }; 9 | }, 10 | deleteFiles(ids) { 11 | return { 12 | type: types.DELETE_FILE, 13 | payload: { ids } 14 | }; 15 | }, 16 | addSize() { 17 | return { 18 | type: types.ADD_SIZE 19 | }; 20 | }, 21 | randomSize() { 22 | return { 23 | type: types.RANDOMIZE_SIZE 24 | }; 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | 15 | .btn-padding { 16 | padding-bottom: 15px; 17 | } -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import {Provider} from 'react-redux'; 4 | 5 | import store from './store'; 6 | import FileView from './FileView'; 7 | import './index.css'; 8 | 9 | const rootDiv = document.getElementById('root'); 10 | 11 | const comp = 12 |
13 |
14 |
15 | 16 | 17 | 18 |
; 19 | 20 | ReactDOM.render(comp, rootDiv); 21 | 22 | -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/src/middleware/logger.js: -------------------------------------------------------------------------------- 1 | const logger = store => next => action => { 2 | console.group(action.type); 3 | console.log('dispatching: ', action); 4 | console.log('prev state: ', store.getState()); 5 | const result = next(action); 6 | console.log('next state: ', store.getState()); 7 | console.groupEnd(action.type); 8 | return result; 9 | }; 10 | 11 | export default logger; -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/src/store.js: -------------------------------------------------------------------------------- 1 | import {createStore, applyMiddleware} from 'redux'; 2 | 3 | import fileReducer from './reducers/fileReducer'; 4 | import logger from "./middleware/logger"; 5 | 6 | const initialState = { 7 | files: [ 8 | {id: 1, file: 'notes.txt', size: 14.7}, 9 | {id: 2, file: 'book.pdf', size: 2.1}, 10 | {id: 3, file: 'cv.pdf', size: 2.4}, 11 | {id: 4, file: 'xyz.txt', size: 1.1}, 12 | {id: 5, file: 'theme.mp3', size: 14.3}, 13 | {id: 6, file: 'rock.mp3', size: 80.3}, 14 | {id: 7, file: 'jazz.mp3', size: 90.5}, 15 | {id: 8, file: 'abc.txt', size: 4.3}, 16 | ] 17 | }; 18 | 19 | export default createStore(fileReducer, initialState, applyMiddleware(logger)); -------------------------------------------------------------------------------- /02-data/finished-code/aggr-redux/src/types/fileTypes.js: -------------------------------------------------------------------------------- 1 | export const types = { 2 | NEW_FILE: "NEW_FILE", 3 | DELETE_FILE: "DELETE_FILES", 4 | ADD_SIZE: "ADD_SIZE", 5 | RANDOMIZE_SIZE: "RANDOMIZE_SIZE" 6 | }; 7 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-data/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-data/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /02-data/starting-points/aggr-data/data/generate-data: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | const DATA_PATH = path.resolve(__dirname, './data.json'); 7 | 8 | async function generate() { 9 | const data = require('./generate.js')(); 10 | await new Promise((resolve, reject) => { 11 | fs.writeFile(DATA_PATH, JSON.stringify(data), error => { 12 | if (error) { 13 | reject(error); 14 | return; 15 | } 16 | resolve(); 17 | }); 18 | }); 19 | } 20 | 21 | module.exports = generate; 22 | 23 | if (require.main === module) { 24 | function main() { 25 | generate().then(() => process.exit(0)); 26 | } 27 | 28 | main(); 29 | } 30 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-data/data/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1" 3 | } 4 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-data/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "~22.1.0", 10 | "ag-grid-react": "~22.1.0", 11 | "concurrently": "^5.0.0", 12 | "json-server": "^0.15.1", 13 | "react": "^16.12.0", 14 | "react-dom": "^16.12.0", 15 | "react-scripts": "3.3.0" 16 | }, 17 | "scripts": { 18 | "start": "concurrently --prefix-colors white.bgBlue,white.bgGreen --names react,json-server --kill-others \"npm run serve:client\" \"npm run serve:server\"", 19 | "serve:client": "react-scripts start", 20 | "serve:server": "json-server --watch data/data.json --routes data/routes.json --port 3001", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "generate": "node ./data/generate-data" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "faker": "^4.1.0" 43 | }, 44 | "proxy": "http://localhost:3001" 45 | } 46 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-data/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/starting-points/aggr-data/public/favicon.ico -------------------------------------------------------------------------------- /02-data/starting-points/aggr-data/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-data/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/starting-points/aggr-data/public/logo192.png -------------------------------------------------------------------------------- /02-data/starting-points/aggr-data/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/starting-points/aggr-data/public/logo512.png -------------------------------------------------------------------------------- /02-data/starting-points/aggr-data/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-data/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-data/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { AgGridReact } from "ag-grid-react"; 3 | import "ag-grid-community/dist/styles/ag-grid.css"; 4 | import "ag-grid-community/dist/styles/ag-theme-balham.css"; 5 | 6 | class App extends Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | modelVisibility: true, 11 | columnDefs: [ 12 | { headerName: "Name", field: "name" }, 13 | { headerName: "Street", field: "address.street1" }, 14 | { headerName: "City", field: "address.city" } 15 | ], 16 | defaultColDef: { 17 | resizable: true, 18 | sortable: true, 19 | filter: true 20 | }, 21 | rowData: [] 22 | }; 23 | } 24 | 25 | componentDidMount() { 26 | fetch("/api/customers") 27 | .then(result => result.json()) 28 | .then(rowData => this.setState({ rowData })); 29 | } 30 | 31 | onGridReady = params => { 32 | this.gridApi = params.api; 33 | this.columnApi = params.columnApi; 34 | this.gridApi.sizeColumnsToFit(); 35 | }; 36 | 37 | render() { 38 | return ( 39 |
40 | 46 |
47 | ); 48 | } 49 | } 50 | 51 | export default App; 52 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-data/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-data/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /02-data/starting-points/aggr-infinite/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-infinite/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /02-data/starting-points/aggr-infinite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-infinite", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.1", 10 | "ag-grid-react": "^22.1.1", 11 | "react": "^16.12.0", 12 | "react-dom": "^16.12.0", 13 | "react-scripts": "3.3.0" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-infinite/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/starting-points/aggr-infinite/public/favicon.ico -------------------------------------------------------------------------------- /02-data/starting-points/aggr-infinite/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-infinite/public/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/starting-points/aggr-infinite/public/loading.gif -------------------------------------------------------------------------------- /02-data/starting-points/aggr-infinite/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/starting-points/aggr-infinite/public/logo192.png -------------------------------------------------------------------------------- /02-data/starting-points/aggr-infinite/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/starting-points/aggr-infinite/public/logo512.png -------------------------------------------------------------------------------- /02-data/starting-points/aggr-infinite/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-infinite/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-infinite/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-infinite/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-redux", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.1", 10 | "ag-grid-react": "^22.1.1", 11 | "react": "^16.12.0", 12 | "react-dom": "^16.12.0", 13 | "react-redux": "^7.1.3", 14 | "react-scripts": "3.3.0", 15 | "redux": "^4.0.4" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": "react-app" 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/starting-points/aggr-redux/public/favicon.ico -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | ag-Grid Redux 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/starting-points/aggr-redux/public/logo192.png -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/02-data/starting-points/aggr-redux/public/logo512.png -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/src/FileView.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { AgGridReact } from "ag-grid-react"; 3 | 4 | import "ag-grid-community/dist/styles/ag-grid.css"; 5 | import "ag-grid-community/dist/styles/ag-theme-balham.css"; 6 | 7 | class FileView extends Component { 8 | colDefs = [ 9 | { field: "id", checkboxSelection: true, filter: "agNumberColumnFilter" }, 10 | { field: "file", filter: "agTextColumnFilter" }, 11 | { field: "size", filter: "agNumberColumnFilter" } 12 | ]; 13 | defaultColDef = { sortable: true }; 14 | 15 | onGridReady = params => { 16 | this.gridApi = params.api; 17 | this.gridColumnApi = params.columnApi; 18 | }; 19 | 20 | render() { 21 | return ( 22 |
23 | params.api.sizeColumnsToFit()} 29 | > 30 |
31 | ); 32 | } 33 | } 34 | 35 | export default FileView; 36 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/src/actions/fileActions.js: -------------------------------------------------------------------------------- 1 | import { types } from "../types/fileTypes"; 2 | 3 | export const actions = { 4 | newFile(file) { 5 | return { 6 | type: types.NEW_FILE, 7 | payload: { file } 8 | }; 9 | }, 10 | deleteFiles(ids) { 11 | return { 12 | type: types.DELETE_FILE, 13 | payload: { ids } 14 | }; 15 | }, 16 | addSize() { 17 | return { 18 | type: types.ADD_SIZE 19 | }; 20 | }, 21 | randomSize() { 22 | return { 23 | type: types.RANDOMIZE_SIZE 24 | }; 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | 15 | .btn-padding { 16 | padding-bottom: 15px; 17 | } -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import {Provider} from 'react-redux'; 4 | 5 | import store from './store'; 6 | import FileView from './FileView'; 7 | import './index.css'; 8 | 9 | const rootDiv = document.getElementById('root'); 10 | 11 | const comp = 12 |
13 |
14 |
15 | 16 | 17 | 18 |
; 19 | 20 | ReactDOM.render(comp, rootDiv); 21 | 22 | -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/src/middleware/logger.js: -------------------------------------------------------------------------------- 1 | const logger = store => next => action => { 2 | console.group(action.type); 3 | console.log('dispatching: ', action); 4 | console.log('prev state: ', store.getState()); 5 | const result = next(action); 6 | console.log('next state: ', store.getState()); 7 | console.groupEnd(action.type); 8 | return result; 9 | }; 10 | 11 | export default logger; -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/src/store.js: -------------------------------------------------------------------------------- 1 | import {createStore, applyMiddleware} from 'redux'; 2 | 3 | import fileReducer from './reducers/fileReducer'; 4 | import logger from "./middleware/logger"; 5 | 6 | const initialState = { 7 | files: [ 8 | {id: 1, file: 'notes.txt', size: 14.7}, 9 | {id: 2, file: 'book.pdf', size: 2.1}, 10 | {id: 3, file: 'cv.pdf', size: 2.4}, 11 | {id: 4, file: 'xyz.txt', size: 1.1}, 12 | {id: 5, file: 'theme.mp3', size: 14.3}, 13 | {id: 6, file: 'rock.mp3', size: 80.3}, 14 | {id: 7, file: 'jazz.mp3', size: 90.5}, 15 | {id: 8, file: 'abc.txt', size: 4.3}, 16 | ] 17 | }; 18 | 19 | export default createStore(fileReducer, initialState, applyMiddleware(logger)); -------------------------------------------------------------------------------- /02-data/starting-points/aggr-redux/src/types/fileTypes.js: -------------------------------------------------------------------------------- 1 | export const types = { 2 | NEW_FILE: "NEW_FILE", 3 | DELETE_FILE: "DELETE_FILES", 4 | ADD_SIZE: "ADD_SIZE", 5 | RANDOMIZE_SIZE: "RANDOMIZE_SIZE" 6 | }; 7 | -------------------------------------------------------------------------------- /03-columns/README.md: -------------------------------------------------------------------------------- 1 | # 03 - Columns 2 | Let's learn all about working with columns in ag-Grid in this tutorial. I've broken the examples into 3 different sample projects. Each one has a `starting-point` repo and a `finished-code` repo. 3 | 4 | - Use the `aggr-columns` starting point and finished code for the videos on column sizing, header height, tooltips, groups, and moving and pinning columns. 5 | - Use the `aggr-column-span` starting point and finished code for the video on column spanning. 6 | - Use the `aggr-column-state` starting point and finished code for the video on updating columns with state. 7 | 8 | ## Helpful Links 9 | - [ag-Grid Docs: Header Height](https://www.ag-grid.com/javascript-grid-column-header/#example-text-orientation) 10 | - [ag-Grid Docs: Tooltips](https://www.ag-grid.com/javascript-grid-column-header/#header-tooltips) 11 | - [ag-Grid Docs: Column Groups](https://www.ag-grid.com/javascript-grid-grouping-headers/) 12 | - [ag-Grid Docs: Flex Columns](https://www.ag-grid.com/javascript-grid-resizing/#column-flex) 13 | - [ag-Grid Docs: Shift Resizing](https://www.ag-grid.com/javascript-grid-resizing/#shift-resizing) 14 | - [ag-Grid Docs: Column Moving](https://www.ag-grid.com/javascript-grid-column-moving/#example-advanced-lock) 15 | - [ag-Grid Docs: Pinning](https://www.ag-grid.com/javascript-grid-pinning/#example-column-pinning) 16 | - [ag-Grid Docs: Column Spanning](https://www.ag-grid.com/javascript-grid-column-spanning/#example-column-spanning-complex) 17 | - [ag-Grid Docs: Updating Columns with State](https://www.ag-grid.com/javascript-grid-column-definitions/#delta-columns) -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-span/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-span/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-span/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-infinite", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.1", 10 | "ag-grid-react": "^22.1.1", 11 | "react": "^16.12.0", 12 | "react-dom": "^16.12.0", 13 | "react-scripts": "3.3.0" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-span/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/finished-code/aggr-column-span/public/favicon.ico -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-span/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Column Spanning 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-span/public/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/finished-code/aggr-column-span/public/loading.gif -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-span/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/finished-code/aggr-column-span/public/logo192.png -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-span/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/finished-code/aggr-column-span/public/logo512.png -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-span/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-span/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-span/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | 15 | .header-cell { 16 | background-color: #a6e1ec; 17 | font-size: 25px; 18 | font-weight: bold; 19 | text-align: center; 20 | } 21 | 22 | .quarters-cell { 23 | background-color: #5bc0de; 24 | font-weight: bold; 25 | } 26 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-span/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-redux", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.1", 10 | "ag-grid-enterprise": "^22.1.1", 11 | "ag-grid-react": "^22.1.1", 12 | "react": "^16.12.0", 13 | "react-dom": "^16.12.0", 14 | "react-redux": "^7.1.3", 15 | "react-scripts": "3.3.0", 16 | "redux": "^4.0.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": "react-app" 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/finished-code/aggr-column-state/public/favicon.ico -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | ag-Grid Redux 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/finished-code/aggr-column-state/public/logo192.png -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/finished-code/aggr-column-state/public/logo512.png -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/src/actions/columnActions.js: -------------------------------------------------------------------------------- 1 | import { types } from "../types/columnTypes"; 2 | 3 | export const actions = { 4 | groupColumn() { 5 | return { 6 | type: types.GROUP_COLUMN, 7 | payload: {} 8 | }; 9 | }, 10 | updateHeaderName() { 11 | return { 12 | type: types.UPDATE_HEADER_NAME, 13 | payload: {} 14 | }; 15 | }, 16 | changeColumns() { 17 | return { 18 | type: types.CHANGE_COLUMNS, 19 | payload: {} 20 | }; 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | 15 | .btn-padding { 16 | padding-bottom: 15px; 17 | } -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Provider } from "react-redux"; 4 | 5 | import store from "./store"; 6 | import App from "./App"; 7 | import "./index.css"; 8 | 9 | const rootDiv = document.getElementById("root"); 10 | 11 | const comp = ( 12 |
13 |
14 | 15 | 16 | 17 |
18 | ); 19 | 20 | ReactDOM.render(comp, rootDiv); 21 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/src/middleware/logger.js: -------------------------------------------------------------------------------- 1 | const logger = store => next => action => { 2 | console.group(action.type); 3 | console.log('dispatching: ', action); 4 | console.log('prev state: ', store.getState()); 5 | const result = next(action); 6 | console.log('next state: ', store.getState()); 7 | console.groupEnd(action.type); 8 | return result; 9 | }; 10 | 11 | export default logger; -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/src/reducers/columnReducer.js: -------------------------------------------------------------------------------- 1 | import { types } from "../types/columnTypes"; 2 | 3 | export default function columnReducer(state = {}, action) { 4 | switch (action.type) { 5 | case types.GROUP_COLUMN: 6 | return { 7 | columnDefs: [ 8 | { 9 | colId: "athlete", 10 | field: "athlete" 11 | }, 12 | { 13 | colId: "sport", 14 | field: "sport", 15 | rowGroup: true 16 | }, 17 | { 18 | colId: "age", 19 | field: "age" 20 | }, 21 | { 22 | colId: "year", 23 | field: "year" 24 | } 25 | ] 26 | }; 27 | case types.CHANGE_COLUMNS: 28 | return { 29 | columnDefs: [ 30 | { 31 | colId: "athlete", 32 | field: "athlete" 33 | }, 34 | { 35 | colId: "age", 36 | field: "age" 37 | } 38 | ] 39 | }; 40 | case types.UPDATE_HEADER_NAME: 41 | return { 42 | columnDefs: [ 43 | { 44 | colId: "athlete", 45 | field: "athlete", 46 | headerName: "Athl" 47 | }, 48 | { 49 | colId: "sport", 50 | field: "sport", 51 | headerName: "Sp" 52 | }, 53 | { 54 | colId: "age", 55 | field: "age", 56 | headerName: "Age" 57 | }, 58 | { 59 | colId: "year", 60 | field: "year", 61 | headerName: "Yr" 62 | } 63 | ] 64 | }; 65 | default: 66 | return state; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/src/store.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware } from "redux"; 2 | 3 | import columnReducer from "./reducers/columnReducer"; 4 | import logger from "./middleware/logger"; 5 | 6 | const initialColumns = [ 7 | { 8 | colId: "athlete", 9 | field: "athlete" 10 | }, 11 | { 12 | colId: "sport", 13 | field: "sport" 14 | }, 15 | { 16 | colId: "age", 17 | field: "age" 18 | }, 19 | { 20 | colId: "year", 21 | field: "year" 22 | } 23 | ]; 24 | 25 | const initialState = { 26 | columnDefs: initialColumns 27 | }; 28 | 29 | export default createStore( 30 | columnReducer, 31 | initialState, 32 | applyMiddleware(logger) 33 | ); 34 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-column-state/src/types/columnTypes.js: -------------------------------------------------------------------------------- 1 | export const types = { 2 | GROUP_COLUMN: "GROUP_COLUMN", 3 | CHANGE_COLUMNS: "CHANGE_COLUMNS", 4 | UPDATE_HEADER_NAME: "UPDATE_HEADER_NAME" 5 | }; 6 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-columns/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-columns/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-columns/data/generate-data: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | const DATA_PATH = path.resolve(__dirname, './data.json'); 7 | 8 | async function generate() { 9 | const data = require('./generate.js')(); 10 | await new Promise((resolve, reject) => { 11 | fs.writeFile(DATA_PATH, JSON.stringify(data), error => { 12 | if (error) { 13 | reject(error); 14 | return; 15 | } 16 | resolve(); 17 | }); 18 | }); 19 | } 20 | 21 | module.exports = generate; 22 | 23 | if (require.main === module) { 24 | function main() { 25 | generate().then(() => process.exit(0)); 26 | } 27 | 28 | main(); 29 | } 30 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-columns/data/generate.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | const data = { 3 | accounts: [] 4 | }; 5 | 6 | const faker = require("faker"); 7 | 8 | for (let account = 0; account < 500; account++) { 9 | const id = data.accounts.length + 1; 10 | data.accounts.push({ 11 | id, 12 | firstName: faker.name.firstName(), 13 | lastName: faker.name.lastName(), 14 | avatar: faker.image.avatar(), 15 | company: faker.company.companyName(), 16 | title: faker.name.title(), 17 | streetAddress: faker.address.streetAddress(), 18 | city: faker.address.city(), 19 | state: faker.address.stateAbbr(), 20 | zip: faker.address.zipCode(), 21 | accountNumber: faker.finance.account(), 22 | accountName: faker.finance.accountName(), 23 | amount: faker.finance.amount() 24 | }); 25 | } 26 | 27 | return data; 28 | }; 29 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-columns/data/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1" 3 | } 4 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-columns/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "~22.1.0", 10 | "ag-grid-react": "~22.1.0", 11 | "concurrently": "^5.0.0", 12 | "json-server": "^0.15.1", 13 | "react": "^16.12.0", 14 | "react-dom": "^16.12.0", 15 | "react-scripts": "3.3.0" 16 | }, 17 | "scripts": { 18 | "start": "concurrently --prefix-colors white.bgBlue,white.bgGreen --names react,json-server --kill-others \"npm run serve:client\" \"npm run serve:server\"", 19 | "serve:client": "react-scripts start", 20 | "serve:server": "json-server --watch data/data.json --routes data/routes.json --port 3001", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "generate": "node ./data/generate-data" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "faker": "^4.1.0" 43 | }, 44 | "proxy": "http://localhost:3001" 45 | } 46 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-columns/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/finished-code/aggr-columns/public/favicon.ico -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-columns/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | ag-Grid & React 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-columns/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/finished-code/aggr-columns/public/logo192.png -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-columns/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/finished-code/aggr-columns/public/logo512.png -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-columns/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-columns/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-columns/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /03-columns/finished-code/aggr-columns/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-span/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-span/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-span/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-infinite", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.1", 10 | "ag-grid-react": "^22.1.1", 11 | "react": "^16.12.0", 12 | "react-dom": "^16.12.0", 13 | "react-scripts": "3.3.0" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-span/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/starting-points/aggr-column-span/public/favicon.ico -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-span/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Column Spanning 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-span/public/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/starting-points/aggr-column-span/public/loading.gif -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-span/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/starting-points/aggr-column-span/public/logo192.png -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-span/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/starting-points/aggr-column-span/public/logo512.png -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-span/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-span/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-span/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | 15 | .header-cell { 16 | background-color: #a6e1ec; 17 | font-size: 25px; 18 | font-weight: bold; 19 | text-align: center; 20 | } 21 | 22 | .quarters-cell { 23 | background-color: #5bc0de; 24 | font-weight: bold; 25 | } 26 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-span/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-redux", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.1", 10 | "ag-grid-enterprise": "^22.1.1", 11 | "ag-grid-react": "^22.1.1", 12 | "react": "^16.12.0", 13 | "react-dom": "^16.12.0", 14 | "react-redux": "^7.1.3", 15 | "react-scripts": "3.3.0", 16 | "redux": "^4.0.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": "react-app" 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/starting-points/aggr-column-state/public/favicon.ico -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | ag-Grid Redux 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/starting-points/aggr-column-state/public/logo192.png -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/starting-points/aggr-column-state/public/logo512.png -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { AgGridReact } from "ag-grid-react"; 3 | import "ag-grid-enterprise"; 4 | import { connect } from "react-redux"; 5 | import { bindActionCreators } from "redux"; 6 | import { actions } from "./actions/columnActions"; 7 | 8 | import "ag-grid-community/dist/styles/ag-grid.css"; 9 | import "ag-grid-community/dist/styles/ag-theme-balham.css"; 10 | 11 | class App extends Component { 12 | rowData = [ 13 | { 14 | id: 1, 15 | athlete: "Michael Phelps", 16 | age: 23, 17 | year: 2008, 18 | date: "24/08/2008", 19 | sport: "Swimming" 20 | }, 21 | { 22 | id: 2, 23 | athlete: "Michael Phelps", 24 | age: 19, 25 | year: 2004, 26 | sport: "Swimming" 27 | }, 28 | { 29 | id: 3, 30 | athlete: "Michael Phelps", 31 | age: 27, 32 | year: 2012, 33 | sport: "Swimming" 34 | }, 35 | { 36 | id: 4, 37 | athlete: "Natalie Coughlin", 38 | age: 25, 39 | year: 2008, 40 | sport: "Swimming" 41 | }, 42 | { 43 | id: 5, 44 | athlete: "Aleksey Nemov", 45 | age: 24, 46 | year: 2000, 47 | sport: "Gymnastics" 48 | } 49 | ]; 50 | 51 | render() { 52 | return ( 53 |
54 | data.id} 59 | > 60 |
61 | ); 62 | } 63 | } 64 | 65 | const mapStateToProps = state => ({ 66 | columnDefs: state.columnDefs 67 | }); 68 | 69 | const mapDispatchToProps = dispatch => ({ 70 | actions: bindActionCreators(actions, dispatch) 71 | }); 72 | 73 | export default connect(mapStateToProps, mapDispatchToProps)(App); 74 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/src/actions/columnActions.js: -------------------------------------------------------------------------------- 1 | import { types } from "../types/columnTypes"; 2 | 3 | export const actions = { 4 | groupColumn() { 5 | return { 6 | type: types.GROUP_COLUMN, 7 | payload: {} 8 | }; 9 | }, 10 | updateHeaderName() { 11 | return { 12 | type: types.UPDATE_HEADER_NAME, 13 | payload: {} 14 | }; 15 | }, 16 | changeColumns() { 17 | return { 18 | type: types.CHANGE_COLUMNS, 19 | payload: {} 20 | }; 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | 15 | .btn-padding { 16 | padding-bottom: 15px; 17 | } -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Provider } from "react-redux"; 4 | 5 | import store from "./store"; 6 | import App from "./App"; 7 | import "./index.css"; 8 | 9 | const rootDiv = document.getElementById("root"); 10 | 11 | const comp = ( 12 |
13 |
14 | 15 | 16 | 17 |
18 | ); 19 | 20 | ReactDOM.render(comp, rootDiv); 21 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/src/middleware/logger.js: -------------------------------------------------------------------------------- 1 | const logger = store => next => action => { 2 | console.group(action.type); 3 | console.log('dispatching: ', action); 4 | console.log('prev state: ', store.getState()); 5 | const result = next(action); 6 | console.log('next state: ', store.getState()); 7 | console.groupEnd(action.type); 8 | return result; 9 | }; 10 | 11 | export default logger; -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/src/reducers/columnReducer.js: -------------------------------------------------------------------------------- 1 | import { types } from "../types/columnTypes"; 2 | 3 | export default function columnReducer(state = {}, action) { 4 | switch (action.type) { 5 | case types.GROUP_COLUMN: 6 | return { 7 | columnDefs: [ 8 | { 9 | colId: "athlete", 10 | field: "athlete" 11 | }, 12 | { 13 | colId: "sport", 14 | field: "sport", 15 | rowGroup: true 16 | }, 17 | { 18 | colId: "age", 19 | field: "age" 20 | }, 21 | { 22 | colId: "year", 23 | field: "year" 24 | } 25 | ] 26 | }; 27 | case types.CHANGE_COLUMNS: 28 | return { 29 | columnDefs: [ 30 | { 31 | colId: "athlete", 32 | field: "athlete" 33 | }, 34 | { 35 | colId: "age", 36 | field: "age" 37 | } 38 | ] 39 | }; 40 | case types.UPDATE_HEADER_NAME: 41 | return { 42 | columnDefs: [ 43 | { 44 | colId: "athlete", 45 | field: "athlete", 46 | headerName: "Athl" 47 | }, 48 | { 49 | colId: "sport", 50 | field: "sport", 51 | headerName: "Sp" 52 | }, 53 | { 54 | colId: "age", 55 | field: "age", 56 | headerName: "Age" 57 | }, 58 | { 59 | colId: "year", 60 | field: "year", 61 | headerName: "Yr" 62 | } 63 | ] 64 | }; 65 | default: 66 | return state; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/src/store.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware } from "redux"; 2 | 3 | import columnReducer from "./reducers/columnReducer"; 4 | import logger from "./middleware/logger"; 5 | 6 | const initialColumns = [ 7 | { 8 | colId: "athlete", 9 | field: "athlete" 10 | }, 11 | { 12 | colId: "sport", 13 | field: "sport" 14 | }, 15 | { 16 | colId: "age", 17 | field: "age" 18 | }, 19 | { 20 | colId: "year", 21 | field: "year" 22 | } 23 | ]; 24 | 25 | const initialState = { 26 | columnDefs: initialColumns 27 | }; 28 | 29 | export default createStore( 30 | columnReducer, 31 | initialState, 32 | applyMiddleware(logger) 33 | ); 34 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-column-state/src/types/columnTypes.js: -------------------------------------------------------------------------------- 1 | export const types = { 2 | GROUP_COLUMN: "GROUP_COLUMN", 3 | CHANGE_COLUMNS: "CHANGE_COLUMNS", 4 | UPDATE_HEADER_NAME: "UPDATE_HEADER_NAME" 5 | }; 6 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-columns/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-columns/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-columns/data/generate-data: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | const DATA_PATH = path.resolve(__dirname, './data.json'); 7 | 8 | async function generate() { 9 | const data = require('./generate.js')(); 10 | await new Promise((resolve, reject) => { 11 | fs.writeFile(DATA_PATH, JSON.stringify(data), error => { 12 | if (error) { 13 | reject(error); 14 | return; 15 | } 16 | resolve(); 17 | }); 18 | }); 19 | } 20 | 21 | module.exports = generate; 22 | 23 | if (require.main === module) { 24 | function main() { 25 | generate().then(() => process.exit(0)); 26 | } 27 | 28 | main(); 29 | } 30 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-columns/data/generate.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | const data = { 3 | accounts: [] 4 | }; 5 | 6 | const faker = require("faker"); 7 | 8 | for (let account = 0; account < 500; account++) { 9 | const id = data.accounts.length + 1; 10 | data.accounts.push({ 11 | id, 12 | firstName: faker.name.firstName(), 13 | lastName: faker.name.lastName(), 14 | avatar: faker.image.avatar(), 15 | company: faker.company.companyName(), 16 | title: faker.name.title(), 17 | streetAddress: faker.address.streetAddress(), 18 | city: faker.address.city(), 19 | state: faker.address.stateAbbr(), 20 | zip: faker.address.zipCode(), 21 | accountNumber: faker.finance.account(), 22 | accountName: faker.finance.accountName(), 23 | amount: faker.finance.amount() 24 | }); 25 | } 26 | 27 | return data; 28 | }; 29 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-columns/data/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1" 3 | } 4 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-columns/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "~22.1.0", 10 | "ag-grid-react": "~22.1.0", 11 | "concurrently": "^5.0.0", 12 | "json-server": "^0.15.1", 13 | "react": "^16.12.0", 14 | "react-dom": "^16.12.0", 15 | "react-scripts": "3.3.0" 16 | }, 17 | "scripts": { 18 | "start": "concurrently --prefix-colors white.bgBlue,white.bgGreen --names react,json-server --kill-others \"npm run serve:client\" \"npm run serve:server\"", 19 | "serve:client": "react-scripts start", 20 | "serve:server": "json-server --watch data/data.json --routes data/routes.json --port 3001", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "generate": "node ./data/generate-data" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "faker": "^4.1.0" 43 | }, 44 | "proxy": "http://localhost:3001" 45 | } 46 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-columns/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/starting-points/aggr-columns/public/favicon.ico -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-columns/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | ag-Grid & React 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-columns/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/starting-points/aggr-columns/public/logo192.png -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-columns/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/03-columns/starting-points/aggr-columns/public/logo512.png -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-columns/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-columns/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-columns/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /03-columns/starting-points/aggr-columns/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /04-filters/README.md: -------------------------------------------------------------------------------- 1 | # 04 - Filters 2 | You're going to love this tutorial; it's all about working with filters in ag-Grid. You'll learn about different types of filters, how to use them in the UI, and how to set them programatically using the grid API and filter API. 3 | 4 | This tutorial uses a single project called `aggr-filters` for all of the videos. You'll find the starting point code in the `starting-points` folder and the finished code in the `finished-code` folder. 5 | 6 | ## Helpful Links 7 | - [ag-Grid Docs: Column Filters](https://www.ag-grid.com/javascript-grid-filtering/) 8 | - [ag-Grid Docs: Provided Filters](https://www.ag-grid.com/javascript-grid-filter-provided/) 9 | - [ag-Grid Docs: Floating Filters](https://www.ag-grid.com/javascript-grid-floating-filters/) 10 | - [ag-Grid Docs: Quick Filter](https://www.ag-grid.com/javascript-grid-filter-quick/) 11 | - [ag-Grid Docs: Filter API](https://www.ag-grid.com/javascript-grid-filter-api/) 12 | - [ag-Grid Docs: Set Filter](https://www.ag-grid.com/javascript-grid-filter-set/) -------------------------------------------------------------------------------- /04-filters/finished-code/aggr-filters/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04-filters/finished-code/aggr-filters/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /04-filters/finished-code/aggr-filters/data/generate-data: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require("fs"); 4 | const path = require("path"); 5 | 6 | const DATA_PATH = path.resolve(__dirname, "./data.json"); 7 | 8 | async function generate() { 9 | const data = require("./generate.js")(); 10 | await new Promise((resolve, reject) => { 11 | fs.writeFile(DATA_PATH, JSON.stringify(data), error => { 12 | if (error) { 13 | reject(error); 14 | return; 15 | } 16 | resolve(); 17 | }); 18 | }); 19 | } 20 | 21 | module.exports = generate; 22 | 23 | if (require.main === module) { 24 | function main() { 25 | generate().then(() => process.exit(0)); 26 | } 27 | 28 | main(); 29 | } 30 | -------------------------------------------------------------------------------- /04-filters/finished-code/aggr-filters/data/generate.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | const data = { 3 | accounts: [] 4 | }; 5 | 6 | const faker = require("faker"); 7 | 8 | for (let account = 0; account < 500; account++) { 9 | const id = data.accounts.length + 1; 10 | data.accounts.push({ 11 | id, 12 | firstName: faker.name.firstName(), 13 | lastName: faker.name.lastName(), 14 | accountNumber: faker.finance.account(), 15 | dateOpened: faker.date.past(), 16 | accountName: faker.finance.accountName(), 17 | amount: +faker.finance.amount() 18 | }); 19 | } 20 | 21 | return data; 22 | }; 23 | -------------------------------------------------------------------------------- /04-filters/finished-code/aggr-filters/data/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1" 3 | } 4 | -------------------------------------------------------------------------------- /04-filters/finished-code/aggr-filters/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "~22.1.0", 10 | "ag-grid-enterprise": "~22.1.1", 11 | "ag-grid-react": "~22.1.0", 12 | "concurrently": "^5.0.0", 13 | "json-server": "^0.15.1", 14 | "react": "^16.12.0", 15 | "react-dom": "^16.12.0", 16 | "react-scripts": "3.4.0" 17 | }, 18 | "scripts": { 19 | "start": "concurrently --prefix-colors white.bgBlue,white.bgGreen --names react,json-server --kill-others \"npm run serve:client\" \"npm run serve:server\"", 20 | "serve:client": "react-scripts start", 21 | "serve:server": "json-server --watch data/data.json --routes data/routes.json --port 3001", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject", 25 | "generate": "node ./data/generate-data" 26 | }, 27 | "eslintConfig": { 28 | "extends": "react-app" 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | }, 42 | "devDependencies": { 43 | "faker": "^4.1.0" 44 | }, 45 | "proxy": "http://localhost:3001" 46 | } 47 | -------------------------------------------------------------------------------- /04-filters/finished-code/aggr-filters/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/04-filters/finished-code/aggr-filters/public/favicon.ico -------------------------------------------------------------------------------- /04-filters/finished-code/aggr-filters/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | ag-Grid & React 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /04-filters/finished-code/aggr-filters/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/04-filters/finished-code/aggr-filters/public/logo192.png -------------------------------------------------------------------------------- /04-filters/finished-code/aggr-filters/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/04-filters/finished-code/aggr-filters/public/logo512.png -------------------------------------------------------------------------------- /04-filters/finished-code/aggr-filters/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /04-filters/finished-code/aggr-filters/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /04-filters/finished-code/aggr-filters/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /04-filters/finished-code/aggr-filters/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /04-filters/starting-points/aggr-filters/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04-filters/starting-points/aggr-filters/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /04-filters/starting-points/aggr-filters/data/generate-data: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | const DATA_PATH = path.resolve(__dirname, './data.json'); 7 | 8 | async function generate() { 9 | const data = require('./generate.js')(); 10 | await new Promise((resolve, reject) => { 11 | fs.writeFile(DATA_PATH, JSON.stringify(data), error => { 12 | if (error) { 13 | reject(error); 14 | return; 15 | } 16 | resolve(); 17 | }); 18 | }); 19 | } 20 | 21 | module.exports = generate; 22 | 23 | if (require.main === module) { 24 | function main() { 25 | generate().then(() => process.exit(0)); 26 | } 27 | 28 | main(); 29 | } 30 | -------------------------------------------------------------------------------- /04-filters/starting-points/aggr-filters/data/generate.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | const data = { 3 | accounts: [] 4 | }; 5 | 6 | const faker = require("faker"); 7 | 8 | for (let account = 0; account < 500; account++) { 9 | const id = data.accounts.length + 1; 10 | data.accounts.push({ 11 | id, 12 | firstName: faker.name.firstName(), 13 | lastName: faker.name.lastName(), 14 | accountNumber: faker.finance.account(), 15 | dateOpened: faker.date.past(), 16 | accountName: faker.finance.accountName(), 17 | amount: +faker.finance.amount() 18 | }); 19 | } 20 | 21 | return data; 22 | }; 23 | -------------------------------------------------------------------------------- /04-filters/starting-points/aggr-filters/data/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1" 3 | } 4 | -------------------------------------------------------------------------------- /04-filters/starting-points/aggr-filters/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "~22.1.0", 10 | "ag-grid-react": "~22.1.0", 11 | "concurrently": "^5.0.0", 12 | "json-server": "^0.15.1", 13 | "react": "^16.12.0", 14 | "react-dom": "^16.12.0", 15 | "react-scripts": "3.4.0" 16 | }, 17 | "scripts": { 18 | "start": "concurrently --prefix-colors white.bgBlue,white.bgGreen --names react,json-server --kill-others \"npm run serve:client\" \"npm run serve:server\"", 19 | "serve:client": "react-scripts start", 20 | "serve:server": "json-server --watch data/data.json --routes data/routes.json --port 3001", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "generate": "node ./data/generate-data" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "faker": "^4.1.0" 43 | }, 44 | "proxy": "http://localhost:3001" 45 | } 46 | -------------------------------------------------------------------------------- /04-filters/starting-points/aggr-filters/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/04-filters/starting-points/aggr-filters/public/favicon.ico -------------------------------------------------------------------------------- /04-filters/starting-points/aggr-filters/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | ag-Grid & React 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /04-filters/starting-points/aggr-filters/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/04-filters/starting-points/aggr-filters/public/logo192.png -------------------------------------------------------------------------------- /04-filters/starting-points/aggr-filters/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/04-filters/starting-points/aggr-filters/public/logo512.png -------------------------------------------------------------------------------- /04-filters/starting-points/aggr-filters/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /04-filters/starting-points/aggr-filters/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /04-filters/starting-points/aggr-filters/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /04-filters/starting-points/aggr-filters/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /05-rows/README.md: -------------------------------------------------------------------------------- 1 | # 05 - Rows 2 | You can't have a grid without rows, right?! This tutorial covers all things rows. You'll learn about sorting, pinning, and dragging rows, as well as techniques like row spanning and full width rows. 3 | 4 | This tutorial uses a project called `aggr-rows` for all but the last three videos. You'll find the starting point code in the `starting-points` folder and the finished code in the `finished-code` folder. 5 | 6 | The last three videos use StackBlitz projects: 7 | 8 | - [Auto Row Height](https://stackblitz.com/edit/ag-grid-react-auto-row-height) 9 | - [Row Spanning](https://stackblitz.com/edit/ag-grid-react-row-spanning) 10 | - [Full Width Rows](https://stackblitz.com/edit/ag-grid-react-full-width-rows) 11 | 12 | ## Helpful Links 13 | 14 | - [ag-Grid docs: Row Sorting](https://www.ag-grid.com/javascript-grid-sorting/) 15 | - [ag-Grid docs: Multi-Column Sorting](https://www.ag-grid.com/javascript-grid-sorting/#multi-column-sorting) 16 | - [ag-Grid docs: Custom Sorting](https://www.ag-grid.com/javascript-grid-sorting/#custom-sorting) 17 | - [ag-Grid docs: Sorting with the Grid API](https://www.ag-grid.com/javascript-grid-sorting/#sorting-api) 18 | - [ag-Grid docs: Row Dragging](https://www.ag-grid.com/javascript-grid-row-dragging/) 19 | - [ag-Grid docs: Row Pinning](https://www.ag-grid.com/javascript-grid-row-pinning/) 20 | - [ag-Grid docs: Row Height](https://www.ag-grid.com/javascript-grid-row-height/) 21 | - [ag-Grid docs: Row Spanning](https://www.ag-grid.com/javascript-grid-row-spanning/) 22 | - [ag-Grid docs: Full Width Rows](https://www.ag-grid.com/javascript-grid-full-width-rows/) -------------------------------------------------------------------------------- /05-rows/finished-code/aggr-rows/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .vscode/ -------------------------------------------------------------------------------- /05-rows/finished-code/aggr-rows/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /05-rows/finished-code/aggr-rows/data/generate-data: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | const DATA_PATH = path.resolve(__dirname, './data.json'); 7 | 8 | async function generate() { 9 | const data = require('./generate.js')(); 10 | await new Promise((resolve, reject) => { 11 | fs.writeFile(DATA_PATH, JSON.stringify(data), error => { 12 | if (error) { 13 | reject(error); 14 | return; 15 | } 16 | resolve(); 17 | }); 18 | }); 19 | } 20 | 21 | module.exports = generate; 22 | 23 | if (require.main === module) { 24 | function main() { 25 | generate().then(() => process.exit(0)); 26 | } 27 | 28 | main(); 29 | } 30 | -------------------------------------------------------------------------------- /05-rows/finished-code/aggr-rows/data/generate.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | const data = { 3 | accounts: [], 4 | }; 5 | 6 | const faker = require("faker"); 7 | 8 | for (let account = 0; account < 500; account++) { 9 | const id = data.accounts.length + 1; 10 | data.accounts.push({ 11 | id, 12 | firstName: faker.name.firstName(), 13 | lastName: faker.name.lastName(), 14 | accountNumber: faker.finance.account(), 15 | dateOpened: faker.date.past(), 16 | accountName: faker.finance.accountName(), 17 | amount: faker.finance.amount(), 18 | }); 19 | } 20 | 21 | return data; 22 | }; 23 | -------------------------------------------------------------------------------- /05-rows/finished-code/aggr-rows/data/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1" 3 | } 4 | -------------------------------------------------------------------------------- /05-rows/finished-code/aggr-rows/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.0", 10 | "ag-grid-react": "^22.1.0", 11 | "concurrently": "^5.0.0", 12 | "json-server": "^0.15.1", 13 | "react": "^16.12.0", 14 | "react-dom": "^16.12.0", 15 | "react-scripts": "^3.4.1" 16 | }, 17 | "scripts": { 18 | "start": "concurrently --prefix-colors white.bgBlue,white.bgGreen --names react,json-server --kill-others \"npm run serve:client\" \"npm run serve:server\"", 19 | "serve:client": "react-scripts start", 20 | "serve:server": "json-server --watch data/data.json --routes data/routes.json --port 3001", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "generate": "node ./data/generate-data" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "faker": "^4.1.0" 43 | }, 44 | "proxy": "http://localhost:3001" 45 | } 46 | -------------------------------------------------------------------------------- /05-rows/finished-code/aggr-rows/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/05-rows/finished-code/aggr-rows/public/favicon.ico -------------------------------------------------------------------------------- /05-rows/finished-code/aggr-rows/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | ag-Grid & React 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /05-rows/finished-code/aggr-rows/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/05-rows/finished-code/aggr-rows/public/logo192.png -------------------------------------------------------------------------------- /05-rows/finished-code/aggr-rows/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/05-rows/finished-code/aggr-rows/public/logo512.png -------------------------------------------------------------------------------- /05-rows/finished-code/aggr-rows/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /05-rows/finished-code/aggr-rows/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /05-rows/finished-code/aggr-rows/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /05-rows/finished-code/aggr-rows/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /05-rows/starting-points/aggr-rows/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /05-rows/starting-points/aggr-rows/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /05-rows/starting-points/aggr-rows/data/generate-data: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | const DATA_PATH = path.resolve(__dirname, './data.json'); 7 | 8 | async function generate() { 9 | const data = require('./generate.js')(); 10 | await new Promise((resolve, reject) => { 11 | fs.writeFile(DATA_PATH, JSON.stringify(data), error => { 12 | if (error) { 13 | reject(error); 14 | return; 15 | } 16 | resolve(); 17 | }); 18 | }); 19 | } 20 | 21 | module.exports = generate; 22 | 23 | if (require.main === module) { 24 | function main() { 25 | generate().then(() => process.exit(0)); 26 | } 27 | 28 | main(); 29 | } 30 | -------------------------------------------------------------------------------- /05-rows/starting-points/aggr-rows/data/generate.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | const data = { 3 | accounts: [], 4 | }; 5 | 6 | const faker = require("faker"); 7 | 8 | for (let account = 0; account < 500; account++) { 9 | const id = data.accounts.length + 1; 10 | data.accounts.push({ 11 | id, 12 | firstName: faker.name.firstName(), 13 | lastName: faker.name.lastName(), 14 | accountNumber: faker.finance.account(), 15 | dateOpened: faker.date.past(), 16 | accountName: faker.finance.accountName(), 17 | amount: faker.finance.amount(), 18 | }); 19 | } 20 | 21 | return data; 22 | }; 23 | -------------------------------------------------------------------------------- /05-rows/starting-points/aggr-rows/data/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1" 3 | } 4 | -------------------------------------------------------------------------------- /05-rows/starting-points/aggr-rows/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.0", 10 | "ag-grid-react": "^22.1.0", 11 | "concurrently": "^5.0.0", 12 | "json-server": "^0.15.1", 13 | "react": "^16.12.0", 14 | "react-dom": "^16.12.0", 15 | "react-scripts": "^3.4.1" 16 | }, 17 | "scripts": { 18 | "start": "concurrently --prefix-colors white.bgBlue,white.bgGreen --names react,json-server --kill-others \"npm run serve:client\" \"npm run serve:server\"", 19 | "serve:client": "react-scripts start", 20 | "serve:server": "json-server --watch data/data.json --routes data/routes.json --port 3001", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "generate": "node ./data/generate-data" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "faker": "^4.1.0" 43 | }, 44 | "proxy": "http://localhost:3001" 45 | } 46 | -------------------------------------------------------------------------------- /05-rows/starting-points/aggr-rows/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/05-rows/starting-points/aggr-rows/public/favicon.ico -------------------------------------------------------------------------------- /05-rows/starting-points/aggr-rows/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | ag-Grid & React 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /05-rows/starting-points/aggr-rows/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/05-rows/starting-points/aggr-rows/public/logo192.png -------------------------------------------------------------------------------- /05-rows/starting-points/aggr-rows/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/05-rows/starting-points/aggr-rows/public/logo512.png -------------------------------------------------------------------------------- /05-rows/starting-points/aggr-rows/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /05-rows/starting-points/aggr-rows/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /05-rows/starting-points/aggr-rows/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /05-rows/starting-points/aggr-rows/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /06-styling/README.md: -------------------------------------------------------------------------------- 1 | # 06 - Styling 2 | This tutorial is all about styling: row styling, cell styling, grid size, using custom icons, and printing the grid. 3 | 4 | This tutorial uses a project called `aggr-styling` for all of the videos. You'll find the starting point code in the `starting-points` folder and the finished code in the `finished-code` folder. 5 | 6 | ## Helpful Links 7 | 8 | - [ag-Grid docs: Row Styles](https://www.ag-grid.com/javascript-grid-row-styles/) 9 | - [ag-Grid docs: Cell Styles](https://www.ag-grid.com/javascript-grid-cell-styles/) 10 | - [ag-Grid docs: Grid Width & Height](https://www.ag-grid.com/javascript-grid-width-and-height/) 11 | - [ag-Grid docs: Grid Icons](https://www.ag-grid.com/javascript-grid-icons/) 12 | - [ag-Grid docs: Printing](https://www.ag-grid.com/javascript-grid-for-print/) -------------------------------------------------------------------------------- /06-styling/finished-code/aggr-styling/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .vscode/ -------------------------------------------------------------------------------- /06-styling/finished-code/aggr-styling/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /06-styling/finished-code/aggr-styling/data/generate-data: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | const DATA_PATH = path.resolve(__dirname, './data.json'); 7 | 8 | async function generate() { 9 | const data = require('./generate.js')(); 10 | await new Promise((resolve, reject) => { 11 | fs.writeFile(DATA_PATH, JSON.stringify(data), error => { 12 | if (error) { 13 | reject(error); 14 | return; 15 | } 16 | resolve(); 17 | }); 18 | }); 19 | } 20 | 21 | module.exports = generate; 22 | 23 | if (require.main === module) { 24 | function main() { 25 | generate().then(() => process.exit(0)); 26 | } 27 | 28 | main(); 29 | } 30 | -------------------------------------------------------------------------------- /06-styling/finished-code/aggr-styling/data/generate.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | const data = { 3 | accounts: [], 4 | }; 5 | 6 | const faker = require("faker"); 7 | 8 | for (let account = 0; account < 500; account++) { 9 | const id = data.accounts.length + 1; 10 | data.accounts.push({ 11 | id, 12 | firstName: faker.name.firstName(), 13 | lastName: faker.name.lastName(), 14 | accountNumber: faker.finance.account(), 15 | dateOpened: faker.date.past(), 16 | accountName: faker.finance.accountName(), 17 | amount: faker.finance.amount(), 18 | }); 19 | } 20 | 21 | return data; 22 | }; 23 | -------------------------------------------------------------------------------- /06-styling/finished-code/aggr-styling/data/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1" 3 | } 4 | -------------------------------------------------------------------------------- /06-styling/finished-code/aggr-styling/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.0", 10 | "ag-grid-react": "^22.1.0", 11 | "concurrently": "^5.0.0", 12 | "json-server": "^0.15.1", 13 | "react": "^16.12.0", 14 | "react-dom": "^16.12.0", 15 | "react-scripts": "^3.4.1" 16 | }, 17 | "scripts": { 18 | "start": "concurrently --prefix-colors white.bgBlue,white.bgGreen --names react,json-server --kill-others \"npm run serve:client\" \"npm run serve:server\"", 19 | "serve:client": "react-scripts start", 20 | "serve:server": "json-server --watch data/data.json --routes data/routes.json --port 3001", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "generate": "node ./data/generate-data" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "faker": "^4.1.0" 43 | }, 44 | "proxy": "http://localhost:3001" 45 | } 46 | -------------------------------------------------------------------------------- /06-styling/finished-code/aggr-styling/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/06-styling/finished-code/aggr-styling/public/favicon.ico -------------------------------------------------------------------------------- /06-styling/finished-code/aggr-styling/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 18 | ag-Grid & React 19 | 20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /06-styling/finished-code/aggr-styling/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/06-styling/finished-code/aggr-styling/public/logo192.png -------------------------------------------------------------------------------- /06-styling/finished-code/aggr-styling/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/06-styling/finished-code/aggr-styling/public/logo512.png -------------------------------------------------------------------------------- /06-styling/finished-code/aggr-styling/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /06-styling/finished-code/aggr-styling/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /06-styling/finished-code/aggr-styling/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | 15 | .ag-green { 16 | background-color: lightgreen !important; 17 | } 18 | 19 | .ag-amber { 20 | background-color: coral !important; 21 | } 22 | 23 | .ag-red { 24 | background-color: darkred !important; 25 | color: white; 26 | } 27 | 28 | .test { 29 | font-size: 18px; 30 | } 31 | 32 | .ag-row-hover { 33 | background-color: #dfdfff !important; 34 | } 35 | 36 | .ag-column-hover { 37 | background-color: #dfffdf; 38 | } 39 | -------------------------------------------------------------------------------- /06-styling/finished-code/aggr-styling/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /06-styling/starting-points/aggr-styling/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .vscode/ -------------------------------------------------------------------------------- /06-styling/starting-points/aggr-styling/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /06-styling/starting-points/aggr-styling/data/generate-data: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | const DATA_PATH = path.resolve(__dirname, './data.json'); 7 | 8 | async function generate() { 9 | const data = require('./generate.js')(); 10 | await new Promise((resolve, reject) => { 11 | fs.writeFile(DATA_PATH, JSON.stringify(data), error => { 12 | if (error) { 13 | reject(error); 14 | return; 15 | } 16 | resolve(); 17 | }); 18 | }); 19 | } 20 | 21 | module.exports = generate; 22 | 23 | if (require.main === module) { 24 | function main() { 25 | generate().then(() => process.exit(0)); 26 | } 27 | 28 | main(); 29 | } 30 | -------------------------------------------------------------------------------- /06-styling/starting-points/aggr-styling/data/generate.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | const data = { 3 | accounts: [], 4 | }; 5 | 6 | const faker = require("faker"); 7 | 8 | for (let account = 0; account < 500; account++) { 9 | const id = data.accounts.length + 1; 10 | data.accounts.push({ 11 | id, 12 | firstName: faker.name.firstName(), 13 | lastName: faker.name.lastName(), 14 | accountNumber: faker.finance.account(), 15 | dateOpened: faker.date.past(), 16 | accountName: faker.finance.accountName(), 17 | amount: faker.finance.amount(), 18 | }); 19 | } 20 | 21 | return data; 22 | }; 23 | -------------------------------------------------------------------------------- /06-styling/starting-points/aggr-styling/data/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1" 3 | } 4 | -------------------------------------------------------------------------------- /06-styling/starting-points/aggr-styling/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.0", 10 | "ag-grid-react": "^22.1.0", 11 | "concurrently": "^5.0.0", 12 | "json-server": "^0.15.1", 13 | "react": "^16.12.0", 14 | "react-dom": "^16.12.0", 15 | "react-scripts": "^3.4.1" 16 | }, 17 | "scripts": { 18 | "start": "concurrently --prefix-colors white.bgBlue,white.bgGreen --names react,json-server --kill-others \"npm run serve:client\" \"npm run serve:server\"", 19 | "serve:client": "react-scripts start", 20 | "serve:server": "json-server --watch data/data.json --routes data/routes.json --port 3001", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "generate": "node ./data/generate-data" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "faker": "^4.1.0" 43 | }, 44 | "proxy": "http://localhost:3001" 45 | } 46 | -------------------------------------------------------------------------------- /06-styling/starting-points/aggr-styling/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/06-styling/starting-points/aggr-styling/public/favicon.ico -------------------------------------------------------------------------------- /06-styling/starting-points/aggr-styling/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 18 | ag-Grid & React 19 | 20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /06-styling/starting-points/aggr-styling/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/06-styling/starting-points/aggr-styling/public/logo192.png -------------------------------------------------------------------------------- /06-styling/starting-points/aggr-styling/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/06-styling/starting-points/aggr-styling/public/logo512.png -------------------------------------------------------------------------------- /06-styling/starting-points/aggr-styling/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /06-styling/starting-points/aggr-styling/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /06-styling/starting-points/aggr-styling/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | 15 | .ag-green { 16 | background-color: lightgreen !important; 17 | } 18 | 19 | .ag-amber { 20 | background-color: coral !important; 21 | } 22 | 23 | .ag-red { 24 | background-color: darkred !important; 25 | color: white; 26 | } 27 | -------------------------------------------------------------------------------- /06-styling/starting-points/aggr-styling/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /07-selection/README.md: -------------------------------------------------------------------------------- 1 | # 07 - Selection 2 | This tutorial is all about selection: row selection, checkbox selection, the selection API, range selection, and fill handles. 3 | 4 | This tutorial uses a project called `aggr-selection` for all but the last two videos. You'll find the starting point code in the `starting-points` folder and the finished code in the `finished-code` folder. 5 | 6 | The remaining two videos use StackBlitz examples: 7 | 8 | - [Range Selection](https://stackblitz.com/edit/ag-grid-react-range-selection) 9 | - [Fill Handle](https://stackblitz.com/edit/ag-grid-react-fill-handle) 10 | 11 | ## Helpful Links 12 | 13 | - [ag-Grid docs: Row Selection](https://www.ag-grid.com/javascript-grid-selection/) 14 | - [ag-Grid docs: Range Selection](https://www.ag-grid.com/javascript-grid-range-selection/) 15 | - [ag-Grid docs: Fill Handle](https://www.ag-grid.com/javascript-grid-range-selection-fill-handle/) -------------------------------------------------------------------------------- /07-selection/finished-code/aggr-selection/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .vscode/ -------------------------------------------------------------------------------- /07-selection/finished-code/aggr-selection/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /07-selection/finished-code/aggr-selection/data/generate-data: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | const DATA_PATH = path.resolve(__dirname, './data.json'); 7 | 8 | async function generate() { 9 | const data = require('./generate.js')(); 10 | await new Promise((resolve, reject) => { 11 | fs.writeFile(DATA_PATH, JSON.stringify(data), error => { 12 | if (error) { 13 | reject(error); 14 | return; 15 | } 16 | resolve(); 17 | }); 18 | }); 19 | } 20 | 21 | module.exports = generate; 22 | 23 | if (require.main === module) { 24 | function main() { 25 | generate().then(() => process.exit(0)); 26 | } 27 | 28 | main(); 29 | } 30 | -------------------------------------------------------------------------------- /07-selection/finished-code/aggr-selection/data/generate.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | const data = { 3 | accounts: [], 4 | }; 5 | 6 | const faker = require("faker"); 7 | 8 | for (let account = 0; account < 500; account++) { 9 | const id = data.accounts.length + 1; 10 | data.accounts.push({ 11 | id, 12 | firstName: faker.name.firstName(), 13 | lastName: faker.name.lastName(), 14 | accountNumber: faker.finance.account(), 15 | dateOpened: faker.date.past(), 16 | accountName: faker.finance.accountName(), 17 | amount: faker.finance.amount(), 18 | }); 19 | } 20 | 21 | return data; 22 | }; 23 | -------------------------------------------------------------------------------- /07-selection/finished-code/aggr-selection/data/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1" 3 | } 4 | -------------------------------------------------------------------------------- /07-selection/finished-code/aggr-selection/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.0", 10 | "ag-grid-react": "^22.1.0", 11 | "concurrently": "^5.0.0", 12 | "json-server": "^0.15.1", 13 | "react": "^16.12.0", 14 | "react-dom": "^16.12.0", 15 | "react-scripts": "^3.4.1" 16 | }, 17 | "scripts": { 18 | "start": "concurrently --prefix-colors white.bgBlue,white.bgGreen --names react,json-server --kill-others \"npm run serve:client\" \"npm run serve:server\"", 19 | "serve:client": "react-scripts start", 20 | "serve:server": "json-server --watch data/data.json --routes data/routes.json --port 3001", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "generate": "node ./data/generate-data" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "faker": "^4.1.0" 43 | }, 44 | "proxy": "http://localhost:3001" 45 | } 46 | -------------------------------------------------------------------------------- /07-selection/finished-code/aggr-selection/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/07-selection/finished-code/aggr-selection/public/favicon.ico -------------------------------------------------------------------------------- /07-selection/finished-code/aggr-selection/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 18 | ag-Grid & React 19 | 20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /07-selection/finished-code/aggr-selection/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/07-selection/finished-code/aggr-selection/public/logo192.png -------------------------------------------------------------------------------- /07-selection/finished-code/aggr-selection/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/07-selection/finished-code/aggr-selection/public/logo512.png -------------------------------------------------------------------------------- /07-selection/finished-code/aggr-selection/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /07-selection/finished-code/aggr-selection/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /07-selection/finished-code/aggr-selection/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | 15 | .ag-green { 16 | background-color: lightgreen !important; 17 | } 18 | 19 | .ag-amber { 20 | background-color: coral !important; 21 | } 22 | 23 | .ag-red { 24 | background-color: darkred !important; 25 | color: white; 26 | } 27 | -------------------------------------------------------------------------------- /07-selection/finished-code/aggr-selection/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /07-selection/starting-points/aggr-selection/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .vscode/ -------------------------------------------------------------------------------- /07-selection/starting-points/aggr-selection/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /07-selection/starting-points/aggr-selection/data/generate-data: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | const DATA_PATH = path.resolve(__dirname, './data.json'); 7 | 8 | async function generate() { 9 | const data = require('./generate.js')(); 10 | await new Promise((resolve, reject) => { 11 | fs.writeFile(DATA_PATH, JSON.stringify(data), error => { 12 | if (error) { 13 | reject(error); 14 | return; 15 | } 16 | resolve(); 17 | }); 18 | }); 19 | } 20 | 21 | module.exports = generate; 22 | 23 | if (require.main === module) { 24 | function main() { 25 | generate().then(() => process.exit(0)); 26 | } 27 | 28 | main(); 29 | } 30 | -------------------------------------------------------------------------------- /07-selection/starting-points/aggr-selection/data/generate.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | const data = { 3 | accounts: [], 4 | }; 5 | 6 | const faker = require("faker"); 7 | 8 | for (let account = 0; account < 500; account++) { 9 | const id = data.accounts.length + 1; 10 | data.accounts.push({ 11 | id, 12 | firstName: faker.name.firstName(), 13 | lastName: faker.name.lastName(), 14 | accountNumber: faker.finance.account(), 15 | dateOpened: faker.date.past(), 16 | accountName: faker.finance.accountName(), 17 | amount: faker.finance.amount(), 18 | }); 19 | } 20 | 21 | return data; 22 | }; 23 | -------------------------------------------------------------------------------- /07-selection/starting-points/aggr-selection/data/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1" 3 | } 4 | -------------------------------------------------------------------------------- /07-selection/starting-points/aggr-selection/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.0", 10 | "ag-grid-react": "^22.1.0", 11 | "concurrently": "^5.0.0", 12 | "json-server": "^0.15.1", 13 | "react": "^16.12.0", 14 | "react-dom": "^16.12.0", 15 | "react-scripts": "^3.4.1" 16 | }, 17 | "scripts": { 18 | "start": "concurrently --prefix-colors white.bgBlue,white.bgGreen --names react,json-server --kill-others \"npm run serve:client\" \"npm run serve:server\"", 19 | "serve:client": "react-scripts start", 20 | "serve:server": "json-server --watch data/data.json --routes data/routes.json --port 3001", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "generate": "node ./data/generate-data" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "faker": "^4.1.0" 43 | }, 44 | "proxy": "http://localhost:3001" 45 | } 46 | -------------------------------------------------------------------------------- /07-selection/starting-points/aggr-selection/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/07-selection/starting-points/aggr-selection/public/favicon.ico -------------------------------------------------------------------------------- /07-selection/starting-points/aggr-selection/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 18 | ag-Grid & React 19 | 20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /07-selection/starting-points/aggr-selection/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/07-selection/starting-points/aggr-selection/public/logo192.png -------------------------------------------------------------------------------- /07-selection/starting-points/aggr-selection/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/07-selection/starting-points/aggr-selection/public/logo512.png -------------------------------------------------------------------------------- /07-selection/starting-points/aggr-selection/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /07-selection/starting-points/aggr-selection/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /07-selection/starting-points/aggr-selection/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | 15 | .ag-green { 16 | background-color: lightgreen !important; 17 | } 18 | 19 | .ag-amber { 20 | background-color: coral !important; 21 | } 22 | 23 | .ag-red { 24 | background-color: darkred !important; 25 | color: white; 26 | } 27 | -------------------------------------------------------------------------------- /07-selection/starting-points/aggr-selection/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /08-cell-editing/README.md: -------------------------------------------------------------------------------- 1 | # 08 - Cell Editing 2 | This tutorial is all about cell editing: starting and stopping editing, provided cell editors, undo and redo of edits, the cell editing API, and custom cell editors. 3 | 4 | This tutorial uses a project called `aggr-cell-editing` for all of the videos. You'll find the starting point code in the `starting-points` folder and the finished code in the `finished-code` folder. 5 | 6 | ## Helpful Links 7 | 8 | - [ag-Grid docs: Cell Editing](https://ag-grid.com/javascript-grid-cell-editing/) 9 | - [ag-Grid docs: Provided Cell Editors](https://ag-grid.com/javascript-grid-provided-cell-editors/) 10 | - [ag-Grid docs: Undo/Redo Edits](https://ag-grid.com/javascript-grid-undo-redo-edits/) 11 | - [ag-Grid docs: Editing API](https://ag-grid.com/javascript-grid-cell-editing/#editing-api) 12 | - [ag-Grid docs: Cell Editing Using React Components](https://ag-grid.com/javascript-grid-cell-editor/#example-cell-editing-using-react-components) -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .vscode/ -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/data/generate-data: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | const DATA_PATH = path.resolve(__dirname, './data.json'); 7 | 8 | async function generate() { 9 | const data = require('./generate.js')(); 10 | await new Promise((resolve, reject) => { 11 | fs.writeFile(DATA_PATH, JSON.stringify(data), error => { 12 | if (error) { 13 | reject(error); 14 | return; 15 | } 16 | resolve(); 17 | }); 18 | }); 19 | } 20 | 21 | module.exports = generate; 22 | 23 | if (require.main === module) { 24 | function main() { 25 | generate().then(() => process.exit(0)); 26 | } 27 | 28 | main(); 29 | } 30 | -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/data/generate.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | const data = { 3 | accounts: [], 4 | }; 5 | 6 | const faker = require("faker"); 7 | 8 | for (let account = 0; account < 500; account++) { 9 | const id = data.accounts.length + 1; 10 | data.accounts.push({ 11 | id, 12 | firstName: faker.name.firstName(), 13 | lastName: faker.name.lastName(), 14 | accountNumber: faker.finance.account(), 15 | dateOpened: faker.date.past(), 16 | accountName: faker.finance.accountName(), 17 | amount: faker.finance.amount(), 18 | }); 19 | } 20 | 21 | return data; 22 | }; 23 | -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/data/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1" 3 | } 4 | -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.0", 10 | "ag-grid-react": "^22.1.0", 11 | "concurrently": "^5.0.0", 12 | "json-server": "^0.15.1", 13 | "react": "^16.12.0", 14 | "react-dom": "^16.12.0", 15 | "react-scripts": "^3.4.1" 16 | }, 17 | "scripts": { 18 | "start": "concurrently --prefix-colors white.bgBlue,white.bgGreen --names react,json-server --kill-others \"npm run serve:client\" \"npm run serve:server\"", 19 | "serve:client": "react-scripts start", 20 | "serve:server": "json-server --watch data/data.json --routes data/routes.json --port 3001", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "generate": "node ./data/generate-data" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "faker": "^4.1.0" 43 | }, 44 | "proxy": "http://localhost:3001" 45 | } 46 | -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/08-cell-editing/finished-code/aggr-cell-editing/public/favicon.ico -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 18 | ag-Grid & React 19 | 20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/08-cell-editing/finished-code/aggr-cell-editing/public/logo192.png -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/08-cell-editing/finished-code/aggr-cell-editing/public/logo512.png -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/src/NumericCellEditor.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | deleteOrBackspace, 4 | isKeyPressedNumeric, 5 | isLeftOrRight, 6 | KEY_BACKSPACE, 7 | KEY_DELETE, 8 | } from "./helpers"; 9 | 10 | class NumericCellEditor extends Component { 11 | constructor(props) { 12 | super(props); 13 | this.editorRef = React.createRef(); 14 | let initialState = 15 | props.keyPress === KEY_BACKSPACE || props.keyPress === KEY_DELETE 16 | ? "" 17 | : props.value; 18 | this.state = { value: initialState }; 19 | } 20 | 21 | afterGuiAttached() { 22 | this.editorRef.current.focus(); 23 | } 24 | 25 | getValue() { 26 | return this.state.value; 27 | } 28 | 29 | handleChange = (event) => { 30 | this.setState({ value: event.target.value }); 31 | }; 32 | 33 | onKeyDown = (event) => { 34 | if (isLeftOrRight(event) || deleteOrBackspace(event)) { 35 | event.stopPropagation(); 36 | return; 37 | } 38 | 39 | if (!isKeyPressedNumeric(event) && event.preventDefault) { 40 | event.preventDefault(); 41 | } 42 | }; 43 | 44 | render() { 45 | return ( 46 | 53 | ); 54 | } 55 | } 56 | 57 | export default NumericCellEditor; 58 | -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/src/helpers.js: -------------------------------------------------------------------------------- 1 | export const KEY_BACKSPACE = 8; 2 | export const KEY_DELETE = 46; 3 | 4 | const getCharCodeFromEvent = (event) => { 5 | event = event || window.event; 6 | return typeof event.which === "undefined" ? event.keyCode : event.which; 7 | }; 8 | 9 | const isCharNumeric = (charStr) => { 10 | return !!/\d/.test(charStr); 11 | }; 12 | 13 | export const isLeftOrRight = (event) => { 14 | return [37, 39].indexOf(event.keyCode) > -1; 15 | }; 16 | 17 | export const deleteOrBackspace = (event) => { 18 | return [KEY_DELETE, KEY_BACKSPACE].indexOf(event.keyCode) > -1; 19 | }; 20 | 21 | export const isKeyPressedNumeric = (event) => { 22 | const charCode = getCharCodeFromEvent(event); 23 | const charStr = event.key ? event.key : String.fromCharCode(charCode); 24 | return isCharNumeric(charStr); 25 | }; 26 | -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | 15 | .ag-green { 16 | background-color: lightgreen !important; 17 | } 18 | 19 | .ag-amber { 20 | background-color: coral !important; 21 | } 22 | 23 | .ag-red { 24 | background-color: darkred !important; 25 | color: white; 26 | } 27 | -------------------------------------------------------------------------------- /08-cell-editing/finished-code/aggr-cell-editing/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .vscode/ -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/data/generate-data: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | const DATA_PATH = path.resolve(__dirname, './data.json'); 7 | 8 | async function generate() { 9 | const data = require('./generate.js')(); 10 | await new Promise((resolve, reject) => { 11 | fs.writeFile(DATA_PATH, JSON.stringify(data), error => { 12 | if (error) { 13 | reject(error); 14 | return; 15 | } 16 | resolve(); 17 | }); 18 | }); 19 | } 20 | 21 | module.exports = generate; 22 | 23 | if (require.main === module) { 24 | function main() { 25 | generate().then(() => process.exit(0)); 26 | } 27 | 28 | main(); 29 | } 30 | -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/data/generate.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | const data = { 3 | accounts: [], 4 | }; 5 | 6 | const faker = require("faker"); 7 | 8 | for (let account = 0; account < 500; account++) { 9 | const id = data.accounts.length + 1; 10 | data.accounts.push({ 11 | id, 12 | firstName: faker.name.firstName(), 13 | lastName: faker.name.lastName(), 14 | accountNumber: faker.finance.account(), 15 | dateOpened: faker.date.past(), 16 | accountName: faker.finance.accountName(), 17 | amount: faker.finance.amount(), 18 | }); 19 | } 20 | 21 | return data; 22 | }; 23 | -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/data/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1" 3 | } 4 | -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aggr-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "ag-grid-community": "^22.1.0", 10 | "ag-grid-react": "^22.1.0", 11 | "concurrently": "^5.0.0", 12 | "json-server": "^0.15.1", 13 | "react": "^16.12.0", 14 | "react-dom": "^16.12.0", 15 | "react-scripts": "^3.4.1" 16 | }, 17 | "scripts": { 18 | "start": "concurrently --prefix-colors white.bgBlue,white.bgGreen --names react,json-server --kill-others \"npm run serve:client\" \"npm run serve:server\"", 19 | "serve:client": "react-scripts start", 20 | "serve:server": "json-server --watch data/data.json --routes data/routes.json --port 3001", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "generate": "node ./data/generate-data" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "faker": "^4.1.0" 43 | }, 44 | "proxy": "http://localhost:3001" 45 | } 46 | -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/08-cell-editing/starting-points/aggr-cell-editing/public/favicon.ico -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 18 | ag-Grid & React 19 | 20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/08-cell-editing/starting-points/aggr-cell-editing/public/logo192.png -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samjulien/ag-grid-react-thinkster/91385a61907aa0113fa68ccb53b1ac80b318a759/08-cell-editing/starting-points/aggr-cell-editing/public/logo512.png -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/src/helpers.js: -------------------------------------------------------------------------------- 1 | export const KEY_BACKSPACE = 8; 2 | export const KEY_DELETE = 46; 3 | 4 | const getCharCodeFromEvent = (event) => { 5 | event = event || window.event; 6 | return typeof event.which === "undefined" ? event.keyCode : event.which; 7 | }; 8 | 9 | const isCharNumeric = (charStr) => { 10 | return !!/\d/.test(charStr); 11 | }; 12 | 13 | export const isLeftOrRight = (event) => { 14 | return [37, 39].indexOf(event.keyCode) > -1; 15 | }; 16 | 17 | export const deleteOrBackspace = (event) => { 18 | return [KEY_DELETE, KEY_BACKSPACE].indexOf(event.keyCode) > -1; 19 | }; 20 | 21 | export const isKeyPressedNumeric = (event) => { 22 | const charCode = getCharCodeFromEvent(event); 23 | const charStr = event.key ? event.key : String.fromCharCode(charCode); 24 | return isCharNumeric(charStr); 25 | }; 26 | -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | 15 | .ag-green { 16 | background-color: lightgreen !important; 17 | } 18 | 19 | .ag-amber { 20 | background-color: coral !important; 21 | } 22 | 23 | .ag-red { 24 | background-color: darkred !important; 25 | color: white; 26 | } 27 | -------------------------------------------------------------------------------- /08-cell-editing/starting-points/aggr-cell-editing/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Using ag-Grid with React (Thinkster.io) 2 | Hi there! [JavaScript teacher Sam Julien](http://www.samjulien.com/) here. You've reached the repo for all of the demos and sample code in my series of ag-Grid tutorials on [Thinkster.io](https://thinkster.io/). 3 | 4 | The repo is organized in order of the tutorials. Good luck and feel free to [reach out to me on Twitter](https://twitter.com/samjulien) if you need anything! 5 | 6 | ## Table of Contents 7 | 8 | [01 - Getting Started with ag-Grid Community and React](./01-getting-started)
9 | [02 - Working with Data](./02-data)
10 | [03 - Columns](./03-columns)
11 | [04 - Filters](./04-filters)
12 | [05 - Rows](./05-rows)
13 | [06 - Styling](./06-styling)
14 | [07 - Selection](./07-selection)
15 | [08 - Cell Editing](./08-cell-editing) 16 | 17 | --------------------------------------------------------------------------------