PercentColumn

A column that either displays a basic percent number, a rectangular progress bar, or a circular progress bar.

new Grid({
    appendTo : document.body,

    columns : [
        { type: 'percent', text: 'Progress', data: 'progress' }
    ]
});

Styling

All cells in this column get a b-percent-cell class added.

If mode is set to bar (default), the progress bar element in the cell gets a few special CSS classes added:

If value equals 0, a b-zero CSS class is added to the circle element.
If value is less than lowThreshold, a b-low CSS class is added to the bar element.
If value equals 100, a b-full CSS class is added to the bar element.
If value is > 100, a b-over CSS class is added to the bar element.

If mode is set to circle, the progress circle element in the cell gets a few special CSS classes added:

If value equals 0, a b-empty CSS class is added to the circle element.
If value equals 100, a b-full CSS class is added to the circle element.
If value is > 100, a b-over CSS class is added to the circle element.

Default editor is a NumberField.

Useful configs

Config	Description
mode	Display mode: `bar`, `circle`, or `number`
lowThreshold	Value below which `b-low` CSS class is added
showValue	Show numeric value inside the bar

Configs

Configs are options you supply in a configuration object when creating an instance of this class

lowThreshold : Number0

When below this percentage the bar will have b-low CSS class added. By default, it turns the bar red.

Has a corresponding runtime lowThreshold property.
mode : 'number'/'bar'/'circle'bar
This mode controls the rendering.
- number to render a formatted number value (e.g. 15%)
- circle to render a circular progress bar
- bar to render a plain rectangular progress bar
Has a corresponding runtime mode property.
showValue : Booleanfalse

Set to true to render the number value inside the bar, for example '15%'.

Has a corresponding runtime showValue property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isPercentColumn : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of PercentColumn class, or subclass thereof.

isPercentColumn : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of PercentColumn class, or subclass thereof.
lowThreshold : Number0

When below this percentage the bar will have b-low CSS class added. By default, it turns the bar red.

Has a corresponding lowThreshold config.
mode : 'number'/'bar'/'circle'bar
This mode controls the rendering.
- number to render a formatted number value (e.g. 15%)
- circle to render a circular progress bar
- bar to render a plain rectangular progress bar
Has a corresponding mode config.
showValue : Booleanfalse

Set to true to render the number value inside the bar, for example '15%'.

Has a corresponding showValue config.

Functions

Functions are methods available for calling on the class

defaultRenderer( rendererData )

: DomConfig

Renderer that displays a progress bar in the cell. If you create a custom renderer, and want to include the default markup you can call defaultRenderer from it.

new Grid({
    columns: [
        {
            type: 'percent',
            text : 'Percent',
            field : 'percent',
            renderer({ value }) {
                const domConfig = this.defaultRenderer();

                if (value > 100) {
                    domConfig.className = b-percent-bar-outer over-allocated';
                }

                return domConfig;
            }
        }
    ]
}

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-percent-column-bar-background	bar Percent bar background color (the "empty" part of the bar)
--b-percent-column-bar-border	bar Percent bar border
--b-percent-column-bar-border-radius	bar Percent bar border radius
--b-percent-column-bar-max-height	bar Percent bar max height
--b-percent-column-circle-background	circle Background color for the circle in "circle" mode
--b-percent-column-circle-done-color	circle Color of the filled part of the circle in "circle" mode
--b-percent-column-circle-label-background	circle Background color for the label (center) in "circle" mode
--b-percent-column-circle-label-color	circle Value label's color in "circle" mode
--b-percent-column-circle-label-font-size	circle Label font size in "circle" mode
--b-percent-column-circle-thickness	circle Thickness of the outer circle in "circle" mode
--b-percent-column-fill-background	bar Fill color for the bar (the "filled" part of the bar)
--b-percent-column-low-fill-background	bar Fill color for the bar when value is below `lowThreshold`
--b-percent-column-low-value-color	bar Value label's color when the value is below `lowThreshold`
--b-percent-column-value-color	Value label's color
--b-percent-column-wide-value-color	bar Value label's color when the bar is wide, and label gets moved inside the bar
--b-percent-column-zero-value-color	bar Value label's color when the value is zero

PercentColumn

Styling

Useful configs

See also

Configs

Properties

Functions

CSS variables

Source path

Inheritance tree5

Mixins5

Contents