fix more styling

src/datamanager.js

@@ -24,6 +24,7 @@ export default class DataManager {
     if (this.options.addSerialNoColumn && !this._serialNoColumnAdded) {
       const val = {
         content: 'Sr. No',
+        editable: false,
         resizable: false
       };
 
@@ -34,6 +35,7 @@ export default class DataManager {
     if (this.options.addCheckboxColumn && !this._checkboxColumnAdded) {
       const val = {
         content: '<input type="checkbox" />',
+        editable: false,
         resizable: false
       };
 

src/datatable.js

@@ -22,7 +22,8 @@ const DEFAULT_OPTIONS = {
   addSerialNoColumn: true,
   addCheckboxColumn: true,
   enableClusterize: true,
-  enableLogs: false
+  enableLogs: false,
+  takeAvailableSpace: false
 };
 
 export default class DataTable {
@@ -218,10 +219,15 @@ export default class DataTable {
   setDimensions() {
     const self = this;
 
-    // setting width as 0 will ensure that the
-    // header doesn't take the available space
+    if (!this.options.takeAvailableSpace) {
+      // setting width as 0 will ensure that the
+      // header doesn't take the available space
+      this.header.css({
+        width: 0
+      });
+    }
+
     this.header.css({
-      width: 0,
       margin: 0
     });
 
@@ -634,7 +640,7 @@ export default class DataTable {
   setBodyWidth() {
     this.bodyScrollable.css(
       'width',
-      parseInt(this.header.css('width'), 10) + 1
+      parseInt(this.header.css('width'), 10)
     );
   }
 

src/style.scss

@@ -1,9 +1,21 @@
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/reboot";
+// @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/tables";
 
+*, *::after, *::before {
+	box-sizing: border-box;
+}
+
+button, input {
+	overflow: visible;
+	font-family: inherit;
+	font-size: inherit;
+	line-height: inherit;
+	margin: 0;
+}
+
 .data-table * {
 	outline: none;
 }