ng-prime-tools
Version:
An advanced PrimeNG table for Angular
23 lines • 3.64 kB
JavaScript
/**
* Calculates the width required for a column based on the header text (column title).
* It uses the Canvas API to measure text width dynamically.
*
* @param {TableColumn} col - The column metadata containing the header title and code.
* @param {string} [font='16px Arial'] - The font to use for measurement (defaults to '16px Arial').
* @returns {number} - The calculated width of the column in pixels.
*/
export function calculateTextWidth(col, font = '16px Arial') {
// Create a canvas context for measuring text
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
if (!context) {
return 100; // Fallback width if canvas context is not available
}
// Set the font to match the provided font or the document body font
context.font = font || getComputedStyle(document.body).font;
// Measure the header text width
const headerWidth = context.measureText(col.title).width;
// Return the width with some padding
return Math.ceil(headerWidth + 20); // Add padding for extra space
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC51dGlsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctcHJpbWUtdG9vbHMvc3JjL2xpYi91dGlscy90ZXh0LnV0aWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUE7Ozs7Ozs7R0FPRztBQUNILE1BQU0sVUFBVSxrQkFBa0IsQ0FDaEMsR0FBZ0IsRUFDaEIsT0FBZSxZQUFZO0lBRTNCLDZDQUE2QztJQUM3QyxNQUFNLE1BQU0sR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ2hELE1BQU0sT0FBTyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7SUFFeEMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1FBQ2IsT0FBTyxHQUFHLENBQUMsQ0FBQyxvREFBb0Q7SUFDbEUsQ0FBQztJQUVELG9FQUFvRTtJQUNwRSxPQUFPLENBQUMsSUFBSSxHQUFHLElBQUksSUFBSSxnQkFBZ0IsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDO0lBRTVELGdDQUFnQztJQUNoQyxNQUFNLFdBQVcsR0FBRyxPQUFPLENBQUMsV0FBVyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQyxLQUFLLENBQUM7SUFFekQscUNBQXFDO0lBQ3JDLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyw4QkFBOEI7QUFDcEUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFRhYmxlQ29sdW1uIH0gZnJvbSAnLi4vbW9kZWxzJztcblxuLyoqXG4gKiBDYWxjdWxhdGVzIHRoZSB3aWR0aCByZXF1aXJlZCBmb3IgYSBjb2x1bW4gYmFzZWQgb24gdGhlIGhlYWRlciB0ZXh0IChjb2x1bW4gdGl0bGUpLlxuICogSXQgdXNlcyB0aGUgQ2FudmFzIEFQSSB0byBtZWFzdXJlIHRleHQgd2lkdGggZHluYW1pY2FsbHkuXG4gKlxuICogQHBhcmFtIHtUYWJsZUNvbHVtbn0gY29sIC0gVGhlIGNvbHVtbiBtZXRhZGF0YSBjb250YWluaW5nIHRoZSBoZWFkZXIgdGl0bGUgYW5kIGNvZGUuXG4gKiBAcGFyYW0ge3N0cmluZ30gW2ZvbnQ9JzE2cHggQXJpYWwnXSAtIFRoZSBmb250IHRvIHVzZSBmb3IgbWVhc3VyZW1lbnQgKGRlZmF1bHRzIHRvICcxNnB4IEFyaWFsJykuXG4gKiBAcmV0dXJucyB7bnVtYmVyfSAtIFRoZSBjYWxjdWxhdGVkIHdpZHRoIG9mIHRoZSBjb2x1bW4gaW4gcGl4ZWxzLlxuICovXG5leHBvcnQgZnVuY3Rpb24gY2FsY3VsYXRlVGV4dFdpZHRoKFxuICBjb2w6IFRhYmxlQ29sdW1uLFxuICBmb250OiBzdHJpbmcgPSAnMTZweCBBcmlhbCdcbik6IG51bWJlciB7XG4gIC8vIENyZWF0ZSBhIGNhbnZhcyBjb250ZXh0IGZvciBtZWFzdXJpbmcgdGV4dFxuICBjb25zdCBjYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdjYW52YXMnKTtcbiAgY29uc3QgY29udGV4dCA9IGNhbnZhcy5nZXRDb250ZXh0KCcyZCcpO1xuXG4gIGlmICghY29udGV4dCkge1xuICAgIHJldHVybiAxMDA7IC8vIEZhbGxiYWNrIHdpZHRoIGlmIGNhbnZhcyBjb250ZXh0IGlzIG5vdCBhdmFpbGFibGVcbiAgfVxuXG4gIC8vIFNldCB0aGUgZm9udCB0byBtYXRjaCB0aGUgcHJvdmlkZWQgZm9udCBvciB0aGUgZG9jdW1lbnQgYm9keSBmb250XG4gIGNvbnRleHQuZm9udCA9IGZvbnQgfHwgZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5ib2R5KS5mb250O1xuXG4gIC8vIE1lYXN1cmUgdGhlIGhlYWRlciB0ZXh0IHdpZHRoXG4gIGNvbnN0IGhlYWRlcldpZHRoID0gY29udGV4dC5tZWFzdXJlVGV4dChjb2wudGl0bGUpLndpZHRoO1xuXG4gIC8vIFJldHVybiB0aGUgd2lkdGggd2l0aCBzb21lIHBhZGRpbmdcbiAgcmV0dXJuIE1hdGguY2VpbChoZWFkZXJXaWR0aCArIDIwKTsgLy8gQWRkIHBhZGRpbmcgZm9yIGV4dHJhIHNwYWNlXG59XG4iXX0=