Rating Style

Summary

The Rating Styled Column renders each cell of a numeric column as a row of small icons (e.g. ★★★☆☆)
The fill represents the cell value on a 0..Max scale
Comes with four built-in icon shapes: Star, Heart, Circle, Thumb
Supports partial (half-)icon fills for fractional values, and an optional numeric label

The Rating Styled Column turns a numeric column into a familiar “score out of N” visual.

Each cell shows Max icons; the filled portion reflects the cell value.

Note

Like all Styled Columns, the Rating Style provides a powerful visual without needing to build a custom cell renderer

The Rating Style is a compact, instantly legible style — useful for review scores, satisfaction ratings, risk levels, performance bands, or any column where the numeric value sits on a small ordinal scale.

Caution

Rating Column Styles apply to scalar numeric column only

Deep Dive

Rating vs Bullet Chart vs Range Bar: Which Styled Column should I use?

In addition to the Rating Style, AdapTable provides 2 similar Styled Columns: Bullet Chart and Range Bar.

All three styles communicate where a value sits on a numeric scale, but they answer slightly different questions:

	Rating Column	Bullet Chart	Range Bar
Primary question	"what's the score out of N?"	"how does this value compare to a target and bands?"	"where does this value sit between Min & Max?"
Scale endpoints	`0..Max` (whole-icon resolution)	`CellRanges` (or column min/max)	`Min` / `Max` (numbers, columns or aggregates)
Comparative marker	implicit (filled vs empty icons)	first-class `TargetProperties` (and per-row targets)	optional `Reference` (with marker)
Best for	review-style ordinal scales	KPIs with a defined target and qualitative bands	values on a quantitative interval

Anatomy

A Rating cell consists of 4 elements:

A horizontal row of icons (all the same shape)
A filled portion (left → right) representing the cell value
An empty portion (the remaining icons) drawn as a subtle background, so the maximum is always visible
Optionally, the formatted cell value rendered alongside the icons

Note

The cell value is interpreted in the same numeric units as Max (which sets number of icons), i.e. it is not scaled
For example, with Max: 5 and a cell value of 4, the renderer draws roughly four filled stars

Hint

To map a 0–10 score onto five icons, either set Max: 10 (10 icons) or pre-divide via a Calculated Column (value / 2)

Rating Icon

The Icon displayed in the Rating Style is highly configurable.

Icon Shapes

The Icon property selects which glyph is repeated across the row.

AdapTable provides 4 possible shapes for the Icon:

Value	Description	Typically Used
`'Star'` (default)	Five-pointed star	generic ratings
`'Heart'`	Rounded heart	wishlist / like-style ratings
`'Circle'`	Filled circle	Apple/iOS scoring style
`'Thumb'`	Thumbs-up	binary-ish ratings (thumbs-up count)

Star (default)

The default Star shape with Max: 5 is the usual choice for review-style scores out of five.

Rating Style: Stars

Fork Fork

Product Rating — Icon: 'Star', Max: 5, AllowHalf: true (e.g. 3.5 shows three full stars and one half-filled)
Show Value and tooltip with cell value and percentage of Max enabled
Includes a 0 row (empty stars) and values above 5 (fully filled)

Other shapes

Besides Star, AdapTable provides Heart, Circle and Thumb — the same RatingStyle API applies; only Icon (and usually Max) change.

Heart — use when the rating should read more like a “like” or satisfaction score than a generic star row
Circle — use for a compact dot row (often seen in app-store / iOS-style scores); supports half fills like stars

Rating Style: Other Shapes

Fork Fork

Satisfaction — Icon: 'Heart', Max: 5, whole icons only, pink filled / faded empty colours
Experience — Icon: 'Circle', Max: 5, AllowHalf: true (blue dots), same numeric scale as satisfaction

Filled and Empty Colours

Users are able to configure the colour for both filled and empty icons, using 2 properties:

Property	Default Value
`FilledColor`	Theme's warm amber (`var(--ab-color-warn, #f5a623)`)
`EmptyColor`	Low-opacity tint of the current text colour, so the empty icons remain visible without competing with the filled ones

Note

Both these properties can accept any CSS colour, including CSS variables
Using var(--ab-color-…) makes the Rating follow the active Theme

Partial (Half) Icons

AdapTable allows you to configure how fractional values are rendered in the Ratings Style.

