Appearance

How to apply styles to particular cell or row?
How to change column width?
How to make column width auto adjusted to the cell content?
Suggested Links

Use rich css system to apply specific styles. Each cell, no mater if it is located in the header, body or footer has specific set of css class names.

Class q-grid-{column.type} is selectable by using column type.
Class q-grid-the-{column.key} is selectable by using column id.

How to apply styles to particular cell or row?

Use style callbacks for dynamic class assignments, for the cell style it is possible to pass an object instead of callback in this case object keys will play the role of column key filters. Data rows style callbacks can accept RowDetails and Node classes depending on the q-grid settings.

qgrid
  model()
  .style({
     cell: {
        birthday: (row, column, context) => {
           context.class(`td-${row.name}`, {
              color: `#${row.color}`,
              background: '#3f51b5'
           });
        }
     },
     row: (row, context) => {
        if (row.isActive) {
           context.class('active');
        }
     }
  }):

Pass unique id to context.class method for the appropriate group of styles.

How to change column width?

Use css styles or column width property to setup desired column size using pixels or percentages.

qgrid
   .model();
   .data({
      columns: [
         { key: 'name', type: 'text', width: 100 },
         { key: 'age', type: 'number', width: '100%' },
         { key: 'birthday', type: 'date', widthMode: 'fit-head' }
      ]
   });

If percents are used all columns should have width property for the correct size calculation.

How to make column width auto adjusted to the cell content?

As q-grid utilizes table-layout: fixed right now we doesn’t support auto size out of box, but it can be calculated using TypeScript in user code and applying style API.