Different 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.

Grid component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

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

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.

The Grid is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework .