AdapTable Version:

Framework:

Styled Columns in AdapTable

Summary

AdapTable provides 4 Styled Columns which render a Column with a complex Style:
- Gradient Column
- Percent Bar
- Badge
- Sparkline Column

Styled Columns enable Users to visualise the data in a given column in sophisticated and powerful ways.

They are designed to enable complicated styles to be defined with just a few clicks / properties, while providing a very striking visual effect. They are designed to enable complicated styles to be defined with just a few clicks / properties, while providing a very striking visual effect.

There are 4 Styled Columns provided by AdapTable:

Styled Column	Column Data Type	Description
Gradient Column	Numeric	Shows Cell's values as a Gradient
Percent Bar	Numeric	Creates a bar in Column, where width is based on cell value
Badge	Numeric & String	Renders Badges in Column (with optional Icons)
Sparkline	Numeric Array	Renders a Sparkline Chart in each Column cell

Note

The Checkbox Column Style was removed in Version 16 when AG Grid v.30 provided similar functionality natively

Deep Dive

How Styled Columns Work in AdapTable

Styled Columns

Fork Fork

This example shows the 4 different Styled Columns provided by AdapTable (see other pages in this section for more information):s
- Name and Closed Issues use the Badge Style
- Issue Change and Open PRs use the Gradient Style
- Github Stars and Closed PRs display a Percent Bar Style
- History - Line and History - Area display a Sparkline Column

Expand to see the Styled Column Definitions

