HTML Table Conditional Row Formatting
I have implemented some conditional formatting using this code in an HTML table:
$(myTable).DataTable({
data: reorderedData,
lengthMenu: itemsPerPageOptions,
columns: colNames,
createdRow: function(row, data, dataIndex) {
var daysOld = data[0]; // Correctly reference the first column
if (daysOld == 1) {
$(row).css('background-color', 'lightyellow');
} else if (daysOld > 1) {
$(row).css('background-color', 'lightcoral');
}
}
});
It works except that the first column (daysOld) is not highlighted. I'm not sure why. What am I doing wrong?
Best Answer
-
The issue appears to be how the datatables library handles rendering. It applies the styles after rendering the data, which appears to be causing it to skip the first column.
You can try applying the formatting during the drawCallback.$(myTable).DataTable({
data: reorderedData,
lengthMenu: itemsPerPageOptions,
columns: colNames,
createdRow: function(row, data, dataIndex) {
// This formatting applies during the row creation phase
var daysOld = data[0]; // First column value (Days Old)
if (daysOld == 1) {
$(row).css('background-color', 'lightyellow');
} else if (daysOld > 1) {
$(row).css('background-color', 'lightcoral');
}
},
// Add a drawCallback function to apply additional formatting
drawCallback: function() {
var table = $(myTable).DataTable();
// Iterate through all rows to ensure formatting applies
table.rows().every(function(rowIdx, tableLoop, rowLoop) {
var data = this.data();
var row = this.node();
var daysOld = data[0]; // Get the value of the first column
if (daysOld == 1) {
$(row).css('background-color', 'lightyellow');
} else if (daysOld > 1) {
$(row).css('background-color', 'lightcoral');
}
});
}
});or target the specific cell in the first column rather than the row.
$(myTable).DataTable({
data: reorderedData,
lengthMenu: itemsPerPageOptions,
columns: colNames,
createdRow: function(row, data, dataIndex) {
var daysOld = data[0]; // First column value (Days Old)
// Apply background color to the first column (specific cell)
var firstCell = $('td', row).eq(0); // Target the first column
if (daysOld == 1) {
$(row).css('background-color', 'lightyellow'); // Entire row
firstCell.css('background-color', 'lightyellow'); // First column
} else if (daysOld > 1) {
$(row).css('background-color', 'lightcoral'); // Entire row
firstCell.css('background-color', 'lightcoral'); // First column
}
}
});
** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **0
Answers
-
The issue appears to be how the datatables library handles rendering. It applies the styles after rendering the data, which appears to be causing it to skip the first column.
You can try applying the formatting during the drawCallback.$(myTable).DataTable({
data: reorderedData,
lengthMenu: itemsPerPageOptions,
columns: colNames,
createdRow: function(row, data, dataIndex) {
// This formatting applies during the row creation phase
var daysOld = data[0]; // First column value (Days Old)
if (daysOld == 1) {
$(row).css('background-color', 'lightyellow');
} else if (daysOld > 1) {
$(row).css('background-color', 'lightcoral');
}
},
// Add a drawCallback function to apply additional formatting
drawCallback: function() {
var table = $(myTable).DataTable();
// Iterate through all rows to ensure formatting applies
table.rows().every(function(rowIdx, tableLoop, rowLoop) {
var data = this.data();
var row = this.node();
var daysOld = data[0]; // Get the value of the first column
if (daysOld == 1) {
$(row).css('background-color', 'lightyellow');
} else if (daysOld > 1) {
$(row).css('background-color', 'lightcoral');
}
});
}
});or target the specific cell in the first column rather than the row.
$(myTable).DataTable({
data: reorderedData,
lengthMenu: itemsPerPageOptions,
columns: colNames,
createdRow: function(row, data, dataIndex) {
var daysOld = data[0]; // First column value (Days Old)
// Apply background color to the first column (specific cell)
var firstCell = $('td', row).eq(0); // Target the first column
if (daysOld == 1) {
$(row).css('background-color', 'lightyellow'); // Entire row
firstCell.css('background-color', 'lightyellow'); // First column
} else if (daysOld > 1) {
$(row).css('background-color', 'lightcoral'); // Entire row
firstCell.css('background-color', 'lightcoral'); // First column
}
}
});
** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **0 -
Thanks! I'm going to give these a try.
Is this something that should be reported as an issue?0 -
I went with the second option. It works perfectly. Thanks!
1
Categories
- All Categories
- 1.8K Product Ideas
- 1.8K Ideas Exchange
- 1.5K Connect
- 1.2K Connectors
- 296 Workbench
- 6 Cloud Amplifier
- 8 Federated
- 2.9K Transform
- 99 SQL DataFlows
- 614 Datasets
- 2.2K Magic ETL
- 3.8K Visualize
- 2.5K Charting
- 727 Beast Mode
- 53 App Studio
- 40 Variables
- 677 Automate
- 173 Apps
- 451 APIs & Domo Developer
- 45 Workflows
- 8 DomoAI
- 34 Predict
- 14 Jupyter Workspaces
- 20 R & Python Tiles
- 394 Distribute
- 113 Domo Everywhere
- 275 Scheduled Reports
- 6 Software Integrations
- 121 Manage
- 118 Governance & Security
- Domo Community Gallery
- 32 Product Releases
- 10 Domo University
- 5.4K Community Forums
- 40 Getting Started
- 30 Community Member Introductions
- 108 Community Announcements
- 4.8K Archive