JSFiddle - React, Tailwind, and code Playground

by gabriela b

HTML

<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" dt-column-defs="dtColumnDefs"
	   class="table table-bordered table-hover table-condensed campaign-table">

	<thead>
	<!--FOR HEADER TITLES-->
	<tr class="text-centered">
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
	</tr>

	</thead>
	<tbody class="text-centered">
	<tr ng-repeat="item in testItems">

		<!--<td>{{item.ref}}</td>-->
		<!--<td>{{item.ref2}}</td>-->
		<!--<td>{{item.designation}}</td>-->
		<!--<td>{{item.info}}</td>-->
		<!--<td class="check" ng-if="item.checked()"><span-->
				<!--class="glyphicon glyphicon-ok"></span> {{item.checkIn | date:'dd/MM/yyyy'}}-->
		<!--</td>-->
		<!--<td class="check" ng-if="!item.checked()"><span-->
				<!--class="glyphicon glyphicon-minus"></span> {{item.checkIn | date:'dd/MM/yyyy'}}-->
		<!--</td>-->
		<!--<td>{{getNbItemsForTag(proofsMap, item, 'total')}} teeest</td>-->
		<!--<td>{{getNbItemsForTag(proofsMap, item, 'pending')}}</td>-->
		<!--<td>{{getNbItemsForTag(proofsMap, item, 'approved')}}</td>-->
		<!--<td>{{getNbItemsForTag(proofsMap, item, 'rejected')}}</td>-->
		<!--<td>{{getNbItemsForTag(proofsMap, item, 'digilab')}}</td>-->
		<!--<td>{{getNbItemsForTag(finalsMap, item, 'total')}}</td>-->
		<!--<td>{{getNbItemsForTag(finalsMap, item, 'pending')}}</td>-->
		<!--<td>{{getNbItemsForTag(finalsMap, item, 'approved')}}</td>-->
		<!--<td>{{getNbItemsForTag(finalsMap, item, 'rejected')}}</td>-->
		<!--<td><input type="checkbox"-->
				   <!--ng-model="item.delivered"/><label-->
				<!--style="visibility: hidden">true</label></td>-->
		<!--<td>{{item.checkOut | date:'dd/MM/yyyy'}}</td>-->
		<!--<td></td>-->
		<!--<td></td>-->
		<!--<td></td>-->
		<!--<td></td>-->
	</tr>
	</tbody>

	<tfoot>
	<!--FOR...

JavaScript

//controller

$scope.testItems = c.items;

$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('aaData', $scope.testItems)
					.withDOM('T<"clear">rt')
					.withColumnFilter({
						//sPlaceHolder: "head:after", //places the filter on the table's header
						aoColumns: [
							{
								type: 'text' //ref
							}, {
								type: 'text' //ref+
							},
							{
								type: 'text' //designation
							},
							{
								type: 'text' //info
							},
							{
								type: 'date' //checkIn
							},
							null, //shoot total
							null, //shoot a valider
							null, //shoot validé
							null, //refusé
							{
								type: 'test' //digilab
							},
							null, //final total
							null, //final a valider
							null, //final validé
							null, //refusé
							{
								type: 'select', //livré
								bRegex: true,
								//	values: [ 'true', 'false'
								//	]
								values: [
									{value: 'true', label: 'true'},
									{value: 'false', label: 'false'}
								]
							},
							{
								type: 'date' //checkOut
							},
						]
					})
					.withScroller()
					.withOption('scrollY', 200)
                            
                            .withTableTools('../bower_components/datatables-tabletools/swf/copy_csv_xls_pdf.swf')
					.withTableToolsOption(
					{
						"oTableTools": {
							"sRowSelect": "multi"
						}
					})
					.withTableToolsButtons(
					[
						$.extend({
							sExtends: "print",
							sButtonText: "Print",
							"bFooter": false
						}, optionsTableToolsButtons),
						$.extend({
							sExtends: "copy",
							sButtonText: "Copy",
							"bFooter": false
						}, optionsTableToolsButtons),
						{
							sExtends: "collection",
							sButtonText: "Export",
							aButtons: [
								$.extend({
									sExtends: "csv",
									"bFooter": false,
									"sFileName": c.name + ".csv"
								}, optionsTableToolsButtons),
								$.extend({
									sExtends: "xls",
									"bFooter":...