Server-Side Row Model - Formatting & Styling

Summary

Column Formats, Styles and Conditional Styles operatre normally with the Server-Side Row Model

Column Formats, Styles and Styled Columns all work fully when using the Server-Side Row Model.

They are evaluated in real-time as a cell comes into view.

SSRM - Formatting Columns

Fork Fork

This demo shows styling and formatting applied when using Server-Side Row Model; it contains:
- a Display Format for numeric columns to align to right
- a Style for the Athlete column of bold and italic
- a Column Formatting Condition: rows with more than 1 Swimming Gold medal are blue with white font
- 3 Gradient Styles - applied to Gold, Silver and Bronze coloured according to their name where they have values

Try It Out

Scroll vertically and note as that new data is loaded into the grid, it is automatically styled

import {AdaptableOptions} from '@adaptabletools/adaptable';

export const adaptableOptions: AdaptableOptions = {
  primaryKey: 'id',
  adaptableId: 'SSRM - Formatting',

  initialState: {
    Dashboard: {
      ModuleButtons: ['FormatColumn', 'StyledColumn', 'SettingsPanel'],
    },
    Theme: {
      CurrentTheme: 'dark',
    },
    Layout: {
      CurrentLayout: 'SSRM Layout',
      Layouts: [
        {
          Name: 'SSRM Layout',
          TableColumns: [
            'athlete',
            'gold',
            'silver',
            'bronze',
            'country',
            'sport',
            'year',
          ],
          ColumnSizing: {
            athlete: {Width: 175},
            bronze: {Width: 100},
            country: {Width: 125},
            gold: {Width: 100},
            silver: {Width: 100},
            sport: {Width: 175},
            year: {Width: 115},
          },
        },
      ],
    },

    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-number',
          Scope: {
            DataTypes: ['number'],
          },
          Style: {
            Alignment: 'Right',
          },
        },
        {
          Name: 'formatColumn-athlete',
          Scope: {
            ColumnIds: ['athlete'],
          },
          Style: {
            FontWeight: 'Bold',
            FontStyle: 'Italic',
          },
        },
        {
          Name: 'style-all',
          Scope: {All: true},
          Style: {
            BackColor: '#87cefa',
            ForeColor: '#ffffff',
          },
          Rule: {BooleanExpression: '[gold] > 1 AND [sport]="Swimming" '},
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'gold',
          GradientStyle: {
            CellRanges: [{Min: 0, Max: 10, Color: '#ffee2e'}],
          },
        },
        {
          ColumnId: 'bronze',
          GradientStyle: {
            CellRanges: [{Min: 0, Max: 10, Color: '#ff9500'}],
          },
        },
        {
          ColumnId: 'silver',
          GradientStyle: {
            CellRanges: [{Min: 0, Max: 10, Color: '#d3d3d3'}],
          },
        },
      ],
    },
  },
};

PreviousManaging Rows NextCalculated Columns

Framework: