GridResponsive

Mixin

Simplifies making grid responsive. Supply levels as responsiveLevels config, default levels are:

small

< 400px

medium

< 600px

large

> 600px

Columns can define configs per level to be resized etc:

let grid = new Grid({
  responsiveLevels: {
    small: 300,
    medium: 400,
    large: '*' // everything above 400
  },

  columns: [
    {
      field: 'name',
      text: 'Name',
      responsiveLevels: {
        small: { hidden: true },
        '*': { hidden: false } // all other levels
      }
    },
    { field: 'xx', ... }
  ]
});

It is also possible to give a Grid state object instead of a level width, but in that case the object must contain a levelWidth property:

let grid = new Grid({
  responsiveLevels: {
    small: {
      // Width is required
      levelWidth : 400,
      // Other configs are optional, see GridState for available options
      rowHeight  : 30
    },
    medium : {
      levelWidth : 600,
      rowHeight  : 40
    },
    large: {
      levelWidth : '*', // everything above 300
      rowHeight  : 45
    }
  }
});

See also

• Grid - The Grid widget
• Column - Column configuration