mafar/dataTables.colStyle.js

## dataTables.colStyle.js
 (function (factory) {
   if (typeof define === 'function' && define.amd) {
     // AMD
     define(['jquery', 'datatables.net'], function ($) {
       return factory($, window, document);
     });
   } else if (typeof exports === 'object') {
     // CommonJS
     module.exports = function (root, $) {
       if (!root) {
         root = window;
       }

       if (!$ || !$.fn.dataTable) {
         $ = require('datatables.net')(root, $).$;
       }

       return factory($, root, root.document);
     };
   } else {
     // Browser
     factory(jQuery, window, document);
   }
 }(function ($, window, document, undefined) {
   'use strict';
   var DataTable = $.fn.dataTable;
   //
   var ColumnStyle = function (dt, opts) {
     var settings = new $.fn.dataTable.Api(dt).settings()[0];
     //
     this.s = {
       dt: settings,
       init: opts,
     };
     settings.oApi._fnCallbackReg(settings, 'aoRowCallback', $.proxy(this._FnRowCallback, this), 'columnStyle');
     //
     return this;
   };

   ColumnStyle.prototype = {
     '_FnRowCallback': function (row) {
       var that = this;
       var styleKey = that.s.init.styleKey;
       var tableApi = $.fn.dataTable.Api(that.s.dt);
       var columns = tableApi.settings().init().columns;
       var $cells = $(row).find('td');
       $cells.each(function () {
         var $cell = $(this);
         var columnIndex = tableApi.column(this).index();
         var styleOption = columns[columnIndex][styleKey];
         //
         if (styleOption && $.isPlainObject(styleOption)) {
           $cell.css(styleOption);
         }
         //
       });
     }
   };
   ColumnStyle.defaults = {
     styleKey: 'css'
   };

   $.fn.dataTable.ColumnStyle = ColumnStyle;
   $.fn.DataTable.ColumnStyle = ColumnStyle;

   // Automatic initialisation listener
   $(document).on('preInit.dt.columnStyle', function (e, settings) {
     if (e.namespace !== 'dt') {
       return;
     }
     // prepare options
     var plugin_options = ColumnStyle.defaults;
     var init_options = settings.oInit.columnStyle;
     var defaults_options = DataTable.defaults.columnStyle;
     var opts = $.extend(true, {}, plugin_options);
     if (defaults_options) {
       $.extend(true, opts, defaults_options);
     }
     if (init_options) {
       $.extend(true, opts, init_options);
     }
     //
     if (init_options !== false) {
       new ColumnStyle(settings, opts);
     }
   });
   //
   //
   //
 }));

## demo.html
<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>datatables test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
    <script src="dataTables.colReorder.min.js"></script>
    <script src="dataTables.colStyle.js"></script>
    <style>
      body {
        font-size: 140%;
        padding: 20px;
      }
    </style>
  </head>

  <body>
    <table id="example" class="table table-striped table-bordered" cellspacing="0">
    </table>
    <script>
      $(document).ready(function () {
        var table = $('#example').DataTable({
          'autoWidth': false,
          'scrollX': true,
          'scrollY': 300,
          'scrollCollapse': true,
          columnStyle: {
            key: 'css'
          },
          colReorder: {
            order: [0, 1, 2, 3, 4]
          },
          columns: [{
            data: 'name',
            title: 'Long Name Issues',
            css: {
              'width': 200,
              'min-width': 200,
              'word-wrap': 'break-word',
              'max-width': 200,
            },
            render: function (data) {
              return '<span class="">' + data + '</span>';
            }
          }, {
            data: 'position',
            title: 'Position',
            visible: false
          }, {
            data: 'description',
            css: {
              'width': 500,
              'min-width': 500,
              'word-wrap': 'break-word'
            },
            title: 'Long Description Issues',
            render: function (data) {
              return data;
            }
          }, {
            data: 'salary',
            title: 'salary May have Big Title'
          }, {
            data: 'age',
            title: 'age'
          }],
          data: [{
            name: 'DavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavid',
            position: 'CTO',
            description: 'CTO',
            salary: '1000',
            age: '44'
          }, {
            name: 'John',
            position: 'tech',
            description: 'description',
            salary: '1000',
            age: '22'
          }, {
            name: 'Amber',
            position: 'CEO',
            description: 'SOME long description with spaces SOME long description with spaces SOME long description with spaces SOME long description with spaces SOME long description with spaces SOME long description with spaces SOME long description with spaces SOME long description with spaces',
            salary: '1000',
            age: '45'
          }],
        });

      });
    </script>
  </body>

