How to keep search working on modified render columns DataTables.js - datatables

Question

How to keep search working on modified render columns DataTables.js ?
please check below snippet, try to search a test3 / a test4 it will resulting No matching records found.
const someData = [
{ id: 1, keyword: "keyword a", value: ["a test1", "a test2", "a test3", "a test4"]}
];
$(document).ready( function () {
$('#table').DataTable({
data: someData,
columns: [
{
data: "keyword",
render: function( data, type, row, meta ) {
var value = `${row.keyword}`;
return value;
}
},
{
data: "value",
render: function( data, type, row, meta ) {
var value = "";
if ( data.length > 2 ) {
data.forEach( function(v, i) {
if ( i < 2 ) value += `${v}<br/>`;
else if ( i == 2 ) value += `. . . . .`
});
} else {
for (var i=0; i<3; i++ ) {
value += data[i] ? `${data[i]}<br/>`: `<br/>`
}
}
return value;
}
}
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="table">
<thead>
<tr>
<th>Keyword</th>
<th>Value</th>
</tr>
</thead>
</table>
Any help would be greatly appreciated.

Answer 1

for now i'm using this hacky way to make it work, i'm add row with original value and set it visible: false on columnDefs, if there a right way to do it i'll accept it as an answer.
const someData = [
{ id: 1, keyword: "keyword a", value: ["a test1", "a test2", "a test3", "a test4"]}
];
$(document).ready( function () {
$('#table').DataTable({
data: someData,
columns: [
{
data: "keyword",
render: function( data, type, row, meta ) {
var value = `${row.keyword}`;
return value;
}
},
{
data: "value",
render: function( data, type, row, meta ) {
var value = "";
if ( data.length > 2 ) {
data.forEach( function(v, i) {
if ( i < 2 ) value += `${v}<br/>`;
else if ( i == 2 ) value += `. . . . .`
});
} else {
for (var i=0; i<3; i++ ) {
value += data[i] ? `${data[i]}<br/>`: `<br/>`
}
}
return value;
}
},
{
data: "value"
}
],
columnDefs: [
{
targets: 2,
visible: false
}
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="table">
<thead>
<tr>
<th>Keyword</th>
<th>Value</th>
<th>Value</th>
</tr>
</thead>
</table>