This is done via the AllowHalf boolean property:

Value	Description	How it Renders 3.5 out of 5
`true` (default)	Decimal part fills a fraction of the next icon	3 full icons + 1 half-filled + 1 empty
`false`	Clamped value is rounded with `Math.round` before drawing, so only whole icons appear	4 full icons + 1 empty (`Math.round(3.5)` → `4`)

Hint

Half-icon rendering looks crisp at any Size because the renderer uses an SVG clip rather than an opacity trick

Rating Style: Allow Half

Fork Fork

This demo uses two columns with identical values and config (Max: 5, stars, value shown beside icons) to illustrate rounding vs partial fill:
- Half icons — AllowHalf: true (3.5 → three full + one half + one empty)
- Whole icons — AllowHalf: false (3.5 → four full + one empty)

Rating Cell

Like with other Styled Columns, its possible to configure how to render the Cell that contains the Rating Icon.

Cell Style

The cell behind the icons is fully styleable (back colour, border, border radius, etc.) using the Cell property.

Caution

When set, the Cell slice takes precedence over any matching Format Column for these properties

Rating Style: Cell Style

Fork Fork

This example shows how to style the cell containing a Rating Style (for which we use the Thumbs up Shape)
The Cell — has a light green background and dark green border to match the icon row which has a dark green fill and a white partial fill
We also configure the Style to show the Cell Value

Cell Value

It is possible to render the (numeric) cell value next to the icons (e.g. ★★★★☆ 4).

This is done by setting the ShowValue property to true.

Note

The label uses the grid’s formatValue when AG Grid supplies it, otherwise String(value)

The ToolTipText property controls the AG Grid cell tooltip (similar to other numeric Styled Columns).

You can configure whether to show the Cell's value, a percentage (or both):

Token	Content
`'CellValue'`	The cell value as a string
`'PercentageValue'`	The cell value as a whole-number percent (e.g. `4` with `Max: 5` → `80%`)

Note

When both properties are enabled, they appear as 4 (80%)
This is not the column min/max percentage used by Gradient or Percent Bar — it is always relative to Max

Empty Cells

AdapTable deals with blank, zero and invalid cells in specific ways as follows:

Cell value	What renders
`null` / `undefined` / non-numeric	Nothing — no icons (not the same as a zero rating)
`0` (or negative, clamped to `0`)	A full row of empty icons (`Max` glyphs, none filled)
`1..Max`	Filled icons per value (with optional half-icon fill)
Above `Max`	Fully filled row

Row Scope

Users can decide which kinds of Rows will include the Rating Style.

Find Out More

See Styled Column Row Scope for details of the types of Rows which can be included / excluded from a Styled Column

Caution

If the current row is excluded (e.g. no Group rows) but the cell has a value, the Grid shows that value as plain text

Defining Rating Styles

Rating Styled Columns are defined as part of the Styled Column Initial State.

Developer Guide

Providing a Rating Style in Styled Column State

const initialState: InitialState = {
  StyledColumn: {
    StyledColumns: [
      {
        Name: 'Customer Score',
        ColumnId: 'customerScore',
        RatingStyle: {
          Icon: 'Star',
          Max: 5,
          Size: 16,
          Gap: 2,
          FilledColor: 'var(--ab-color-warn, #f5a623)',
          EmptyColor: 'color-mix(in srgb, currentColor 22%, transparent)',
          AllowHalf: true,
          ShowValue: true,
          ToolTipText: ['CellValue', 'PercentageValue'],
        },
      },
      {
        Name: 'Would Recommend',
        ColumnId: 'wouldRecommend',
        RatingStyle: {
          Icon: 'Thumb',
          Max: 3,
          Size: 20,
          Gap: 4,
          FilledColor: '#28a745',
          EmptyColor: 'rgba(0, 0, 0, 0.12)',
          AllowHalf: false,
          ShowValue: false,
          ToolTipText: ['PercentageValue'],
          Cell: {
            BackColor: 'var(--ab-color-primary-light, #e8f4fc)',
            BorderRadius: '4px',
          },
        },
      },
    ],
  },
};

Provide ColumnId, Name and add the Style

Each Styled Column needs a ColumnId, a Name, and a RatingStyle object.

The example below defines two numeric columns so you can see different shapes and options side by side.

Style the Icon

Configure 2 properties:

