Added new css to Table length Menu

lib/index.js

@@ -42,25 +42,25 @@ 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: '82px',
     flex: 'none',
-    margin: '0px 10px',
+    margin: '0px 8px',
     display: 'inline-block',
     float: 'none'
   },
   table_filter: {
     display: 'inline-block',
     verticalAlign: 'top',
     marginRight: '5px',
-    width: '250px'
+    width: '190px'
   },
   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 + ')'
   },
@@ -363,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();
     }
   }, {
@@ -651,23 +654,118 @@ var ReactDatatable = function (_Component) {
       return _react2.default.createElement(
         'div',
         { className: 'as-react-table', id: this.props.id ? this.props.id + "-container" : "" },
-        _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 }),
+        _react2.default.createElement(
+          'div',
+          { className: 'row table-head asrt-table-head', id: this.props.id ? this.props.id + "-table-head" : "" },
+          _react2.default.createElement(
+            'div',
+            { className: 'col-6' },
+            this.config.show_length_menu ? _react2.default.createElement(
+              'div',
+              { className: 'input-group asrt-page-length' },
+              _react2.default.createElement(
+                'div',
+                { className: 'input-group-addon input-group-prepend' },
+                _react2.default.createElement(
+                  'span',
+                  { className: 'input-group-text', style: style.table_size },
+                  lengthMenuText[0] ? lengthMenuText[0] : ''
+                )
+              ),
+              _lodash2.default.includes(this.config.language.length_menu, '_MENU_') ? _react2.default.createElement(
+                'select',
+                { type: 'text', className: 'form-control', style: style.table_size_dropdown,
+                  onChange: this.changePageSize.bind(this) },
+                this.config.length_menu.map(function (value, key) {
+                  return _react2.default.createElement(
+                    'option',
+                    { key: value },
+                    value
+                  );
+                }),
+                _react2.default.createElement(
+                  'option',
+                  { value: this.props.records.length },
+                  'All'
+                )
+              ) : null,
+              _react2.default.createElement(
+                'div',
+                { className: 'input-group-addon input-group-prepend' },
+                _react2.default.createElement(
+                  'span',
+                  { className: 'input-group-text', style: style.table_size },
+                  lengthMenuText[1] ? lengthMenuText[1] : ''
+                )
+              )
+            ) : null
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'col-6 float-right text-right' },
+            this.config.show_filter ? _react2.default.createElement(
+              'div',
+              { className: 'table_filter', style: style.table_filter },
+              _react2.default.createElement('input', {
+                type: 'search',
+                className: 'form-control',
+                placeholder: this.config.language.filter,
+                onChange: this.filterRecords.bind(this) })
+            ) : null,
+            _react2.default.createElement(
+              'div',
+              { className: 'table_tools', style: style.table_tool },
+              this.config.button.excel ? _react2.default.createElement(
+                '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 },
+                _react2.default.createElement(
+                  'span',
+                  null,
+                  _react2.default.createElement('i', { className: 'fa fa-file-excel-o', 'aria-hidden': 'true' })
+                )
+              ) : null,
+              this.config.button.csv ? _react2.default.createElement(
+                '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 },
+                _react2.default.createElement(
+                  'span',
+                  null,
+                  _react2.default.createElement('i', { className: 'fa fa-file-text-o', 'aria-hidden': 'true' })
+                )
+              ) : null,
+              this.config.button.print ? _react2.default.createElement(
+                '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 },
+                _react2.default.createElement(
+                  'span',
+                  null,
+                  _react2.default.createElement('i', { className: 'glyphicon glyphicon-print fa fa-print', 'aria-hidden': 'true' })
+                )
+              ) : null
+            )
+          )
+        ),
         _react2.default.createElement(
           'div',
           { 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 },
@@ -732,7 +830,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]);
                       }
                     })
                   );

package.json

@@ -1,6 +1,10 @@
 {
     "name": "@ashvin27/react-datatable",
+<<<<<<< HEAD
     "version": "1.1.10",
+=======
+    "version": "1.1.4",
+>>>>>>> 82c2313879bcda70228872982961456ed4a4785f
     "description": "ReactDatatable is a component which provide ability to create multifunctional table using single component like jQuery Datatable",
     "main": "./lib/index.js",
     "author": {
@@ -9,7 +13,11 @@
         "url": "https://github.com/ashvin27"
     },
     "license": "MIT",
+<<<<<<< HEAD
     "homepage": "https://ashvin27.github.io/react-datatable/",
+=======
+    "homepage": "https://github.com/ashvin27/react-datatable/blob/master/README.md",
+>>>>>>> 82c2313879bcda70228872982961456ed4a4785f
     "bugs": {
         "url": "https://github.com/ashvin27/react-datatable/issues",
         "email": "[email protected]"

src/index.js

@@ -11,28 +11,29 @@ 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'
   },
   table_filter: {
     display: 'inline-block',
     verticalAlign: 'top',
     marginRight: '5px',
-    width: '250px'
+    width: '190px'
   },
   table_tool: {
     display: 'inline-block',
@@ -256,7 +257,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');
@@ -312,7 +313,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]) {
@@ -349,11 +350,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);
@@ -440,23 +441,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);
+
     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}/>
+        <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">
+                  <span className="input-group-text" style={style.table_size}>
+                    {(lengthMenuText[1]) ? lengthMenuText[1] : ''}
+                  </span>
+                </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}>
+                <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}>
+                  <span>
+                    <i className="glyphicon glyphicon-print fa fa-print" aria-hidden="true"></i>
+                  </span>
+                </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 ? this.props.tHeadClassName : ''}>
+              <thead>
                 <tr>
                   {
                     this.props.columns.map((column, index) => {
@@ -472,10 +538,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}
@@ -497,14 +562,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>
                   )
@@ -517,183 +582,54 @@ class ReactDatatable extends Component {
             </table>
           </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)}/>
-      </div>
-    )
-  }
-}
-
-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 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>
-      </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"}>
+          <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={props.firstPage}>
-                      {props.config.language.pagination.first}
+                      onClick={this.previousPage.bind(this)}>
+                      {this.config.language.pagination.previous}
                     </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}
+                  <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>
-                ) : null}
-              </ul>
-            </nav>
-          ) : null}
+                  {(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>
-    );
-  } else {
-    return null;
+    )
   }
 }
 
-
-
-
 /**
 * Define component display name
 */
@@ -746,4 +682,4 @@ ReactDatatable.defaultProps = {
   onRowClicked: () => { }
 }
 
-export default ReactDatatable;
+export default ReactDatatable;