JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>FilterDropDown example Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script src="https://rawcdn.githack.com/ErikKalkoken/filterDropDown/master/js/filterDropDown.js"></script>
<script>
// initialising dt table
$(document).ready(function() {
var data = [
[
"Tiger",
"Nixon",
"System Architect",
"Edinburgh",
"$3,120"
],
[
"Garrett",
"Winters",
"Director",
"Edinburgh",
"$5,300"
]
]
var new_data = [
[
"Ashton",
"Cox",
"Javascript Developer",
"Tokyo",
"$120"
],
[
"Cedric",
"Kelly",
"Sales Assistant",
"San Francisco",
"$300"
]
]
$('#example').DataTable({
// Definition of filter to display
data: data,
filterDropDown: {
columns: [
{
idx: 2
},
{...