Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added new css to Table length Menu #27

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Added new css to Table length Menu #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
82c2313
1.1.4
ashvinpdigivalet Dec 14, 2018
463c02d
Added new css to Table length Menu
Ericokim Dec 18, 2019
d3af770
Adjusted the width of table filter
Ericokim Feb 24, 2020
678d389
Merge branch 'development' of https://github.com/ashvin27/react-datat…
Ericokim Feb 24, 2020
5e48df3
Merge branch 'ashvin.patel' of https://github.com/ashvin27/react-data…
Ericokim Feb 24, 2020
3dcd3b3
Added new changes
Ericokim Feb 24, 2020
702439f
css changes
Ericokim Feb 24, 2020
fbc1d57
Fixed excel export
Ericokim Feb 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 117 additions & 19 deletions lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -69,6 +69,9 @@ var style = {
table_tool_btn: {
marginRight: '5px'
},
table_tool_btn_icon: {
marginTop: '14px'
},
sort_asc: {
backgroundImage: 'url(' + _upArrow2.default + ')'
},
Expand Down Expand Up @@ -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();
}
}, {
Expand Down Expand Up @@ -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 },
Expand Down Expand Up @@ -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]);
}
})
);
Expand Down
8 changes: 8 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": {
Expand All @@ -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"
Expand Down
Loading