/ag-grid-customise-theme

Example of customising a theme for ag-Grid

Primary LanguageJavaScript

ag-Grid Theme Customisation Examples

The project in this repository showcases how the ag-Grid built-in themes can be customized by overriding Sass variables. An up-to-date table with the variable default values and their function is available at: http://www.ag-grid.com/javascript-grid-styling/#customizing-sass-variables

Usage

  • Clone the project
  • Choose a project:
    • src/vanilla: customising a theme in vanilla JavaScript, including an example of changing the icon font.
    • src/vanilla-svg-icons: an example of using SVG images for icons
    • src/angular: Angular CLI example
    • src/react: create-react-app example
    • src/vue: Vue example
    • v22 compatibility layer examples
      • src/legacy/vanilla: Vanilla JS
      • src/legacy/angular: Angular CLI
      • src/legacy/v22-provided-themes: Demonstration of how to rebuild the deprecated Fresh, Dark, Blue and Bootstrap themes as custom themes on top of ag-theme-base.
  • In the project folder, run npm install && npm start
  • View the project in your browser at http://localhost:8080/.
  • Open the styles.scss file to see how the theme has been customised.