DataViewsJS allows you to define columns when the grid is initialized. You can choose the columns and the order in which they appear. You can even set the properties for each column, such as column width, caption, visibility, and so on.

DataViewsJS also allows you to use a '*' star that enables the selected column to stretch and fill the available width of the grid. In the following example code, '*' is specified for the Country field and '2*' for the Date field, which means the Date field stretches to twice the width of the Country field to fill the available grid space.

Sample Code

var columns = [
  {
    id: 'id',
    caption: 'ID',
    dataField: 'id',
    width: isMobile ? 30 : 60,
  },
  {
    id: 'date',
    caption: 'Date',
    dataField: 'date',
    width: 120,
  },
  {
    id: 'amount',
    caption: 'Amount',
    dataField: 'amount',
    width: isMobile ? 60 : 120,
  },
  {
    id: 'country',
    caption: 'Country',
    dataField: 'country',
    width: '*',
  },
  {
    id: 'active',
    dataField: 'active',
    visible: false,
  },
];