StyledColumn: {
  StyledColumns: [
    {
      ColumnId: 'name',
      BadgeStyle: {
        Badges: [
          {
            Style: {
              BackColor: '#D3D3D3',
              BorderRadius: 6,
            },
          },
        ],
      },
    },
    {
      ColumnId: 'github_stars',
      PercentBarStyle: {
        RangeValueType: 'Number',
        CellRanges: [
          {
            Min: 0,
            Max: 10000,
            Color: 'red',
          },
          {
            Min: 10000,
            Max: 100000,
            Color: 'orange',
          },
          {
            Min: 100000,
            Max: 191435,
            Color: 'green',
          },
        ],
        BackColor: '#d3d3d3',
      },
    },
    {
      ColumnId: 'week_issue_change',
      GradientStyle: {
        CellRanges: [
          {
            Min: 'Col-Min',
            Max: 0,
            Color: '#ff0000',
            ReverseGradient: true,
          },
          {
            Min: 1,
            Max: 'Col-Max',
            Color: '#378805',
          },
        ],
      },
    },
    {
      ColumnId: 'historyLine',
      SparkLineStyle: {
        options: {
          type: 'line',
          line: {
            stroke: 'rgb(124, 255, 178)',
            strokeWidth: 2,
          },
          padding: {
            top: 5,
            bottom: 5,
          },
          marker: {
            size: 3,
            shape: 'diamond',
          },
        },
      },
    },
    {
      ColumnId: 'open_pr_count',
      GradientStyle: {
        CellRanges: [
          {
            Min: 0,
            Max: 254,
            Color: '#b042ff',
          },
        ],
      },
    },
    {
      ColumnId: 'closed_pr_count',
      PercentBarStyle: {
        RangeValueType: 'Number',
        CellRanges: [
          {
            Min: 0,
            Max: 21706,
            Color: 'purple',
          },
        ],
        CellText: ['PercentageValue'],
      },
    },
    {
      ColumnId: 'historyArea',
      SparkLineStyle: {
        options: {
          type: 'area',
          fill: 'rgba(216, 204, 235, 0.3)',
          line: {
            stroke: 'rgb(119,77,185)',
          },
          axis: {
            stroke: 'rgb(204, 204, 235)',
          },
        },
      },
    },
    {
      ColumnId: 'closed_issues_count',
      BadgeStyle: {
        Badges: [
          {
            Predicate: {
              PredicateId: 'LessThan',
              Inputs: [1000],
            },
            Icon: {
              name: 'alert',
            },
            Style: {
              BackColor: 'Red',
              ForeColor: 'white',
              BorderRadius: 6,
            },
          },
          {
            Predicate: {
              PredicateId: 'LessThan',
              Inputs: [10000],
            },
            Icon: {
              name: 'flag',
            },
            Style: {
              BackColor: 'Orange',
              ForeColor: 'white',
              BorderRadius: 6,
            },
          },
          {
            Style: {
              BackColor: 'Green',
              ForeColor: 'white',
              BorderRadius: 6,
            },
            Icon: {
              name: 'checked',
            },
          },
        ],
      },
    },
  ],
}

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Styled Columns',
  initialState: {
    Dashboard: {
      ModuleButtons: ['StyledColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'StyledColumn',
      Layouts: [
        {
          Name: 'StyledColumn',
          ColumnSorts: [
            {
              ColumnId: 'week_issue_change',
              SortOrder: 'Asc',
            },
          ],
          TableColumns: [
            'name',
            'github_stars',
            'week_issue_change',
            'historyLine',
            'open_pr_count',
            'closed_pr_count',
            'historyArea',
            'closed_issues_count',
            'language',
            'updated_at',
            'pushed_at',
            'created_at',
            'license',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'name',
          BadgeStyle: {
            Badges: [
              {
                Style: {
                  BackColor: '#D3D3D3',
                  ForeColor: 'Brown',
                  BorderRadius: 6,
                },
              },
            ],
          },
        },
        {
          ColumnId: 'github_stars',
          PercentBarStyle: {
            RangeValueType: 'Number',
            CellRanges: [
              {
                Min: 0,
                Max: 10000,
                Color: 'red',
              },
              {
                Min: 10000,
                Max: 100000,
                Color: 'orange',
              },
              {
                Min: 100000,
                Max: 191435,
                Color: 'green',
              },
            ],
            BackColor: '#d3d3d3',
          },
        },
        {
          ColumnId: 'week_issue_change',
          GradientStyle: {
            CellRanges: [
              {
                Min: 'Col-Min',
                Max: 0,
                Color: '#ff0000',
                ReverseGradient: true,
              },
              {
                Min: 1,
                Max: 'Col-Max',
                Color: '#378805',
              },
            ],
          },
        },
        {
          ColumnId: 'historyLine',
          SparklineStyle: {
            options: {
              type: 'line',
              stroke: 'rgb(124, 255, 178)',
              strokeWidth: 2,
              padding: {
                top: 5,
                bottom: 5,
              },
              marker: {
                enabled: true,
                size: 3,
                shape: 'diamond',
              },
            },
          },
        },
        {
          ColumnId: 'open_pr_count',
          GradientStyle: {
            CellRanges: [
              {
                Min: 0,
                Max: 254,
                Color: '#b042ff',
              },
            ],
          },
        },
        {
          ColumnId: 'closed_pr_count',
          PercentBarStyle: {
            RangeValueType: 'Number',
            CellRanges: [
              {
                Min: 0,
                Max: 21706,
                Color: 'purple',
              },
            ],
            CellText: ['PercentageValue'],
          },
        },
        {
          ColumnId: 'historyArea',
          SparklineStyle: {
            options: {
              type: 'area',
              fill: 'rgba(216, 204, 235, 0.3)',
              stroke: 'rgb(119,77,185)',
              axis: {
                type: 'category',
                stroke: 'rgb(204, 204, 235)',
              },
            },
          },
        },
        {
          ColumnId: 'closed_issues_count',
          BadgeStyle: {
            Badges: [
              {
                Predicate: {
                  PredicateId: 'LessThan',
                  Inputs: [1000],
                },
                Icon: {
                  name: 'alert',
                },
                Style: {
                  BackColor: 'Red',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
              },
              {
                Predicate: {
                  PredicateId: 'LessThan',
                  Inputs: [10000],
                },
                Icon: {
                  name: 'flag',
                },
                Style: {
                  BackColor: 'Orange',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
              },
              {
                Style: {
                  BackColor: 'Green',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
                Icon: {
                  name: 'checked',
                },
              },
            ],
          },
        },
      ],
    },
  },
};

Gradient Style

The Gradient Style will colour numeric cells by comparing their value against a maximum value.

This maximum value can be the highest value in the Column or in a given Range.

Hint

Gradients can be reversed so the colour is lighter (rather than darker) the nearer it is to the max value
This is particularly useful when styling columns that contain negative numbers

Find Out More

See more informations and demos at Guide to using a Gradient Style

Percent Bar Style

In the Percent Bar Style each cell in the numeric column displays as a relatively sized bar.

Like Gradient Styles, Percent Bar Styles can include multiple Ranges.

Each bar is evaluated using either the cell's actual value or its relative percentage value.

Percent Bars can additionally be styled to show the a back colour, the Cell's Text or a Tooltip.

Find Out More

The Guide to using a Percent Bar contains more information and many demos

Badge Style

In the Badge Style each cell in a column can be rendered as a Badge.

A Badge can include the Cell Text, or an Icon or both.

Rules (using Predicates) can be provided to determine whether the Badge is displayed.

Hint

This allows you to provide multiple different badge styles for a column depending on the cell value

Find Out More

The Guide to using a Badge contains more information and many demos

Sparkline Column

The Sparkline Column style enables columns to be displayed as an AG Grid sparkline.

These are array columns - typically numeric, but objects can also be provided.

Find Out More

See more at Sparkline Column Guide

Using Styled Columns

Run-time users are able to add, edit, share, suspend and delete Styled Columns using the Styled Column section in the Settings Panel.

Find Out More

The Gradient, Percent Bar, Badge and Sparkline Column pages contain instructions on using the respective Wizards

A Menu Item in the Column Menu enables Styled Columns to be created and edited using the relevant wizard.

Deep Dive

Styled Column Menu Entries

UI Entitlements

The UI Entitlements behaviour for Styled Columns is as expected for Full and Hidden Access Levels.

The ReadOnly Entitlement behaviour is that the Styled Columns will still be rendered but Users are not permitted to manage or suspend them.

AdapTable's Styled Columns

(Recorded with AdapTable v16.0)

FAQ

Can I merge Gradient and Percent Bar styles for the same column? No, all Styled Columns are distinct. Gradients and Percent Bars provide different ways to display column data and each has a separate implementation. Although both share common properties and features (like Ranges), you need to choose one or the other. However most Styled Columns will get any format for the Cell Value from any existing Column Formatting.

Why is the Percent Bar (or Gradient Column) not being applied in Aggregated values? Only Badge Styles are rendered in Grouped Rows and Row Summaries. It doesn't make sense to include Percent Bars and Gradient Columns as they are not part of the min / max calculation.

PreviousExpression Conditions NextGradient Style

Framework: