Category: How do I do X?
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

How do I convert number column to a more human readable file size number?

Issue

I have a column in my table with file sizes represented in bytes. I want to display them in a more user-friendly format, with decimal rounding and units like kb, gb, etc. I know how to do basic arithmetic calculations but need advice on more complex ways to achieve this.

Resolution

To display the file sizes in a more human-readable way, you can use a function that takes the size in bytes as input and converts it to KB, MB, GB, or TB, depending on its magnitude. Here's some sample code in JavaScript:

function formatFileSize(bytes) {
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  if (bytes == 0) return '0 Bytes';
  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
  return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}

This function takes a number representing the file size in bytes and returns a string formatted with the appropriate magnitude and rounding to two decimal places. To use this function in your table, you can create a JSObject in the table configuration and define a Custom Cell Renderer function that calls this formatFileSize() function:

{
    view: 'table',
    id: 'myTable',
    columns: [
        { id: 'fileSize', header: 'File Size', sort: 'int', width: 100, format: 'webix.Number.formatNumber', template: fileSizeTemplate }
    ],
    data: myData,
    jsObject: {
        formatFileSize: function(row, column, value) {
            return formatFileSize(value);
        }
    }
}

function fileSizeTemplate(item, common, value) {
    return common.formatFileSize(item, common, value);
}

Here, we define a Custom Cell Renderer function named fileSizeTemplate() that calls the formatFileSize() function with the current row, column, and value as arguments. The jsObject property of the table configuration is used to define the formatFileSize() function so that it can be called from the Custom Cell Renderer.

With this setup, the file sizes in your table should now be displayed in a more human-readable way.