columns.createdCell
Cell created callback to allow DOM manipulation.
Description
This is a callback function that is executed whenever a cell is created (Ajax source, etc) or read from a DOM source. It can be used as a complement to columns.render
allowing modification of the cell's DOM element (add background colour for example) when the element is created (cells may not be immediately created on table initialisation if deferRender
is enabled, or if rows are dynamically added using the API (rows.add()
).
This is the counterpart callback for rows, which use the createdRow
option.
Type
createdCell( cell, cellData, rowData, rowIndex, colIndex )
Parameters:
Name | Type | Optional | |
---|---|---|---|
1 | cell | No | |
The | |||
2 | cellData |
| No |
Cell data. If you use | |||
3 | rowData |
| No |
Data source object / array for the whole row | |||
4 | rowIndex | No | |
DataTables' internal index for the row | |||
5 | colIndex | No | |
DataTables' internal index for the column |
Example
Using createdCell
manipulate the DOM with columnDefs
:
new DataTable('#myTable', {
columnDefs: [
{
targets: 3,
createdCell: function (td, cellData, rowData, row, col) {
if (cellData < 1) {
$(td).css('color', 'red');
}
}
}
]
});
Related
The following options are directly related and may also be useful in your application development.