Icon - the shape to use
Max - icon count and the rating cap (in same units as cell value)

(Optional) Tune icon sizing

Set 2 properties

Size (default 14)
Gap -space between icons (default 2)

(Optional) Set Colours and Allow Partial Fill

Set 2 colours - (FilledColor / EmptyColor - via CSS variables for coloured and empty icons
Set AllowHalf to fill half icons (so 3.5 renders a half-filled star)

(Optional) Choose whether to show the numeric cell value

Set ShowValue to true to show the Cell Value beside Icons.

This is the formatted value (e.g. ★★★★☆ 4.2)

(Optional) Display a tooltip)

Use ToolTipText to choose whether to display a Tooltip:

Choose whether to see CellValue PercentageValue or both.

(Optional) Style the cell behind the icons

Configure the Cell property to style the Cell that contains the Icons.

This overrides any styling provided in Format Column.

Creating Rating Styles

Rating Styled Columns can be created at run-time using the Styled Column UI Wizard from:

the Styled Column section in the Settings Panel
Create Rating Column / Edit Rating Style in the Column Menu on a numeric column

UI Step by Step Guide

Creating a Rating Column Style using the Styled Column Wizard

The Wizard guides you through the following steps:

Settings: Name the Column and pick the Type

In the Settings step:

Enter a Name for the Styled Column (must be unique within the Grid)
Pick Rating from the list of Styled Column Types (the wizard header becomes Rating Column)

Scope: Choose the Column and the Rows

The Scope step is shared by every Styled Column. Use it to:

Pick the Column to rate — only numeric columns without an existing Styled Column are listed
Choose which row kinds the rating renders on: Data, Group, Summary and Total

Note

By default Data, Summary and Total are included, and Group rows are excluded — see Row scope.

Style: icon row, colours, sizing, value label and cell chrome

The Style step is a single screen with a live preview (sample value ≈ 70% of Max) that updates as you edit. Until a column is chosen in Scope, the step prompts you to select a column first.

The step is organised into three cards:

Icon
- Max — number of icons drawn and the rating cap (same units as the cell value; no auto-scaling). Leave blank to use the default (5). Must be a positive whole number when set.
- Icon — Star, Heart, Circle or Thumb
- Filled Colour / Empty Colour — theme-aware colour pickers (defaults match the renderer’s amber fill and faded empty icons)
- Icon Size (px) — square size of each icon (minimum 4; default 14)
- Icon Gap (px) — space between adjacent icons (default 2)
- Allow Half Icons — when on (default), fractional values fill part of the next icon; when off, values are rounded to whole icons
Text
- Show Value — when on, displays the formatted cell value beside the icon row
- Tooltip — Cell Value and/or Percentage Value (value ÷ Max; see Tooltip)
Cell — optional box styling (background, border, border radius, etc.) behind the rating; where set, overrides matching Format Column cell-box properties

Note

Two further wizard steps — Tags (when the workspace has tags enabled) and Summary (a read-only review of every previous step, including the live rating preview) — are shared by all AdapTable modules and not specific to Rating Columns.

FAQ

Can a Rating Column show fractional values? Yes. With AllowHalf: true (the default) the renderer fills a fraction of the next icon. Set AllowHalf: false to round to whole icons.

Can I use the Rating Style on a 0–10 score that should still show five stars? Yes, but the value is interpreted in the same units as Max. Either keep Max: 10 (ten icons), or pre-scale via a Calculated Column (value / 2).

What is the difference between an empty cell and a zero rating? An empty or non-numeric cell renders nothing. A numeric 0 renders Max empty icons — the scale is visible but unfilled.

Why do I see plain text on Group rows instead of stars? Those row kinds are excluded in Scope. When the rating renderer does not apply, the cell shows String(value) as plain text. See Row scope.

Can I change the cell background behind the icons? Yes — set RatingStyle.Cell.BackColor (or border / border radius). The Cell slice takes precedence over any Format Column for those properties.

Why does the rating stay coloured in dark mode? The defaults use CSS variables (var(--ab-color-warn, …) with faded currentColor tint) that follow Current Theme. Set explicit colours on FilledColor / EmptyColor if you want pixel-exact control.

What happens if the Styled Column is suspended? When IsSuspended is true, AdapTable stops using the rating renderer for that column.

PreviousBullet Chart Style NextRange Bar Style