Data Formats in Grid Component

By default if data formats are not used, the Grid will show its data in plain text. Using data formats can help displayed data to become more readable. This is usually the case when you have Dates or localized Currency numbers displayed in the grid.

The sample code below shows usable data formats in grid component is available in each JavaScript framework: Angular, React and Vue.

The demo shows several columns where Dates are displayed in short format, while numbers are displayed in USD currency format with two decimals.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

Supported Data Formats in Grid

The IntegralUI Grid supports the following data formats:

• NumberFormat - enables language-sensitive number formatting
• DateTimeFormat - enables language-sensitive date and time formatting
• String - a default string formatting

All available formatting options from the NumberFormat and DateTimeFormat, are usable in the grid.

Each grid column can have its own data format set. The column object has the format field that allows you to add options, which contains the formatting options for that column. Here are few examples:

When using editors, instead of setting the column's format field, you can use the editorSettings.format field.

Column where numbers are displayed as USD currency:

column.format = { 
    options: { 
        currency: "USD", 
        style: "currency",
        maximumFractionDigits: 2
    }
}
                    

Column where numbers are displayed in percents with two decimals:

column.format = { 
    options: { 
        style: "percent",
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    }
}
                    

Column with dates where day has two digits, a short name for a month and year in full:

column.format = { 
    options: { 
        locales: "en-GB",
        options: { 
            year: "numeric",
            month: "short",
            day: "2-digit"
        }
    }
}
                    

To show dates in different language like Japanese, just change the locales field to 'ja-JP-u-ca-japanese'.

There are many other options to choose from, including language localization. For more information, check out the MDN web documents for NumberFormat and DateTimeFormat.

Currently there is no specific format to display strings; it is just plain text, displayed as it is set in grid cells.

Conclusion

IntegralUI Grid component for Angular, React and Vue has built-in support for most of the standard data formats available. Each column can have used different data format with customizable options. You can show numbers as localized currency, choose how many decimals displayed number can have, whether you want to show percentages. In addition, all known date formats are supported, including language localization.

IntegralUI Web is an UI library of native web components that includes the Grid. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.