{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/flashing-cells/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid can flash cells to highlight data changes. This is a great visual indicator to users of the grid who want data changes to be noticed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To enable cell flashing on data changes for a particular column, set the attribute "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enableCellChangeFlash=true"}]},{"type":"text","value":" on the column definition."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also explicitly flash cells using the grid API "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flashCells(params)"}]},{"type":"text","value":". The params takes a list of columns and rows to flash, the flashDelay and the fadeDelay values e.g. to flash one cell pass in one column and one row that identifies that cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"refresh","names":"[\"flashCells\"]"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates cell flashing. The following can be noted:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"All columns have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enableCellChangeFlash=true"}]},{"type":"text","value":" so changes to the columns values will flash."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Update Some Data"}]},{"type":"text","value":" will update a bunch of data. The grid will then flash the cells where data has changed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Flash One Cell"}]},{"type":"text","value":" provides the API "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flashCells()"}]},{"type":"text","value":" with one column and one row to flash one cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Flash Two Rows"}]},{"type":"text","value":" provides the API "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flashCells()"}]},{"type":"text","value":" with two row nodes only to flash the two rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Flash Two Columns"}]},{"type":"text","value":" provides the API "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flashCells()"}]},{"type":"text","value":" with two columns only to flash the two columns."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Flashing Data Changes","name":"flashing-data-changes","type":"generated","options":"{  }"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"how-flashing-works","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#how-flashing-works","ariaLabel":"how flashing works permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"How Flashing Works"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each time the call value is changed, the grid adds the CSS class "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-cell-data-changed"}]},{"type":"text","value":" for 500ms by default, and then then CSS class "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-cell-data-changed-animation"}]},{"type":"text","value":" for 1,000ms by default. The grid provided themes use this to apply a background color."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to override the flash background color, this has to be done by overriding the relevant CSS class. There are two ways to change how long a cell remains \"flashed\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Change the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellFlashDelay"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellFadeDelay"}]},{"type":"text","value":" configs in the gridOptions"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flashCells()"}]},{"type":"text","value":", pass the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flashDelay"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fadeDelay"}]},{"type":"text","value":" values (in milliseconds) as params."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates flashing delay changes. The following can be noted:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellFlashDelay"}]},{"type":"text","value":" value has been changed to 2000ms, so cells will remain in their \"flashed\" state for 2 seconds."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellFadeDelay"}]},{"type":"text","value":" value has been changed to 500ms, so the fading animation will happen faster than what it normally would (1 second)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Update Some Data"}]},{"type":"text","value":" will update some data to demonstrate the changes mentioned above."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Flash Two Rows"}]},{"type":"text","value":" will pass a custom "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flashDelay"}]},{"type":"text","value":" of 3000ms and a custom "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fadeDelay"}]},{"type":"text","value":" delay of 2000ms to demonstrate default values can be overridden."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The example demonstrates how to change the default colour of the flash using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"--ag-value-change-value-highlight-background-color"}]},{"type":"text","value":" CSS variable."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Changing Flashing Delay","name":"flashing-delay-changes","type":"generated","options":"{  }"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"filtering--aggregations","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#filtering--aggregations","ariaLabel":"filtering  aggregations permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Filtering & Aggregations"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"One exception to the above is changes due to filtering. If you are "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/grouping/"},"children":[{"type":"text","value":"Row Grouping"}]},{"type":"text","value":" the data with "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/aggregation/"},"children":[{"type":"text","value":"Aggregations"}]},{"type":"text","value":", then the aggregated values will change as filtering adds and removes rows contained within the groups. It typically doesn't make sense to flash these changes when it's due to a filter change, as filtering would impact many (possibly all) cells at once, thus not usefully bringing the users attention to any particular cell. If you do not like this exception and would like to flash changes even when it's the result of a filter change, then set grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"allowShowChangeAfterFilter=true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"flashing-cells-vs-custom-cell-renderers","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#flashing-cells-vs-custom-cell-renderers","ariaLabel":"flashing cells vs custom cell renderers permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Flashing Cells vs Custom Cell Renderers"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Flashing cells is a simple and quick way to visually show to the user that the data has changed. It is also possible to have more intelligent animations by putting animations into custom "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/component-cell-renderer/"},"children":[{"type":"text","value":"Cell Renderers"}]},{"type":"text","value":". Cell Renderers have a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"refresh"}]},{"type":"text","value":" method that gets called when data changes, allowing custom animations to highlight data changes."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid comes with two such Cell Renderers for showing data changes which are detailed in the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/change-cell-renderers/"},"children":[{"type":"text","value":"Change Cell Renderers"}]},{"type":"text","value":" section."}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Flashing Cells","version":null,"enterprise":null,"description":null},"headings":[{"id":"how-flashing-works","depth":2,"value":"How Flashing Works"},{"id":"filtering--aggregations","depth":2,"value":"Filtering & Aggregations"},{"id":"flashing-cells-vs-custom-cell-renderers","depth":2,"value":"Flashing Cells vs Custom Cell Renderers"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"react","srcPath":"/flashing-cells","pageName":"flashing-cells"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}