format.md

id	GridBaseColumn.format
type	Format
default

---

shortDescription

Formats a value before it is displayed in a column cell.

---

See the format section for information on accepted values.

In the following code, the "fixedPoint" format type with a precision of 2 decimal places is applied to column values:

---

jQuery

<!-- tab: index.js -->
$(function() {
    $("#{widgetName}Container").dx{WidgetName}({
        // ...
        columns: [{
            // ...
            format: {
                type: "fixedPoint",
                precision: 2
            }
        }]
    });
});

Angular

<!-- tab: app.component.html -->
<dx-{widget-name} ... >
    <dxi-{widget-name}-column ... >
        <dxo-{widget-name}-format
            type="fixedPoint"
            [precision]="2">
        </dxo-{widget-name}-format>
    </dxi-{widget-name}-column>
</dx-{widget-name}>

<!-- tab: app.module.ts -->
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { Dx{WidgetName}Module } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        Dx{WidgetName}Module
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

<!-- tab: App.vue -->
<template>
    <Dx{WidgetName} ... >
        <DxColumn ... >
            <DxFormat
                type="fixedPoint"
                :precision="2"
            />
        </DxColumn>
    </Dx{WidgetName}>
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import Dx{WidgetName}, {
    DxColumn,
    DxFormat
} from 'devextreme-vue/{widget-name}';

export default {
    components: {
        Dx{WidgetName},
        DxColumn,
        DxFormat
    },
    data() {
        // ...
    }
}
</script>

React

<!-- tab: App.js -->
import React from 'react';

import 'devextreme/dist/css/dx.fluent.blue.light.css';

import {WidgetName}, {
    Column,
    Format
} from 'devextreme-react/{widget-name}';

class App extends React.Component {
    // ...
    render() {
        return (
            <{WidgetName}>
                <Column ... >
                    <Format
                        type="fixedPoint"
                        precision={2}
                    />
                </Column>
            </{WidgetName}>
        );
    }
}
export default App;

---

The format property also limits user input in cells that use the DateBox UI component for editing. For cells that use the NumberBox UI component, you can specify the editorOptions.format property, as shown in the following demo:

#include btn-open-demo with { href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RecalculateWhileEditing/" }