Number formatting in jQuery grid

ParamQuery Grid offers built-in cell formatting capabilities similar to mainstream spreadsheet applications like MS Office and Google Sheets, all implemented in plain JavaScript without any dependencies.

This example shows various ways to format number cells.

  1. Decimal places: Control the number of digits displayed after the decimal point. For example, 0.00 will format the number to two decimal places.
  2. Thousand separators: Add commas to separate thousands, making large numbers easier to read. For example, #,##0 will format 1234567 as 1,234,567.
  3. Round numbers: Automatically round numbers to a specified number of decimal places. For example, 0 will round to the nearest whole number.
  4. Using units (K, M, etc.) with numbers: Display numbers with units like thousands (K) or millions (M). For example, 0.0,,"M" will format 1234567 as 1.2M.
  5. Add text to number: Combine text with numbers in a cell. For example, "Total: "0 will display as “Total: 123” if the cell value is 123.
  6. Text formatting using 4th section of format code: Use the fourth section of the format code to format text. For example, 0;Red;0;"Text: "@ will display text as “Text: your_text”.
  7. Use currency symbols: Display numbers with currency symbols. For example, "$"#,##0.00 will format 1234.56 as $1,234.56.
  8. Percentage: Display numbers as percentages. For example, 0% will format 0.75 as 75%.
  9. Fractions: Display numbers as fractions. For example, # ?/? will format 0.75 as 3/4.
  10. Scientific Notation: Display numbers in scientific notation. For example, 0.00E+00 will format 1234567 as 1.23E+06.
  11. Negative Numbers: Format negative numbers differently. For example, 0;Red will display negative numbers in red.
  12. Display Dashes: Show dashes instead of zeros. For example, 0;-0;-- will display zero values as “–”.
  13. Font Color: Change the font color of numbers. For example, [Blue]0 will display numbers in blue.
  14. Conditional: Apply different formats based on conditions. For example, [>1000][Green]0;[Red]0 will display numbers greater than 1000 in green and others in red.