Docs
API
  • config

    Object

    There are several theme in FancyGrid: blue, bootstrap, dark, default, gray, dark, sand.

    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]