From 82c2313879bcda70228872982961456ed4a4785f Mon Sep 17 00:00:00 2001
From: "ashvin.patel" <ashvin.patel@digivalet.com>
Date: Fri, 14 Dec 2018 17:58:26 +0530
Subject: [PATCH 1/6] 1.1.4

---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index c98ca01..e9ce852 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ashvin27/react-datatable",
-    "version": "1.1.3",
+    "version": "1.1.4",
     "description": "ReactDatatable is a component which provide ability to create multifunctional table using single component like jQuery Datatable",
     "main": "./lib/index.js",
     "author": {
@@ -10,9 +10,9 @@
     },
     "license": "MIT",
     "homepage": "https://github.com/ashvin27/react-datatable/blob/master/README.md",
-    "bugs": { 
-        "url" : "https://github.com/ashvin27/react-datatable/issues",
-        "email" : "patelash212@gmail.com"
+    "bugs": {
+        "url": "https://github.com/ashvin27/react-datatable/issues",
+        "email": "patelash212@gmail.com"
     },
     "repository": {
         "type": "git",

From 463c02dcce1046326e90d9cc317b25e5512f543f Mon Sep 17 00:00:00 2001
From: Eric <erickims08@gmail.com>
Date: Wed, 18 Dec 2019 13:09:32 +0300
Subject: [PATCH 2/6] Added new css to Table length Menu

---
 lib/index.js |  21 ++--
 src/index.js | 280 +++++++++++++++++++++++----------------------------
 2 files changed, 140 insertions(+), 161 deletions(-)

diff --git a/lib/index.js b/lib/index.js
index 8595c08..af57698 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -42,17 +42,17 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 var style = {
   table_body: {
-    marginTop: '16px'
+    marginTop: '14px'
   },
   table_size: {
     background: 'none',
     border: 'none',
-    padding: 0
+    padding: '2px'
   },
   table_size_dropdown: {
-    width: '70px',
+    width: '87px',
     flex: 'none',
-    margin: '0px 10px',
+    margin: '0px 8px',
     display: 'inline-block',
     float: 'none'
   },
@@ -60,7 +60,7 @@ var style = {
     display: 'inline-block',
     verticalAlign: 'top',
     marginRight: '5px',
-    width: '250px'
+    width: '240px'
   },
   table_tool: {
     display: 'inline-block',
@@ -69,6 +69,9 @@ var style = {
   table_tool_btn: {
     marginRight: '5px'
   },
+  table_tool_btn_icon: {
+    marginTop: '14px'
+  },
   sort_asc: {
     backgroundImage: 'url(' + _upArrow2.default + ')'
   },
@@ -655,7 +658,7 @@ var ReactDatatable = function (_Component) {
           { className: 'row table-head asrt-table-head', id: this.props.id ? this.props.id + "-table-head" : "" },
           _react2.default.createElement(
             'div',
-            { className: 'col-md-6' },
+            { className: 'col-6' },
             this.config.show_length_menu ? _react2.default.createElement(
               'div',
               { className: 'input-group asrt-page-length' },
@@ -698,7 +701,7 @@ var ReactDatatable = function (_Component) {
           ),
           _react2.default.createElement(
             'div',
-            { className: 'col-md-6 float-right text-right' },
+            { className: 'col-6 float-right text-right' },
             this.config.show_filter ? _react2.default.createElement(
               'div',
               { className: 'table_filter', style: style.table_filter },
@@ -761,7 +764,7 @@ var ReactDatatable = function (_Component) {
           { className: 'row table-body asrt-table-body', style: style.table_body, id: this.props.id ? this.props.id + "-table-body" : "" },
           _react2.default.createElement(
             'div',
-            { className: 'col-md-12' },
+            { className: 'col-12' },
             _react2.default.createElement(
               'table',
               { className: this.props.className, id: this.props.id },
@@ -825,7 +828,7 @@ var ReactDatatable = function (_Component) {
                           record[column.key]
                         );
                       } else {
-                        return _react2.default.createElement('td', { className: column.className, key: column.key ? column.key : column.text });
+                        return _react2.default.createElement('td', { className: column.className, key: column.key ? column.key : column.text },[column.key]);
                       }
                     })
                   );
diff --git a/src/index.js b/src/index.js
index 7d51160..b7e84d0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,20 +11,21 @@ import _ from 'lodash';
 import './style.css';
 import upArrow from './up-arrow.png';
 import downArrow from './down-arrow.png';
+import { string } from 'prop-types';
 
 let style = {
   table_body: {
-    marginTop: '16px'
+    marginTop: '14px',
   },
   table_size: {
     background: 'none',
     border: 'none',
-    padding: 0
+    padding: "2px"
   },
   table_size_dropdown: {
-    width: '70px',
+    width: '87px',
     flex: 'none',
-    margin: '0px 10px',
+    margin: '0px 8px',
     display: 'inline-block',
     float: 'none'
   },
@@ -32,7 +33,7 @@ let style = {
     display: 'inline-block',
     verticalAlign: 'top',
     marginRight: '5px',
-    width: '250px'
+    width: '240px'
   },
   table_tool: {
     display: 'inline-block',
@@ -254,7 +255,7 @@ class ReactDatatable extends Component {
       worksheet: this.config.filename || 'Worksheet',
       table: sTable
     },
-    href = uri + base64(format(template, ctx));
+    href = uri + base64(format(template, ctx));     
     let anc = document.createElement('a');
     anc.setAttribute('href', href);
     anc.setAttribute('download', this.config.filename + '.xlsx');
@@ -310,7 +311,7 @@ class ReactDatatable extends Component {
 
   convertToCSV(objArray){
     let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
-    let str = '';
+    let str = '';  
     for (let i = 0; i < array.length; i++) {
       let line = '';
       for (let index in array[i]) {
@@ -347,11 +348,11 @@ class ReactDatatable extends Component {
     }
     if (headers) {
       records.unshift(headers);
-    }
+    }      
     // Convert Object to JSON
-    let jsonObject = JSON.stringify(records);
-    let csv = this.convertToCSV(jsonObject);
-    let exportedFilenmae = this.config.filename + '.csv' || 'export.csv';
+    let jsonObject = JSON.stringify(records);  
+    let csv = this.convertToCSV(jsonObject);  
+    let exportedFilenmae = this.config.filename + '.csv' || 'export.csv';  
     let blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
     if (navigator.msSaveBlob) { // IE 10+
       navigator.msSaveBlob(blob, exportedFilenmae);
@@ -438,149 +439,88 @@ class ReactDatatable extends Component {
     paginationInfo = paginationInfo.replace('_START_', (this.state.page_number == 1) ? 1 : startRecords);
     paginationInfo = paginationInfo.replace('_END_', endRecords);
     paginationInfo = paginationInfo.replace('_TOTAL_', totalRecords);
-    function showHeader(){
-      if(this){
-          if(this.config.show_length_menu==true || this.config.show_filter==true ||this.config.button.excel==true || this.config.button.csv==true || this.config.button.print==true){
-              return (
-                  <div className="row table-head asrt-table-head" id={(this.props.id) ? this.props.id + "-table-head" : ""}>
-                      <div className="col-md-6">
-                          {(this.config.show_length_menu) ? (
-                              <div className="input-group asrt-page-length">
-                                  <div className="input-group-addon input-group-prepend">
+
+    return (
+      <div className="as-react-table" id={(this.props.id) ? this.props.id + "-container" : ""}>
+        <div className="row table-head asrt-table-head" id={(this.props.id) ? this.props.id + "-table-head" : ""}>
+          <div className="col-6">
+            {(this.config.show_length_menu) ? (
+              <div className="input-group asrt-page-length">
+                <div className="input-group-addon input-group-prepend">
                   <span className="input-group-text" style={style.table_size}>
                     {(lengthMenuText[0]) ? lengthMenuText[0] : ''}
                   </span>
-                                  </div>
-                                  {(_.includes(this.config.language.length_menu, '_MENU_')) ? (
-                                      <select type="text" className="form-control" style={style.table_size_dropdown}
-                                              onChange={this.changePageSize.bind(this)}>
-                                          {this.config.length_menu.map((value, key) => {
-                                              return (<option key={value}>{value}</option>);
-                                          })}
-                                          <option value={this.props.records.length}>All</option>
-                                      </select>
-                                  ) : null}
-                                  <div className="input-group-addon input-group-prepend">
+                </div>
+                {(_.includes(this.config.language.length_menu, '_MENU_')) ? (
+                  <select type="text" className="form-control" style={style.table_size_dropdown}
+                    onChange={this.changePageSize.bind(this)}>
+                    {this.config.length_menu.map((value, key) => {
+                      return (<option key={value}>{value}</option>);
+                    })}
+                    <option value={this.props.records.length}>All</option>
+                  </select>
+                ) : null}
+                <div className="input-group-addon input-group-prepend">
                   <span className="input-group-text" style={style.table_size}>
                     {(lengthMenuText[1]) ? lengthMenuText[1] : ''}
                   </span>
-                                  </div>
-                              </div>
-                          ) : null}
-                      </div>
-                      <div className="col-md-6 float-right text-right">
-                          {(this.config.show_filter) ? (
-                              <div className="table_filter" style={style.table_filter}>
-                                  <input
-                                      type="search"
-                                      className="form-control"
-                                      placeholder={this.config.language.filter}
-                                      onChange={this.filterRecords.bind(this)} />
-                              </div>) : null}
-                          <div className="table_tools" style={style.table_tool}>
-                              {(this.config.button.excel) ? (
-                                  <button className="btn btn-primary buttons-excel"
-                                          tabIndex="0"
-                                          aria-controls="configuration_tbl"
-                                          title="Export to Excel"
-                                          style={style.table_tool_btn}
-                                          onClick={this.exportToExcel}>
+                </div>
+              </div>
+            ) : null}
+          </div>
+          <div className="col-6 float-right text-right">
+            {(this.config.show_filter) ? (
+              <div className="table_filter" style={style.table_filter}>
+                <input
+                  type="search"
+                  className="form-control"
+                  placeholder={this.config.language.filter}
+                  onChange={this.filterRecords.bind(this)} />
+              </div>) : null}
+            <div className="table_tools" style={style.table_tool}>
+            {(this.config.button.excel) ? (
+              <button className="btn btn-primary buttons-excel"
+                tabIndex="0"
+                aria-controls="configuration_tbl"
+                title="Export to Excel"
+                style={style.table_tool_btn}
+                onClick={this.exportToExcel}>
                 <span>
                   <i className="fa fa-file-excel-o" aria-hidden="true"></i>
                 </span>
-                                  </button>
-                              ) : null}
-                              {(this.config.button.csv) ? (
-                                  <button className="btn btn-primary buttons-csv"
-                                          tabIndex="0"
-                                          aria-controls="configuration_tbl"
-                                          title="Export to CSV"
-                                          style={style.table_tool_btn}
-                                          onClick={this.exportToCSV}>
+              </button>
+              ) : null}
+            {(this.config.button.csv) ? (
+              <button className="btn btn-primary buttons-csv"
+                tabIndex="0"
+                aria-controls="configuration_tbl"
+                title="Export to CSV"
+                style={style.table_tool_btn}
+                onClick={this.exportToCSV}>
                 <span>
                   <i className="fa fa-file-text-o" aria-hidden="true"></i>
                 </span>
-                                  </button>
-                              ) : null}
-                              {(this.config.button.print) ? (
-                                  <button className="btn btn-primary buttons-pdf"
-                                          tabIndex="0"
-                                          aria-controls="configuration_tbl"
-                                          title="Export to PDF"
-                                          style={style.table_tool_btn}
-                                          onClick={this.exportToPDF}>
+              </button>
+              ) : null}
+              {(this.config.button.print) ? (
+                <button className="btn btn-primary buttons-pdf"
+                  tabIndex="0"
+                  aria-controls="configuration_tbl"
+                  title="Export to PDF"
+                  style={style.table_tool_btn}
+                  onClick={this.exportToPDF}>
                   <span>
                     <i className="glyphicon glyphicon-print fa fa-print" aria-hidden="true"></i>
                   </span>
-                                  </button>
-                              ) : null}
-                          </div>
-                      </div>
-                  </div>
-              )
-          }
-      }
-    }
-    function showFooter(){
-      if(this){
-          if(this.config.show_info==true || this.config.show_pagination==true){
-              return (
-                  <div className="row table-foot asrt-table-foot" id={(this.props.id) ? this.props.id + "-table-foot" : ""}>
-                      <div className="col-md-6">
-                          {(this.config.show_info) ? paginationInfo : null}
-                      </div>
-                      <div className="col-md-6 pull-right text-right">
-                          {(this.config.show_pagination) ? (
-                              <nav aria-label="Page navigation" className="pull-right">
-                                  <ul className="pagination justify-content-end asrt-pagination">
-                                      {(this.config.show_first) ? (
-                                          <li className={(isFirst ? "disabled " : "") + "page-item"}>
-                                              <a href='#' className="page-link" tabIndex="-1"
-                                                 onClick={this.firstPage.bind(this)}>
-                                                  {this.config.language.pagination.first}
-                                              </a>
-                                          </li>
-                                      ) : null}
-                                      <li className={(isFirst ? "disabled " : "") + "page-item"}>
-                                          <a href='#' className="page-link" tabIndex="-1"
-                                             onClick={this.previousPage.bind(this)}>
-                                              {this.config.language.pagination.previous}
-                                          </a>
-                                      </li>
-                                      <li className="page-item">
-                                          <a className="page-link">{this.state.page_number}</a>
-                                      </li>
-                                      <li className={(isLast ? "disabled " : "") + "page-item"}>
-                                          <a href='#' className="page-link"
-                                             onClick={this.nextPage.bind(this)}>
-                                              {this.config.language.pagination.next}
-                                          </a>
-                                      </li>
-                                      {(this.config.show_last) ? (
-                                          <li className={(isLast ? "disabled " : "") + "page-item"}>
-                                              <a href='#' className="page-link" tabIndex="-1"
-                                                 onClick={this.lastPage.bind(this)}>
-                                                  {this.config.language.pagination.last}
-                                              </a>
-                                          </li>
-                                      ) : null}
-                                  </ul>
-                              </nav>) : null}
-                      </div>
-                  </div>
-              )
-          }
-      }
-    }
-    return (
-      <div className="as-react-table" id={(this.props.id) ? this.props.id + "-container" : ""}>
-        {
-          showHeader()
-        }
+                </button>
+              ) : null}
+            </div>
+          </div>
+        </div>
         <div className="row table-body asrt-table-body" style={style.table_body} id={(this.props.id) ? this.props.id + "-table-body" : ""}>
-          <div className="col-md-12">
+          <div className="col-12">
             <table className={this.props.className} id={this.props.id}>
-              <thead className={this.props.tHeadClassName?tHeadClassName:''}>
+              <thead>
                 <tr>
                   {
                     this.props.columns.map((column, index) => {
@@ -596,10 +536,9 @@ class ReactDatatable extends Component {
                       }
 
                       classText += " text-" + align;
-                      /*if(column.className)
-                      classText += " " + column.className;*/
-                      if(column.TrOnlyClassName)
-                        classText += " " + column.TrOnlyClassName;
+                      if(column.className)
+                      classText += " " + column.className;
+
                       return (<th
                         key={(column.key) ? column.key : column.text}
                         className={classText}
@@ -621,14 +560,14 @@ class ReactDatatable extends Component {
                         this.props.columns.map((column, colIndex) => {
                           if (column.cell && typeof column.cell === "function") {
                             return (<td className={column.className} key={(column.key) ? column.key : column.text}>{column.cell(record,rowIndex)}</td>);
-                          }else if (record[column.key]) {
+                          }else if (typeof record[column.key] === 'string' || record[column.key] instanceof String) {
                             return (<td className={column.className} key={(column.key) ? column.key : column.text}>
                               {record[column.key]}
-                            </td>);
+                            </td>, []);
                           }else {
-                            return <td className={column.className} key={(column.key) ? column.key : column.text}></td>
+                            return <td className={column.className} key={(column.key) ? column.key : column.text}>{[column.key]}</td>
                           }
-                        })
+                        }, [])
                       }
                     </tr>
                   )
@@ -641,17 +580,54 @@ class ReactDatatable extends Component {
             </table>
           </div>
         </div>
-        {
-          showFooter()
-        }
+        <div className="row table-foot asrt-table-foot" id={(this.props.id) ? this.props.id + "-table-foot" : ""}>
+          <div className="col-md-6">
+            {(this.config.show_info) ? paginationInfo : null}
+          </div>
+          <div className="col-md-6 pull-right text-right">
+            {(this.config.show_pagination) ? (
+              <nav aria-label="Page navigation" className="pull-right">
+                <ul className="pagination justify-content-end asrt-pagination">
+                  {(this.config.show_first) ? (
+                    <li className={(isFirst ? "disabled " : "") + "page-item"}>
+                      <a href='#' className="page-link" tabIndex="-1"
+                        onClick={this.firstPage.bind(this)}>
+                        {this.config.language.pagination.first}
+                      </a>
+                    </li>
+                  ) : null}
+                  <li className={(isFirst ? "disabled " : "") + "page-item"}>
+                    <a href='#' className="page-link" tabIndex="-1"
+                      onClick={this.previousPage.bind(this)}>
+                      {this.config.language.pagination.previous}
+                    </a>
+                  </li>
+                  <li className="page-item">
+                    <a className="page-link">{this.state.page_number}</a>
+                  </li>
+                  <li className={(isLast ? "disabled " : "") + "page-item"}>
+                    <a href='#' className="page-link"
+                      onClick={this.nextPage.bind(this)}>
+                      {this.config.language.pagination.next}
+                    </a>
+                  </li>
+                  {(this.config.show_last) ? (
+                    <li className={(isLast ? "disabled " : "") + "page-item"}>
+                      <a href='#' className="page-link" tabIndex="-1"
+                        onClick={this.lastPage.bind(this)}>
+                        {this.config.language.pagination.last}
+                      </a>
+                    </li>
+                  ) : null}
+                </ul>
+              </nav>) : null}
+          </div>
+        </div>
       </div>
     )
   }
 }
 
-
-
-
 /**
 * Define component display name
 */
@@ -704,4 +680,4 @@ ReactDatatable.defaultProps = {
   onRowClicked: () => { }
 }
 
-export default ReactDatatable;
+export default ReactDatatable;
\ No newline at end of file

From d3af770873ea819dcfbd569486e9f87c60d48c61 Mon Sep 17 00:00:00 2001
From: Eric <erickims08@gmail.com>
Date: Mon, 24 Feb 2020 10:56:54 +0300
Subject: [PATCH 3/6] Adjusted the width of table filter

---
 lib/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/index.js b/lib/index.js
index af57698..b42c766 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -60,7 +60,7 @@ var style = {
     display: 'inline-block',
     verticalAlign: 'top',
     marginRight: '5px',
-    width: '240px'
+    width: '190px'
   },
   table_tool: {
     display: 'inline-block',

From 3dcd3b3e91511d9e08114fff3a89d9ad06c10486 Mon Sep 17 00:00:00 2001
From: Eric <erickims08@gmail.com>
Date: Mon, 24 Feb 2020 11:05:25 +0300
Subject: [PATCH 4/6] Added new changes

---
 lib/index.js |  14 ----
 src/index.js | 198 ---------------------------------------------------
 2 files changed, 212 deletions(-)

diff --git a/lib/index.js b/lib/index.js
index e622e64..66e5d03 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -654,7 +654,6 @@ var ReactDatatable = function (_Component) {
       return _react2.default.createElement(
         'div',
         { className: 'as-react-table', id: this.props.id ? this.props.id + "-container" : "" },
-<<<<<<< HEAD
         _react2.default.createElement(
           'div',
           { className: 'row table-head asrt-table-head', id: this.props.id ? this.props.id + "-table-head" : "" },
@@ -761,19 +760,6 @@ var ReactDatatable = function (_Component) {
             )
           )
         ),
-=======
-        _react2.default.createElement(TableHeader, {
-          config: this.config,
-          id: this.props.id,
-          lengthMenuText: lengthMenuText,
-          recordLength: this.props.dynamic ? this.props.total_record : this.props.records.length,
-          filterRecords: this.filterRecords.bind(this),
-          changePageSize: this.changePageSize.bind(this),
-          exportToExcel: this.exportToExcel.bind(this),
-          exportToCSV: this.exportToCSV.bind(this),
-          exportToPDF: this.exportToPDF.bind(this),
-          extraButtons: this.props.extraButtons }),
->>>>>>> 36eeb90dd7170d88154539bf8ee239064f1268b4
         _react2.default.createElement(
           'div',
           { className: 'row table-body asrt-table-body', style: style.table_body, id: this.props.id ? this.props.id + "-table-body" : "" },
diff --git a/src/index.js b/src/index.js
index 575b22b..f6173e2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -441,7 +441,6 @@ class ReactDatatable extends Component {
     paginationInfo = paginationInfo.replace('_START_', (this.state.page_number == 1) ? 1 : startRecords);
     paginationInfo = paginationInfo.replace('_END_', endRecords);
     paginationInfo = paginationInfo.replace('_TOTAL_', totalRecords);
-<<<<<<< HEAD
 
     return (
       <div className="as-react-table" id={(this.props.id) ? this.props.id + "-container" : ""}>
@@ -520,29 +519,10 @@ class ReactDatatable extends Component {
             </div>
           </div>
         </div>
-=======
-    return (
-      <div className="as-react-table" id={(this.props.id) ? this.props.id + "-container" : ""}>
-        <TableHeader
-          config={this.config}
-          id={this.props.id}
-          lengthMenuText={lengthMenuText}
-          recordLength={(this.props.dynamic) ? this.props.total_record : this.props.records.length}
-          filterRecords={this.filterRecords.bind(this)}
-          changePageSize={this.changePageSize.bind(this)}
-          exportToExcel={this.exportToExcel.bind(this)}
-          exportToCSV={this.exportToCSV.bind(this)}
-          exportToPDF={this.exportToPDF.bind(this)}
-          extraButtons={this.props.extraButtons}/>
->>>>>>> 36eeb90dd7170d88154539bf8ee239064f1268b4
         <div className="row table-body asrt-table-body" style={style.table_body} id={(this.props.id) ? this.props.id + "-table-body" : ""}>
           <div className="col-12">
             <table className={this.props.className} id={this.props.id}>
-<<<<<<< HEAD
               <thead>
-=======
-              <thead className={this.props.tHeadClassName ? this.props.tHeadClassName : ''}>
->>>>>>> 36eeb90dd7170d88154539bf8ee239064f1268b4
                 <tr>
                   {
                     this.props.columns.map((column, index) => {
@@ -602,7 +582,6 @@ class ReactDatatable extends Component {
             </table>
           </div>
         </div>
-<<<<<<< HEAD
         <div className="row table-foot asrt-table-foot" id={(this.props.id) ? this.props.id + "-table-foot" : ""}>
           <div className="col-md-6">
             {(this.config.show_info) ? paginationInfo : null}
@@ -646,188 +625,11 @@ class ReactDatatable extends Component {
               </nav>) : null}
           </div>
         </div>
-=======
-        <TableFooter
-          config={this.config}
-          id={this.props.id}
-          isFirst={isFirst}
-          isLast={isLast}
-          paginationInfo={paginationInfo}
-          page_number={this.state.page_number}
-          firstPage={this.firstPage.bind(this)}
-          lastPage={this.lastPage.bind(this)}
-          previousPage={this.previousPage.bind(this)}
-          nextPage={this.nextPage.bind(this)}
-          changePageSize={this.changePageSize.bind(this)}/>
->>>>>>> 36eeb90dd7170d88154539bf8ee239064f1268b4
       </div>
     )
   }
 }
 
-<<<<<<< HEAD
-=======
-function TableHeader(props){
-  if(props.config.show_length_menu==true || props.config.show_filter==true ||props.config.button.excel==true || props.config.button.csv==true || props.config.button.print==true){
-    return (
-      <div className="row table-head asrt-table-head" id={(props.id) ? props.id + "-table-head" : ""}>
-        <div className="col-md-6">
-          {(props.config.show_length_menu) ? (
-            <div className="input-group asrt-page-length">
-              <div className="input-group-addon input-group-prepend">
-                <span className="input-group-text" style={style.table_size}>
-                  {(props.lengthMenuText[0]) ? props.lengthMenuText[0] : ''}
-                </span>
-              </div>
-              {(_.includes(props.config.language.length_menu, '_MENU_')) ? (
-                <select type="text" className="form-control" style={style.table_size_dropdown}
-                  onChange={props.changePageSize}>
-                  {props.config.length_menu.map((value, key) => {
-                    return (<option key={value}>{value}</option>);
-                  })}
-                  <option value={props.recordLength}>All</option>
-                </select>
-              ) : null}
-              <div className="input-group-addon input-group-prepend">
-                <span className="input-group-text" style={style.table_size}>
-                  {(props.lengthMenuText[1]) ? props.lengthMenuText[1] : ''}
-                </span>
-              </div>
-            </div>
-          ) : null}
-        </div>
-        <div className="col-md-6 float-right text-right">
-          {(props.config.show_filter) ? (
-            <div className="table_filter" style={style.table_filter}>
-              <input
-                type="search"
-                className="form-control"
-                placeholder={props.config.language.filter}
-                onChange={props.filterRecords} />
-            </div>
-          ) : null}
-          <div className="table_tools" style={style.table_tool}>
-            {(props.config.button.excel) ? (
-              <button className="btn btn-primary buttons-excel"
-                tabIndex="0"
-                aria-controls="configuration_tbl"
-                title="Export to Excel"
-                style={style.table_tool_btn}
-                onClick={props.exportToExcel}>
-                <span>
-                  <i className="fa fa-file-excel-o" aria-hidden="true"></i>
-                </span>
-              </button>
-            ) : null}
-            {(props.config.button.csv) ? (
-              <button className="btn btn-primary buttons-csv"
-                tabIndex="0"
-                aria-controls="configuration_tbl"
-                title="Export to CSV"
-                style={style.table_tool_btn}
-                onClick={props.exportToCSV}>
-                <span>
-                  <i className="fa fa-file-text-o" aria-hidden="true"></i>
-                </span>
-              </button>
-            ) : null}
-            {(props.config.button.print) ? (
-              <button className="btn btn-primary buttons-pdf"
-                tabIndex="0"
-                aria-controls="configuration_tbl"
-                title="Export to PDF"
-                style={style.table_tool_btn}
-                onClick={props.exportToPDF}>
-                <span>
-                  <i className="glyphicon glyphicon-print fa fa-print" aria-hidden="true"></i>
-                </span>
-              </button>
-            ) : null}
-            {(props.config.button.extra==true) ? (
-              props.extraButtons.map((elem,index)=>{
-                  elem.clickCount=0;
-                  elem.singleClickTimer='';
-                  return (
-                      <button className={elem.className ? elem.className : "btn btn-primary buttons-pdf"}
-                        tabIndex="0"
-                        aria-controls="configuration_tbl"
-                        title={elem.title?elem.title:"Export to PDF"}
-                        style={style.table_tool_btn}
-                        onClick={(event)=>{
-                          elem.onClick(event);
-                        }}
-                        key={index}>
-                          {elem.children}
-                      </button>
-                  )
-              })
-            ) : null}
-          </div>
-        </div>
-      </div>
-    );
-  } else {
-    return null;
-  }
-}
-
-function TableFooter(props){
-  if(props.config.show_info==true || props.config.show_pagination==true){
-    return (
-      <div className="row table-foot asrt-table-foot" id={(props.id) ? props.id + "-table-foot" : ""}>
-        <div className="col-md-6">
-          {(props.config.show_info) ? props.paginationInfo : null}
-        </div>
-        <div className="col-md-6 pull-right text-right">
-          {(props.config.show_pagination) ? (
-            <nav aria-label="Page navigation" className="pull-right">
-              <ul className="pagination justify-content-end asrt-pagination">
-                {(props.config.show_first) ? (
-                  <li className={(props.isFirst ? "disabled " : "") + "page-item"}>
-                    <a href='#' className="page-link" tabIndex="-1"
-                      onClick={props.firstPage}>
-                      {props.config.language.pagination.first}
-                    </a>
-                  </li>
-                ) : null}
-                <li className={(props.isFirst ? "disabled " : "") + "page-item"}>
-                  <a href='#' className="page-link" tabIndex="-1"
-                    onClick={props.previousPage}>
-                    {props.config.language.pagination.previous}
-                  </a>
-                </li>
-                <li className="page-item">
-                  <a className="page-link">{props.page_number}</a>
-                </li>
-                <li className={(props.isLast ? "disabled " : "") + "page-item"}>
-                  <a href='#' className="page-link"
-                    onClick={props.nextPage}>
-                    {props.config.language.pagination.next}
-                  </a>
-                </li>
-                {(props.config.show_last) ? (
-                  <li className={(props.isLast ? "disabled " : "") + "page-item"}>
-                    <a href='#' className="page-link" tabIndex="-1"
-                      onClick={props.lastPage}>
-                      {props.config.language.pagination.last}
-                    </a>
-                  </li>
-                ) : null}
-              </ul>
-            </nav>
-          ) : null}
-        </div>
-      </div>
-    );
-  } else {
-    return null;
-  }
-}
-
-
-
-
->>>>>>> 36eeb90dd7170d88154539bf8ee239064f1268b4
 /**
 * Define component display name
 */

From 702439fe6b41fe520c4ff7714cb107c6401fa7e6 Mon Sep 17 00:00:00 2001
From: Eric <erickims08@gmail.com>
Date: Mon, 24 Feb 2020 11:19:09 +0300
Subject: [PATCH 5/6] css changes

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index f6173e2..5c0238e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -33,7 +33,7 @@ let style = {
     display: 'inline-block',
     verticalAlign: 'top',
     marginRight: '5px',
-    width: '240px'
+    width: '190px'
   },
   table_tool: {
     display: 'inline-block',

From fbc1d57fd466d7a7641542196618826e9cc01d0e Mon Sep 17 00:00:00 2001
From: Eric <erickims08@gmail.com>
Date: Mon, 24 Feb 2020 13:27:47 +0300
Subject: [PATCH 6/6] Fixed excel export

---
 lib/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/index.js b/lib/index.js
index 66e5d03..e51983d 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -50,7 +50,7 @@ var style = {
     padding: '2px'
   },
   table_size_dropdown: {
-    width: '87px',
+    width: '82px',
     flex: 'none',
     margin: '0px 8px',
     display: 'inline-block',
@@ -366,7 +366,7 @@ var ReactDatatable = function (_Component) {
           href = uri + base64(format(template, ctx));
       var anc = document.createElement('a');
       anc.setAttribute('href', href);
-      anc.setAttribute('download', this.config.filename + '.xlsx');
+      anc.setAttribute('download', this.config.filename);
       anc.click();
     }
   }, {