diff --git a/lib/index.js b/lib/index.js index b2f445c..e51983d 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: '82px', 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: '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]); } }) ); diff --git a/package.json b/package.json index d0710de..4742458 100644 --- a/package.json +++ b/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": "patelash212@gmail.com" diff --git a/src/index.js b/src/index.js index ee32e52..5c0238e 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: '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 (
- +
+
+ {(this.config.show_length_menu) ? ( +
+
+ + {(lengthMenuText[0]) ? lengthMenuText[0] : ''} + +
+ {(_.includes(this.config.language.length_menu, '_MENU_')) ? ( + + ) : null} +
+ + {(lengthMenuText[1]) ? lengthMenuText[1] : ''} + +
+
+ ) : null} +
+
+ {(this.config.show_filter) ? ( +
+ +
) : null} +
+ {(this.config.button.excel) ? ( + + ) : null} + {(this.config.button.csv) ? ( + + ) : null} + {(this.config.button.print) ? ( + + ) : null} +
+
+
-
+
- + { 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 (); - }else if (record[column.key]) { + }else if (typeof record[column.key] === 'string' || record[column.key] instanceof String) { return (); + , []); }else { - return + return } - }) + }, []) } ) @@ -517,183 +582,54 @@ class ReactDatatable extends Component {
{ if (column.cell && typeof column.cell === "function") { return ({column.cell(record,rowIndex)} {record[column.key]} - {[column.key]}
- -
- ) - } -} - -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 ( -
-
- {(props.config.show_length_menu) ? ( -
-
- - {(props.lengthMenuText[0]) ? props.lengthMenuText[0] : ''} - -
- {(_.includes(props.config.language.length_menu, '_MENU_')) ? ( - - ) : null} -
- - {(props.lengthMenuText[1]) ? props.lengthMenuText[1] : ''} - -
-
- ) : null} -
-
- {(props.config.show_filter) ? ( -
- -
- ) : null} -
- {(props.config.button.excel) ? ( - - ) : null} - {(props.config.button.csv) ? ( - - ) : null} - {(props.config.button.print) ? ( - - ) : null} - {(props.config.button.extra==true) ? ( - props.extraButtons.map((elem,index)=>{ - elem.clickCount=0; - elem.singleClickTimer=''; - return ( - - ) - }) - ) : null} +
+
+ {(this.config.show_info) ? paginationInfo : null}
-
-
- ); - } else { - return null; - } -} - -function TableFooter(props){ - if(props.config.show_info==true || props.config.show_pagination==true){ - return ( -
-
- {(props.config.show_info) ? props.paginationInfo : null} -
-
- {(props.config.show_pagination) ? ( - ) : null} +
- ); - } else { - return null; + ) } } - - - /** * Define component display name */ @@ -746,4 +682,4 @@ ReactDatatable.defaultProps = { onRowClicked: () => { } } -export default ReactDatatable; +export default ReactDatatable; \ No newline at end of file