Styling Cells

Styling cells are defined in the Adaptable state globally, but they will be only applied to the views that list the styled cells in their definition.

const state: AdaptableUserState = {
  //... globalEntities: { availableColumns },
  styledCell: {
    watchers: {
      // id of the styled cell definition
      label: 'Style for github watchers',
      scope: {
        columns: ['github_watchers'],
      },
      format: {
        prefix: '👀 ',
        cellFormatType: 'text',
      },
      style: {
        color: 'tomato',
      },
    },
  },
  view: {
    currentViewId: 'myView',
    views: [
      {
        id: 'myView',
        label: 'My View',
        styledCells: ['stars', 'watchers'],
        columns: [
          { id: 'name' },
          {
            id: 'github_stars',
          },
          {
            id: 'github_watchers',
          },
        ],
      },
    ],
  },
};

Click the Show Code button in the demo below to see the full code.

Note

Styled cells will not be applied to the DataGrid in views that do not list the styled cells in their styledCells property.

Styling cells demo
Fork

This demo styles the github_stars and the github_watchers columns:

  • github_stars column is prefixed with a star emoji and is displayed with 2 fraction digits.
  • github_watchers column is prefixed with another emoji

Order of styling

You can have multiple styled cells applied to the same column/cell. The first styles have higher priority than the ones that come later in the array.

A view definition with more styles applied to the same column
{
  id: 'myView',
  label: 'My View',
  styledCells: ['makeBigStarsRed', 'makeBigStarsBlue','watchersGreaterThan1000Red','watchersGreaterThan1000Blue'],
},

In the above example, let's assume makeBigStarsRed and makeBigStarsBlue are applied to the github_stars column, and watchersGreaterThan1000Red and watchersGreaterThan1000Blue are applied to the github_watchers column.

Due to ther order of the styledCells array items, the makeBigStarsRed will be applied on top of makeBigStarsBlue and watchersGreaterThan1000Red will be applied on top of watchersGreaterThan1000Blue.

In conclusion, styles are applied from right to left, with the rightmost style having the least priority.

PreviousAlertsNextConditional Styles