{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/change-cell-renderers/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid provides two cell renderers for animating changes to data. They are:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agAnimateShowChangeCellRenderer:"}]},{"type":"text","value":" The previous value is temporarily shown beside the old value with a directional arrow showing increase or decrease in value. The old value is then faded out."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agAnimateSlideCellRenderer:"}]},{"type":"text","value":" The previous value shown in a faded fashion and slides, giving a ghosting effect as the old value fades and slides away."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"example","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example","ariaLabel":"example 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":"Example"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows both types of animation cell renders in action. To test, try the following:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Columns A, B and C are editable."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Columns D and E are updated via clicking the button."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Changes to any of the first 5 columns results in animations in the Total and Average column."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Animation Renderers","name":"animation-renderers","type":"generated","options":"{ \"exampleHeight\": 530 }"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We hope you like the animation cell renderers. However you can also take inspiration from them, and create your own animations in your own cell renderers. Check out our source code on GitHub to see how we implemented these cell renderers for inspiration."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Most AG Grid users prefer the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"animateShowChange"}]},{"type":"text","value":" cell renderer for showing changes in values to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"animateSlide"}]},{"type":"text","value":" one, so if you are trying to impress someone, probably best to show them "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"animateShowChange"}]},{"type":"text","value":" :)"}]}]}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Change Cell Renderers","version":null,"enterprise":null,"description":null},"headings":[{"id":"example","depth":2,"value":"Example"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"react","srcPath":"/change-cell-renderers","pageName":"change-cell-renderers"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}