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

Added configurable export, FA5 support and more #64

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

Added configurable export, FA5 support and more #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
393e364
Added export column feature support
mkikets99 Feb 8, 2021
755ef06
Fixed event support and added export config to columns
mkikets99 Feb 8, 2021
49eda3f
README changes
mkikets99 Feb 8, 2021
8c1941b
FA5 support
mkikets99 Feb 9, 2021
871a747
More fixes to 0 Int (print issues)
mkikets99 Feb 9, 2021
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
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,7 @@ var ReactDatatable = require('@ashvin27/react-datatable')
| key_column | string | id | Use to specify the key column name for each record
| button | Object[] | { excel: false, print: false, csv: false } | Use to enable/disable export buttons(Excel, CSV, Print). By default buttons are disabled.
| filename | String | "table" | Specify the export filename
| fa5_support | Boolean | false | Enables support of Font Awesome 5 for icons
| length_menu | Array[] | [10, 25, 50, 75, 100] | Specify the options in the page length `select` list.
| page_size | Number | 10 | Specify the page length (number of rows per page)
| sort | Object[] | { column: "", order: "asc" } | Initial sorting order to apply to the datatable
Expand All @@ -244,7 +245,8 @@ var ReactDatatable = require('@ashvin27/react-datatable')
| className | String | | Table column additional class fo styling (only for data columns use TrOnlyClassName for headers)
| TrOnlyClassName | String | | Header column additional class ( only for headers ) WILL NOT automatically take className value if not set
| key | String | | Specify the key of record which value will display in table cell
| sortable | Boolean | false | Specify the column is sortable of not
| sortable | Boolean | false | Specify the column is sortable or not
| export | Boolean | true | Specify the column can be exported to documents or not
| text | String | | Specify the table column text
| width | Number | | Specify the column width
| cell | Function(record, index):string | | You can use any react component or JSX to display content in cells
15 changes: 3 additions & 12 deletions example/dist/index.js
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions lib/components/TableHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ var _style2 = _interopRequireDefault(_style);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function TableHeader(props) {
console.log(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 _react2.default.createElement(
'div',
Expand Down Expand Up @@ -93,7 +94,7 @@ function TableHeader(props) {
_react2.default.createElement(
'span',
null,
_react2.default.createElement('i', { className: 'fa fa-file-excel-o', 'aria-hidden': 'true' })
_react2.default.createElement('i', { className: props && props.config && props.config.fa5_support ? "fas fa-file-excel" : "fa fa-file-excel-o", 'aria-hidden': 'true' })
)
) : null,
props.config.button.csv ? _react2.default.createElement(
Expand All @@ -107,7 +108,7 @@ function TableHeader(props) {
_react2.default.createElement(
'span',
null,
_react2.default.createElement('i', { className: 'fa fa-file-text-o', 'aria-hidden': 'true' })
_react2.default.createElement('i', { className: props && props.config && props.config.fa5_support ? "fas fa-file-csv" : "fa fa-file-text-o", 'aria-hidden': 'true' })
)
) : null,
props.config.button.print ? _react2.default.createElement(
Expand All @@ -121,7 +122,7 @@ function TableHeader(props) {
_react2.default.createElement(
'span',
null,
_react2.default.createElement('i', { className: 'glyphicon glyphicon-print fa fa-print', 'aria-hidden': 'true' })
_react2.default.createElement('i', { className: "glyphicon glyphicon-print " + (props && props.config && props.config.fa5_support ? "fas fa-print" : "fa fa-print"), 'aria-hidden': 'true' })
)
) : null,
props.config.button.extra == true ? props.extraButtons.map(function (elem, index) {
Expand Down
54 changes: 32 additions & 22 deletions lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ var ReactDatatable = function (_Component) {
extra: props.config && props.config.button && props.config.button.extra ? props.config.button.extra : false
},
filename: props.config && props.config.filename ? props.config.filename : "table",
fa5_support: props.config && props.config.fa5_support ? props.config.fa5_support : false,
key_column: props.config && props.config.key_column ? props.config.key_column : "id",
language: {
length_menu: props.config && props.config.language && props.config.language.length_menu ? props.config.language.length_menu : "Show _MENU_ records per page",
Expand Down Expand Up @@ -250,7 +251,7 @@ var ReactDatatable = function (_Component) {
key: 'onPageBlur',
value: function onPageBlur(e) {
var pageNumber = e.target.value;
this.goToPage(event, pageNumber);
this.goToPage(e, pageNumber);
}
}, {
key: 'strip',
Expand All @@ -272,7 +273,9 @@ var ReactDatatable = function (_Component) {
for (var _iterator = this.props.columns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var column = _step.value;

tableHtml += "<th>" + column.text + "</th>";
if (column.export !== undefined ? column.export : true) {
tableHtml += "<th>" + column.text + "</th>";
}
}
} catch (err) {
_didIteratorError = true;
Expand Down Expand Up @@ -316,14 +319,16 @@ var ReactDatatable = function (_Component) {
for (var _iterator2 = this.props.columns[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var _column = _step2.value;

if (_column.cell && typeof _column.cell === "function") {
var cellData = _server2.default.renderToStaticMarkup(_column.cell(record, i));
cellData = this.strip(cellData);
tableHtml += "<td>" + cellData + "</td>";
} else if (record[_column.key]) {
tableHtml += "<td>" + record[_column.key] + "</td>";
} else {
tableHtml += "<td></td>";
if (_column.export !== undefined ? _column.export : true) {
if (_column.cell && typeof _column.cell === "function") {
var cellData = _server2.default.renderToStaticMarkup(_column.cell(record, i));
cellData = this.strip(cellData);
tableHtml += "<td>" + cellData + "</td>";
} else if (record[_column.key] !== undefined) {
tableHtml += "<td>" + record[_column.key] + "</td>";
} else {
tableHtml += "<td></td>";
}
}
}
} catch (err) {
Expand Down Expand Up @@ -425,7 +430,9 @@ var ReactDatatable = function (_Component) {
for (var _iterator3 = this.props.columns[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var column = _step3.value;

headers[column.key] = '"' + column.text + '"';
if (column.export !== undefined ? column.export : true) {
headers[column.key] = '"' + column.text + '"';
}
}

// Filter records before export
Expand Down Expand Up @@ -468,16 +475,18 @@ var ReactDatatable = function (_Component) {
for (var _iterator4 = this.props.columns[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
var _column2 = _step4.value;

if (_column2.cell && typeof _column2.cell === "function") {
var cellData = _server2.default.renderToStaticMarkup(_column2.cell(record, i));
cellData = this.strip(cellData);
newRecord[_column2.key] = cellData;
} else if (record[_column2.key]) {
var colValue = record[_column2.key];
colValue = typeof colValue === "string" ? colValue.replace(/"/g, '""') : colValue;
newRecord[_column2.key] = '"' + colValue + '"';
} else {
newRecord[_column2.key] = "";
if (_column2.export !== undefined ? _column2.export : true) {
if (_column2.cell && typeof _column2.cell === "function") {
var cellData = _server2.default.renderToStaticMarkup(_column2.cell(record, i));
cellData = this.strip(cellData);
newRecord[_column2.key] = cellData;
} else if (record[_column2.key] !== undefined) {
var colValue = record[_column2.key];
colValue = typeof colValue === "string" ? colValue.replace(/"/g, '""') : colValue;
newRecord[_column2.key] = '"' + colValue + '"';
} else {
newRecord[_column2.key] = "";
}
}
}
} catch (err) {
Expand Down Expand Up @@ -706,7 +715,7 @@ var ReactDatatable = function (_Component) {
{ className: column.className, key: column.key ? column.key : column.text },
column.cell(record, rowIndex)
);
} else if (record[column.key]) {
} else if (record[column.key] !== undefined) {
return _react2.default.createElement(
'td',
{ className: column.className, key: column.key ? column.key : column.text },
Expand Down Expand Up @@ -776,6 +785,7 @@ ReactDatatable.defaultProps = {
csv: false
},
filename: "table",
fa5_support: false,
key_column: "id",
language: {
length_menu: "Show _MENU_ records per page",
Expand Down
9 changes: 5 additions & 4 deletions src/components/TableHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import includes from 'lodash/includes';
import style from '../style';

export default function TableHeader(props){
console.log(props)
if(props.config.show_length_menu == true
|| props.config.show_filter == true
|| props.config.button.excel == true
Expand Down Expand Up @@ -54,7 +55,7 @@ export default function TableHeader(props){
style={style.table_tool_btn}
onClick={props.exportToExcel}>
<span>
<i className="fa fa-file-excel-o" aria-hidden="true"></i>
<i className={(props&&props.config&&props.config.fa5_support)?"fas fa-file-excel":"fa fa-file-excel-o"} aria-hidden="true"></i>
</span>
</button>
) : null}
Expand All @@ -66,7 +67,7 @@ export default function TableHeader(props){
style={style.table_tool_btn}
onClick={props.exportToCSV}>
<span>
<i className="fa fa-file-text-o" aria-hidden="true"></i>
<i className={(props&&props.config&&props.config.fa5_support)?"fas fa-file-csv":"fa fa-file-text-o"} aria-hidden="true"></i>
</span>
</button>
) : null}
Expand All @@ -78,7 +79,7 @@ export default function TableHeader(props){
style={style.table_tool_btn}
onClick={props.exportToPDF}>
<span>
<i className="glyphicon glyphicon-print fa fa-print" aria-hidden="true"></i>
<i className={"glyphicon glyphicon-print "+((props&&props.config&&props.config.fa5_support)?"fas fa-print":"fa fa-print")} aria-hidden="true"></i>
</span>
</button>
) : null}
Expand Down Expand Up @@ -108,4 +109,4 @@ export default function TableHeader(props){
} else {
return null;
}
}
}
54 changes: 32 additions & 22 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ class ReactDatatable extends Component {
extra : (props.config && props.config.button && props.config.button.extra) ? props.config.button.extra : false,
},
filename: (props.config && props.config.filename) ? props.config.filename : "table",
fa5_support: (props.config && props.config.fa5_support) ? props.config.fa5_support : false,
key_column: props.config && props.config.key_column ? props.config.key_column : "id",
language: {
length_menu: (props.config && props.config.language && props.config.language.length_menu) ? props.config.language.length_menu : "Show _MENU_ records per page",
Expand Down Expand Up @@ -186,7 +187,7 @@ class ReactDatatable extends Component {

onPageBlur(e){
let pageNumber = e.target.value;
this.goToPage(event, pageNumber);
this.goToPage(e, pageNumber);
}

strip(html){
Expand All @@ -199,7 +200,9 @@ class ReactDatatable extends Component {
tableHtml += "<thead>";
tableHtml += "<tr>";
for (let column of this.props.columns) {
tableHtml += "<th>" + column.text + "</th>";
if((column.export!==undefined)?column.export:true){
tableHtml += "<th>" + column.text + "</th>";
}
}
tableHtml += "</tr>";
tableHtml += "</thead>";
Expand All @@ -221,14 +224,16 @@ class ReactDatatable extends Component {
let record = filterRecords[i];
tableHtml += "<tr>";
for (let column of this.props.columns) {
if (column.cell && typeof column.cell === "function") {
let cellData = ReactDOMServer.renderToStaticMarkup(column.cell(record, i));
cellData = this.strip(cellData);
tableHtml += "<td>" + cellData + "</td>";
}else if (record[column.key]) {
tableHtml += "<td>" + record[column.key] + "</td>";
} else {
tableHtml += "<td></td>";
if((column.export!==undefined)?column.export:true){
if (column.cell && typeof column.cell === "function") {
let cellData = ReactDOMServer.renderToStaticMarkup(column.cell(record, i));
cellData = this.strip(cellData);
tableHtml += "<td>" + cellData + "</td>";
}else if (record[column.key]!==undefined) {
tableHtml += "<td>" + record[column.key] + "</td>";
} else {
tableHtml += "<td></td>";
}
}
}
tableHtml += "</tr>";
Expand Down Expand Up @@ -303,7 +308,9 @@ class ReactDatatable extends Component {
let headers = {};
// add columns in sheet array
for (let column of this.props.columns) {
headers[column.key] = '"' + column.text + '"';
if((column.export!==undefined)?column.export:true){
headers[column.key] = '"' + column.text + '"';
}
}

// Filter records before export
Expand All @@ -324,16 +331,18 @@ class ReactDatatable extends Component {
let record = filterRecords[i],
newRecord = {};
for (let column of this.props.columns) {
if (column.cell && typeof column.cell === "function") {
let cellData = ReactDOMServer.renderToStaticMarkup(column.cell(record, i));
cellData = this.strip(cellData);
newRecord[column.key] = cellData;
} else if (record[column.key]) {
let colValue = record[column.key];
colValue = (typeof colValue === "string") ? colValue.replace(/"/g, '""') : colValue;
newRecord[column.key] = '"' + colValue + '"';
} else {
newRecord[column.key] = "";
if((column.export!==undefined)?column.export:true){
if (column.cell && typeof column.cell === "function") {
let cellData = ReactDOMServer.renderToStaticMarkup(column.cell(record, i));
cellData = this.strip(cellData);
newRecord[column.key] = cellData;
} else if (record[column.key]!==undefined) {
let colValue = record[column.key];
colValue = (typeof colValue === "string") ? colValue.replace(/"/g, '""') : colValue;
newRecord[column.key] = '"' + colValue + '"';
} else {
newRecord[column.key] = "";
}
}
}
records.push(newRecord);
Expand Down Expand Up @@ -507,7 +516,7 @@ 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 (record[column.key]!==undefined) {
return (<td className={column.className} key={(column.key) ? column.key : column.text}>
{record[column.key]}
</td>);
Expand Down Expand Up @@ -573,6 +582,7 @@ ReactDatatable.defaultProps = {
csv: false
},
filename: "table",
fa5_support: false,
key_column:"id",
language: {
length_menu: "Show _MENU_ records per page",
Expand Down