📥 Input Parameters
Parameter
Type
Description
Required
Default
TableData
Text
JSON object containing the main table data
✅
—
StyleRules
JSON object with conditional logic to apply styles
🧾 JSON Structure
📊 Table Data JSON (TableData)
[
{ "month": "January", "sales": 8000, "cost": 9000, "profit": 40000, "margin": 5000 },
{ "month": "February", "sales": 25000, "cost": 20000, "profit": 25000, "margin": 30000 },
{ "month": "March", "sales": 75000, "cost": 60000, "profit": 35000, "margin": 80000 },
{ "month": "April", "sales": 120000, "cost": 110000, "profit": 33000, "margin": 130000 }
// Add more rows as needed
]
🎨 Style Rules JSON (StyleRules)
{ col: 'sales', expr: 'cellValue < 10000', trueStyle: 'cell-green-animated' },
{ col: 'sales', expr: 'cellValue >= 10000 && cellValue <= 50000', trueStyle: 'cell-yellow-animated' },
{ col: 'sales', expr: 'cellValue > 50000 && cellValue <= 100000', trueStyle: 'cell-orange-animated' },
{ col: 'sales', expr: 'cellValue > 100000', trueStyle: 'cell-red-animated' },
// COST
{ col: 'cost', expr: 'cellValue < 10000', trueStyle: 'cell-green-animated' },
{ col: 'cost', expr: 'cellValue >= 10000 && cellValue <= 50000', trueStyle: 'cell-yellow-animated' },
{ col: 'cost', expr: 'cellValue > 50000 && cellValue <= 100000', trueStyle: 'cell-orange-animated' },
{ col: 'cost', expr: 'cellValue > 100000', trueStyle: 'cell-red-animated' }
🔧 How to Use