Docs
API
  • theme

    Mixed

    In FancyGrid there are several themes: blue, bootstrap, dark, default, gray, extra-gray, dark.

    Theme sand is deprecated.

    Example

    
    theme: 'gray'
    
    To override some styling it requires to change size values and css values.

    Example

    
    .fancy-theme-gray .fancy-grid-cell {
      color: gray;
    }
    ...
    theme: {
      name: 'gray',
      config: {
        cellHeight: 92,
        titleHeight: 65
      }
    }
    

    To do absolutely new theme it needs:

    To define it over FancyGrid.defineTheme

    Example

    
    .fancy-theme-my .fancy-grid-cell {
      color: #888888;
    }
    ...
    FancyGrid.defineTheme('my', {
      config: {
        cellHeaderHeight: 30,
        cellHeight: 32,
        titleHeight: 42,
        barHeight: 37,
        bottomScrollHeight: 12
      }
    });
    

    Borders

    The most complex issue about theme is borders widths.
    There are 3 borders params that need to know for that.
    gridBorders, gridWithoutPanelBorders, panelBodyBorders.

    Example

    
    gridBorders: [0,1,1,1],
    gridWithoutPanelBorders: [1,1,1,1],
    panelBodyBorders: [0,0,0,0]
    

    Default

    
    'default'