Skip to content

Commit 28d6381

Browse files
gihanranganagihanrangana
committed
print feature added
1 parent c6bd7f9 commit 28d6381

File tree

9 files changed

+264
-50
lines changed

9 files changed

+264
-50
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
[![npm version](https://badge.fury.io/js/react-mui-datatables.svg)](https://badge.fury.io/js/react-mui-datatables)
44

5-
react-mui-datatables is table component for [Material-UI V1](https://www.material-ui.com). This vetsion comes with search,export csv,sort,paginations. more options coming soon.stay with us...
5+
react-mui-datatables is table component for [Material-UI V1](https://www.material-ui.com). This version comes with search,export csv,sort,pagination,print. more options coming soon.stay with us...
66

77

88
## Install
@@ -101,6 +101,7 @@ Use these as option object key.
101101
|**`searchBox`**|bool|true|You can remove search box using this option
102102
|**`csv`**|bool|true|You can remove csv download using this option
103103
|**`indexColumn`**|string||If add custom action button please set the indexColumn as your own array key.
104+
|**`printButton`**|bool|true|You can disable print button using this.
104105

105106
## Custom Styles
106107
You can styles using material ui CreateMuiTheme function.

‎examples/dist/bundle.js‎

Lines changed: 18 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/src/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component } from "react";
22
import { render } from "react-dom";
3-
import MuiDataTable from "../../lib";
3+
import MuiDataTable from "../../src";
44
import data from "./data";
55
import { AppBar, Button, Paper, Toolbar, SvgIcon, IconButton } from "@material-ui/core/es/index";
66
import { createGenerateClassName,createMuiTheme,MuiThemeProvider } from "@material-ui/core/styles";
@@ -78,7 +78,8 @@ class App extends Component {
7878
searchBox : true, /* <-- search true or false */
7979
csv : true, /* <-- csv download true or false */
8080
indexColumn : "fname", /* <-- add your data first unique column name for this like _id, i used fname because i don't have a _id field in my array */
81-
darkTheme : true
81+
darkTheme : true,
82+
printButton: true
8283
};
8384

8485
return (

‎lib/MuiDataTable.js‎

Lines changed: 94 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,14 @@ var _core = require("@material-ui/core");
1818

1919
var _index = require("@material-ui/core/es/index");
2020

21-
require("./styles.css");
21+
var _reactExcelWorkbook = require("react-excel-workbook");
22+
23+
var _reactExcelWorkbook2 = _interopRequireDefault(_reactExcelWorkbook);
2224

2325
var _reactCsv = require("react-csv");
2426

27+
require("./styles.css");
28+
2529
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
2630

2731
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -35,6 +39,15 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
3539
*/
3640

3741

42+
function Excel(props) {
43+
return _react2.default.createElement(
44+
_index.SvgIcon,
45+
props,
46+
_react2.default.createElement("path", {
47+
d: "M 28.8125 0.03125 L 0.8125 5.34375 C 0.339844 5.433594 0 5.863281 0 6.34375 L 0 43.65625 C 0 44.136719 0.339844 44.566406 0.8125 44.65625 L 28.8125 49.96875 C 28.875 49.980469 28.9375 50 29 50 C 29.230469 50 29.445313 49.929688 29.625 49.78125 C 29.855469 49.589844 30 49.296875 30 49 L 30 1 C 30 0.703125 29.855469 0.410156 29.625 0.21875 C 29.394531 0.0273438 29.105469 -0.0234375 28.8125 0.03125 Z M 32 6 L 32 13 L 34 13 L 34 15 L 32 15 L 32 20 L 34 20 L 34 22 L 32 22 L 32 27 L 34 27 L 34 29 L 32 29 L 32 35 L 34 35 L 34 37 L 32 37 L 32 44 L 47 44 C 48.101563 44 49 43.101563 49 42 L 49 8 C 49 6.898438 48.101563 6 47 6 Z M 36 13 L 44 13 L 44 15 L 36 15 Z M 6.6875 15.6875 L 11.8125 15.6875 L 14.5 21.28125 C 14.710938 21.722656 14.898438 22.265625 15.0625 22.875 L 15.09375 22.875 C 15.199219 22.511719 15.402344 21.941406 15.6875 21.21875 L 18.65625 15.6875 L 23.34375 15.6875 L 17.75 24.9375 L 23.5 34.375 L 18.53125 34.375 L 15.28125 28.28125 C 15.160156 28.054688 15.035156 27.636719 14.90625 27.03125 L 14.875 27.03125 C 14.8125 27.316406 14.664063 27.761719 14.4375 28.34375 L 11.1875 34.375 L 6.1875 34.375 L 12.15625 25.03125 Z M 36 20 L 44 20 L 44 22 L 36 22 Z M 36 27 L 44 27 L 44 29 L 36 29 Z M 36 35 L 44 35 L 44 37 L 36 37 Z " })
48+
);
49+
}
50+
3851
var MuiDataTable = function (_Component) {
3952
_inherits(MuiDataTable, _Component);
4053

@@ -48,8 +61,8 @@ var MuiDataTable = function (_Component) {
4861
rowsPerPage: 5,
4962
searchText: "",
5063
showSearch: false,
51-
order: 'asc',
52-
orderBy: ''
64+
order: "asc",
65+
orderBy: ""
5366
};
5467

5568
_this.handleChangePage = _this.handleChangePage.bind(_this);
@@ -84,12 +97,12 @@ var MuiDataTable = function (_Component) {
8497
}, {
8598
key: "handleRequestSort",
8699
value: function handleRequestSort(event, property) {
87-
console.log(event, property);
100+
// console.log(event, property);
88101
var orderBy = property;
89-
var order = 'desc';
102+
var order = "desc";
90103

91-
if (this.state.orderBy === property && this.state.order === 'desc') {
92-
order = 'asc';
104+
if (this.state.orderBy === property && this.state.order === "desc") {
105+
order = "asc";
93106
}
94107

95108
this.setState({ order: order, orderBy: orderBy });
@@ -101,6 +114,15 @@ var MuiDataTable = function (_Component) {
101114
return order === "desc" ? b[orderBy] > a[orderBy] : a[orderBy] > b[orderBy];
102115
};
103116
}
117+
}, {
118+
key: "handlePrint",
119+
value: function handlePrint() {
120+
var content = document.getElementById("print_data").innerHTML;
121+
var win = window.open("about:blank", "", "_blank");
122+
win.document.write(content);
123+
win.print();
124+
win.close();
125+
}
104126
}, {
105127
key: "componentDidMount",
106128
value: function componentDidMount() {}
@@ -123,7 +145,7 @@ var MuiDataTable = function (_Component) {
123145

124146

125147
var download_headers = columns.filter(function (e) {
126-
return e.key !== 'action';
148+
return e.key !== "action";
127149
});
128150

129151
var filteredData = this.props.data.filter(function (x) {
@@ -134,7 +156,7 @@ var MuiDataTable = function (_Component) {
134156

135157
return _react2.default.createElement(
136158
"div",
137-
{ className: options.darkTheme ? 'dark_theme mui_datatables' : 'mui_datatables' },
159+
{ className: options.darkTheme ? "dark_theme mui_datatables" : "mui_datatables" },
138160
_react2.default.createElement(
139161
_index.Toolbar,
140162
{ className: "table_toolbar" },
@@ -211,6 +233,19 @@ var MuiDataTable = function (_Component) {
211233
)
212234
)
213235
)
236+
),
237+
options.printButton && _react2.default.createElement(
238+
_index.Tooltip,
239+
{ title: "Print" },
240+
_react2.default.createElement(
241+
_index.IconButton,
242+
{ onClick: this.handlePrint.bind(this) },
243+
_react2.default.createElement(
244+
_index.Icon,
245+
null,
246+
"print"
247+
)
248+
)
214249
)
215250
)
216251
),
@@ -302,7 +337,53 @@ var MuiDataTable = function (_Component) {
302337
},
303338
onChangePage: this.handleChangePage,
304339
onChangeRowsPerPage: this.handleChangeRowsPerPage
305-
})
340+
}),
341+
_react2.default.createElement(
342+
"div",
343+
{ id: "print_data", style: { display: "none" } },
344+
_react2.default.createElement(
345+
"table",
346+
{ border: "0", cellSpacing: "0", style: {
347+
width: "100%", fontFamily: "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif", fontSize: 14
348+
} },
349+
_react2.default.createElement(
350+
"thead",
351+
null,
352+
_react2.default.createElement(
353+
"tr",
354+
{ style: { background: "#e0e0e0", fontWeight: "bold" } },
355+
columns.map(function (c) {
356+
if (c.key !== "action") {
357+
return _react2.default.createElement(
358+
"td",
359+
{ style: { padding: "8px" }, key: c.key },
360+
c.label
361+
);
362+
}
363+
})
364+
)
365+
),
366+
_react2.default.createElement(
367+
"tbody",
368+
null,
369+
this.props.data.map(function (r, i) {
370+
return _react2.default.createElement(
371+
"tr",
372+
{ key: i, style: { background: i % 2 ? "#f0f0f0" : "", fontSize: 12 } },
373+
columns.map(function (c) {
374+
if (c.key !== "action") {
375+
return _react2.default.createElement(
376+
"td",
377+
{ style: { padding: "8px" }, key: c.key },
378+
r[c.key]
379+
);
380+
}
381+
})
382+
);
383+
})
384+
)
385+
)
386+
)
306387
);
307388
}
308389
}]);
@@ -313,11 +394,12 @@ var MuiDataTable = function (_Component) {
313394
_propTypes2.default.defaultProps = {
314395
options: {
315396
hasIndex: false, /* <-- use numbers for rows*/
316-
customAction: '', /* <-- use action button for row */
397+
customAction: "", /* <-- use action button for row */
317398
searchBox: true, /* <-- search true or false */
318399
csv: true, /* <-- csv download true or false */
319400
indexColumn: "", /* <-- add your data first unique column name for this like _id, i used fname because i don't have a _id field in my array */
320-
darkTheme: false
401+
darkTheme: false,
402+
printButton: true
321403
}
322404
};
323405

‎lib/styles.css‎

Lines changed: 11 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/styles.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/styles.scss‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
2-
.table_toolbar{
1+
.mui_datatables {
2+
overflow-x: auto;
3+
.table_toolbar {
34
padding: 0;
4-
.searchBox{
5+
.searchBox {
56
flex-grow: 1;
67
}
7-
.toolbar_left{
8+
.toolbar_left {
89
flex: 1 1 55%;
910
}
10-
.table_actions{
11+
.table_actions {
1112
flex: 0 0 45%;
1213
text-align: right;
1314
}
14-
1515
}
16+
}

0 commit comments

Comments
 (0)