Skip to content
MDC Grid Documentation

Grid Configuration

Grid Configuration is the way through which a user can change the general appearance of the grid. You may change the way the grid looks(color, fontSize, height, width, auto-resizing , loader styles, etc) along with the height and width of the grid or the loader that comes up on the grid. The grid comes with preset values for these configurations which can be overridden.

To set config on the grid, use setGridConfig method on the instance of the grid.

const gridConfig:IGridConfig = {
  minHeight: number;
  maxHeight: number;
  minWidth: number;
  maxWidth: number;
  autoAdjustGridHeight: boolean;
  autoAdjustGridWidth: boolean;
  theme: Partial<IDarkLightGridTheme>;
  loader: {
    className: string;
    type: LoadingIndicatorType | string;
  };
}
myGrid.setConfig(gridConfig);

The parameters of the grid config are:

  • minHeight : The minimum height of the grid. If there is no data in the grid, even then the grid will maintain the given minimum height.

  • maxHeight : The maximum height of the grid. The grid will have a scrollbar after the defined height if the data exceeds the given height.

  • minWidth : The minimum width of the grid. If there is no data in the grid, even then the grid will maintain the given minimum width.

  • maxWidth : The maximum width of the grid. The grid will have a scrollbar after the defined width if the data exceeds the given width.

  • autoAdjustGridHeight : If set to true, then it will have zero height in case of no data and window height in case of large data. In case of false it will take the maximum and minimum height into consideration.

  • autoAdjustGridWidth : If set to true, then it will have zero width in case of no data and window width in case of large data. In case of false it will take the maximum and minimum height into consideration.

  • theme : It is of type IDarkLightGridTheme.

interface IGridThemeGeneral {
  backgroundColor: string;
  fontFamily: string;
  fontSize: number;
  fontWeight: number;
  foregroundColor: string;
  accentColor: string;
  border: number;
  borderColor: string;
  gutter: number;
  wrapperRadius: number;
  widgetRadius: number;
  error: string;
  onError: string;
  success: string;
  onSuccess: string;
  disabled: string;
  padding: number;
}


interface IGridThemeCells {
  textColor: string;
  backgroundColor: string;
  padding: number;
}


interface IGridThemeDimensionsTabs {
  textColor: string;
  backgroundColor: string;
  fontSize: number;
  fontFamily: string;
  fontWeight: number;
}


interface IGridThemeHeaderCells {
  textColor: string;
  backgroundColor: string;
  fontSize: number;
  fontWeight: number;
}


interface IGridThemeIcons {
  size: number;
}


interface IDarkLightGridTheme {
  general: Partial<IGridThemeGeneral>;
  cells: Partial<IGridThemeCells>;
  dimensionsTabs: Partial<IGridThemeDimensionsTabs>;
  headerCells: Partial<IGridThemeHeaderCells>;
  icons: Partial<IGridThemeIcons>;
}
  • loader : Chose from a pre-defined set of loaders available in the grid.
enum LoadingIndicatorType {
  Spinner = "spinner",
  SpinnerRound = "spinner-round",
  Dots = "dots",
  DotsBlinking = "dots-blinking",
  Bars = "bars",
  Continuous = "continuous",
  ProgressCircle = "progress-circle"
}

Pass in a classname to the object to apply styles to the loader shown.