🎨 TablixJS Column Formatting System
Demonstration of the enhanced column formatting system with Intl APIs support.
1. Basic Format Types
Demonstrates text, number, currency, date, and percent formatting.
const basicFormattingTable = new Table('#basicFormatting', {
data: sampleData,
columns: [
{ name: 'name', title: 'Employee Name', format: 'text' },
{ name: 'salary', title: 'Salary', format: 'currency', currency: 'USD' },
{ name: 'joinDate', title: 'Join Date', format: 'date' },
{ name: 'bonus', title: 'Bonus Rate', format: 'percent' },
{ name: 'rating', title: 'Rating', format: 'number', formatOptions: { minimumFractionDigits: 1, maximumFractionDigits: 1 } }
]
});
2. Locale-Specific Formatting
Same data with different locales to show internationalization support.
const localeTable = new Table('#localeFormatting', {
data: sampleData,
columns: [
{ name: 'name', title: 'Name' },
{ name: 'salary', title: 'Salary (EUR)', format: 'currency', currency: 'EUR', locale: 'de-DE' },
{ name: 'joinDate', title: 'Join Date', format: 'date', locale: 'fr-FR', formatOptions: { dateStyle: 'long' } },
{ name: 'bonus', title: 'Bonus', format: 'percent', locale: 'en-GB', formatOptions: { minimumFractionDigits: 2 } }
]
});
3. Custom Renderer Priority
Shows how custom renderers can override formatting or use formatted values.
const customRendererTable = new Table('#customRenderer', {
data: sampleData,
columns: [
{ name: 'name', title: 'Employee' },
{
name: 'salary',
title: 'Salary Badge',
format: 'currency',
currency: 'USD',
renderer: (value, row, formattedValue) => {
const color = value >= 80000 ? 'green' : value >= 70000 ? 'orange' : 'red';
return `<span style="background: ${color}; color: white; padding: 4px 8px; border-radius: 4px;">${formattedValue}</span>`;
}
},
{
name: 'active',
title: 'Status',
renderer: (value) => value ? '✅ Active' : '❌ Inactive'
}
]
});
4. Mixed Columns (Formatted + Raw)
Demonstrates mixing formatted columns with raw value columns.
const mixedTable = new Table('#mixedFormatting', {
data: sampleData,
columns: [
{ name: 'id', title: 'ID' }, // Raw value, no formatting
{ name: 'name', title: 'Name' }, // Raw value, no formatting
{ name: 'department', title: 'Department' }, // Raw value, no formatting
{ name: 'salary', title: 'Annual Salary', format: 'currency', currency: 'USD', formatOptions: { minimumFractionDigits: 0 } },
{ name: 'joinDate', title: 'Hire Date', format: 'date', formatOptions: { year: 'numeric', month: 'short', day: '2-digit' } }
]
});