</html>
	(function (factory) {
	if (typeof define === 'function' && define.amd) {
	// AMD
	define(['jquery', 'datatables.net'], function ($) {
	return factory($, window, document);
	});
	} else if (typeof exports === 'object') {
	// CommonJS
	module.exports = function (root, $) {
	if (!root) {
	root = window;
	}

	if (!$ \|\| !$.fn.dataTable) {
	$ = require('datatables.net')(root, $).$;
	}

	return factory($, root, root.document);
	};
	} else {
	// Browser
	factory(jQuery, window, document);
	}
	}(function ($, window, document, undefined) {
	'use strict';
	var DataTable = $.fn.dataTable;
	//
	var ColumnStyle = function (dt, opts) {
	var settings = new $.fn.dataTable.Api(dt).settings()[0];
	//
	this.s = {
	dt: settings,
	init: opts,
	};
	settings.oApi._fnCallbackReg(settings, 'aoRowCallback', $.proxy(this._FnRowCallback, this), 'columnStyle');
	//
	return this;
	};

	ColumnStyle.prototype = {
	'_FnRowCallback': function (row) {
	var that = this;
	var styleKey = that.s.init.styleKey;
	var tableApi = $.fn.dataTable.Api(that.s.dt);
	var columns = tableApi.settings().init().columns;
	var $cells = $(row).find('td');
	$cells.each(function () {
	var $cell = $(this);
	var columnIndex = tableApi.column(this).index();
	var styleOption = columns[columnIndex][styleKey];
	//
	if (styleOption && $.isPlainObject(styleOption)) {
	$cell.css(styleOption);
	}
	//
	});
	}
	};
	ColumnStyle.defaults = {
	styleKey: 'css'
	};

	$.fn.dataTable.ColumnStyle = ColumnStyle;
	$.fn.DataTable.ColumnStyle = ColumnStyle;

	// Automatic initialisation listener
	$(document).on('preInit.dt.columnStyle', function (e, settings) {
	if (e.namespace !== 'dt') {
	return;
	}
	// prepare options
	var plugin_options = ColumnStyle.defaults;
	var init_options = settings.oInit.columnStyle;
	var defaults_options = DataTable.defaults.columnStyle;
	var opts = $.extend(true, {}, plugin_options);
	if (defaults_options) {
	$.extend(true, opts, defaults_options);
	}
	if (init_options) {
	$.extend(true, opts, init_options);
	}
	//
	if (init_options !== false) {
	new ColumnStyle(settings, opts);
	}
	});
	//
	//
	//
	}));
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>datatables test</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
	<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
	<script src="dataTables.colReorder.min.js"></script>
	<script src="dataTables.colStyle.js"></script>
	<style>
	body {
	font-size: 140%;
	padding: 20px;
	}
	</style>
	</head>

	<body>
	<table id="example" class="table table-striped table-bordered" cellspacing="0">
	</table>
	<script>
	$(document).ready(function () {
	var table = $('#example').DataTable({
	'autoWidth': false,
	'scrollX': true,
	'scrollY': 300,
	'scrollCollapse': true,
	columnStyle: {
	key: 'css'
	},
	colReorder: {
	order: [0, 1, 2, 3, 4]
	},
	columns: [{
	data: 'name',
	title: 'Long Name Issues',
	css: {
	'width': 200,
	'min-width': 200,
	'word-wrap': 'break-word',
	'max-width': 200,
	},
	render: function (data) {
	return '<span class="">' + data + '</span>';
	}
	}, {
	data: 'position',
	title: 'Position',
	visible: false
	}, {
	data: 'description',
	css: {
	'width': 500,
	'min-width': 500,
	'word-wrap': 'break-word'
	},
	title: 'Long Description Issues',
	render: function (data) {
	return data;
	}
	}, {
	data: 'salary',
	title: 'salary May have Big Title'
	}, {
	data: 'age',
	title: 'age'
	}],
	data: [{
	name: 'DavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavid',
	position: 'CTO',
	description: 'CTO',
	salary: '1000',
	age: '44'
	}, {
	name: 'John',
	position: 'tech',
	description: 'description',
	salary: '1000',
	age: '22'
	}, {
	name: 'Amber',
	position: 'CEO',
	description: 'SOME long description with spaces SOME long description with spaces SOME long description with spaces SOME long description with spaces SOME long description with spaces SOME long description with spaces SOME long description with spaces SOME long description with spaces',
	salary: '1000',
	age: '45'
	}],
	});

	});
	</script>
	</body>

	</html>