Note this is for Ag-grid 21.2.2, and Cupcake 2.0 View 1.x here

Cupcake ag-Grid theme

It imports scss variables and mixins from cupcake. Variables are overwridden with cupcake variables. And we generate the .ag-theme-cupcake class.

Demo

You can view some various demo examples of different styles supported. View the Demo

How to use.

Note that you still need ag-grid.css.

@import "~ag-grid/dist/styles/ag-grid.css";
@import "~@ipreo/cupcake-ag-grid-theme/dist/ag-theme-cupcake.css";

This version changes to FontAwesome icons - this is a peer dependency you will need the global font-awesome installation. You will also need the svgs in assets/icons.

And there are a few things you will need to adjust in your html file. Add .ag-theme-cupcake class to grid itself.
Also add row and header height options to the grid. This redundant step is required by ag-Grid.

<ag-grid-angular
  ...
  class="ag-theme-cupcake"
  [rowHeight]="32"
  [headerHeight]="32"
  ...
></ag-grid-angular>

If you are using the vanilla js version you will need to define these as well

var gridOptions = {
  headerHeight: 32,
  rowHeight: 32
};

How to modify

Run gulp to start watching scss files
Run npm run demo:start to serve demo app You can also just run npm run static and serve the static demos (the styling and options are exactly the same)

Deploy demo

Running npm run deploy:static will deploy the static demo in /dist to cupcake-ag-grid.surge.sh Note you'll need permission to push their - reach out to Josh Easter and he can add you.

Bugs and Contributing

Please file any issues or requests here!

Note there are many facets to the grid - if we missed styling somewhere please let us know asap!