Skip to content

Commit 8ca774a

Browse files
ashvin27ashvin27
committed
added loader props documentatiom
1 parent a6c6f6b commit 8ca774a

File tree

11 files changed

+595
-256
lines changed

11 files changed

+595
-256
lines changed

‎README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -216,8 +216,9 @@ var ReactDatatable = require('@ashvin27/react-datatable')
216216
| total_record | Number | This props will used to specify the total records in case of table data is server side.
217217
| onChange | Function(Object) | This method will call on table actions(page change, sorting, filtering, page length change)
218218
| onRowClicked | Function(Object) | This method will call when user click on a row, return row object.
219-
| extraButtons | Object[] | this props will add custom extra buttons to the table tools in the top right of the table header next to the built in export buttons
220-
| onSort | function(String, Object[], String) | this props will allow you to sort your data/records using any custom sort function. Or according to you if you don't want to use default sort function provided by the Library.
219+
| extraButtons | Object[] | This props will add custom extra buttons to the table tools in the top right of the table header next to the built in export buttons
220+
| onSort | function(String, Object[], String) | This props will allow you to sort your data/records using any custom sort function. Or according to you if you don't want to use default sort function provided by the Library.
221+
| loading | Boolean(default false) | This props will allow you to display a loading in table while data is fetching from the server.
221222

222223
## Options
223224
| Name | Type | default | Description

‎lib/assets/css/style.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
th.sortable {
2+
color: #2196F3;
3+
cursor: pointer;
4+
background-repeat: no-repeat;
5+
background-position: 95% 50%;
6+
background-size: 16px;
7+
}
8+
.as-react-table .input-group-text:empty{
9+
display: none;
10+
}
11+
.asrt-page-length{
12+
display: inline-block;
13+
}
14+
.asrt-page-length .input-group-addon{
15+
display: inline-block;
16+
width: auto;
17+
margin: 0;
18+
padding: 0;
19+
background: #fff;
20+
border: none;
21+
}
22+
.asrt-pagination {
23+
margin: 0;
24+
}
25+
.asrt-td-loading {
26+
background-color: #fff;
27+
}
28+
.asrt-loading-textwrap{
29+
padding: 5px 0px;
30+
}

‎lib/assets/img/down-arrow.png

634 Bytes
Loading

‎lib/assets/img/up-arrow.png

636 Bytes
Loading

‎lib/components/ADPagination.js

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = ADPagination;
7+
8+
var _react = require("react");
9+
10+
var _react2 = _interopRequireDefault(_react);
11+
12+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13+
14+
function ADPagination(props) {
15+
var size = props.pages;
16+
var page = props.page_number;
17+
var step = 2;
18+
var tags = [];
19+
var pagination = props.language.pagination;
20+
21+
22+
var Item = function Item(props) {
23+
var className = props.className || "";
24+
return _react2.default.createElement(
25+
"li",
26+
{ className: "page-item " + className },
27+
_react2.default.createElement(
28+
"a",
29+
{ href: "#", className: "page-link", tabIndex: "-1",
30+
onClick: function onClick(e) {
31+
e.preventDefault();props.onClick(e);
32+
} },
33+
props.children
34+
)
35+
);
36+
};
37+
38+
var Add = function Add(s, f) {
39+
var _loop = function _loop(i) {
40+
tags.push(_react2.default.createElement(
41+
Item,
42+
{
43+
key: i,
44+
className: page == i ? "active" : "",
45+
onClick: function onClick(e) {
46+
return props.goToPage(e, i);
47+
} },
48+
i
49+
));
50+
};
51+
52+
for (var i = s; i < f; i++) {
53+
_loop(i);
54+
}
55+
};
56+
57+
var Last = function Last() {
58+
tags.push(_react2.default.createElement(
59+
Item,
60+
{ key: "l..." },
61+
"..."
62+
));
63+
tags.push(_react2.default.createElement(
64+
Item,
65+
{ key: size,
66+
className: page == size ? "active" : "",
67+
onClick: function onClick(e) {
68+
return props.goToPage(e, size);
69+
} },
70+
size
71+
));
72+
};
73+
74+
var First = function First() {
75+
tags.push(_react2.default.createElement(
76+
Item,
77+
{
78+
key: "1",
79+
className: page == 1 ? "active" : "",
80+
onClick: function onClick(e) {
81+
return props.goToPage(e, 1);
82+
} },
83+
"1"
84+
));
85+
tags.push(_react2.default.createElement(
86+
Item,
87+
{ key: "f..." },
88+
"..."
89+
));
90+
};
91+
92+
tags.push(_react2.default.createElement(
93+
Item,
94+
{
95+
key: "p0",
96+
className: props.isFirst ? "disabled " : "",
97+
onClick: props.previousPage },
98+
pagination.previous ? pagination.previous : _react2.default.createElement(
99+
"span",
100+
null,
101+
"\u25C4"
102+
)
103+
));
104+
105+
if (size < step * 2 + 6) {
106+
Add(1, size + 1);
107+
} else if (page < step * 2 + 1) {
108+
Add(1, step * 2 + 4);
109+
Last();
110+
} else if (page > size - step * 2) {
111+
First();
112+
Add(size - step * 2 - 2, size + 1);
113+
} else {
114+
First();
115+
Add(page - step, page + step + 1);
116+
Last();
117+
}
118+
119+
tags.push(_react2.default.createElement(
120+
Item,
121+
{
122+
key: "n0",
123+
className: props.isLast ? "disabled " : "",
124+
onClick: props.nextPage },
125+
pagination.next ? pagination.next : _react2.default.createElement(
126+
"span",
127+
null,
128+
"\u25BA"
129+
)
130+
));
131+
132+
return tags;
133+
}

‎lib/components/Pagination.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = InitialPagination;
7+
8+
var _react = require("react");
9+
10+
var _react2 = _interopRequireDefault(_react);
11+
12+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13+
14+
function InitialPagination(props) {
15+
return _react2.default.createElement(
16+
_react.Fragment,
17+
null,
18+
props.config.show_first ? _react2.default.createElement(
19+
"li",
20+
{ className: (props.isFirst ? "disabled " : "") + "page-item" },
21+
_react2.default.createElement(
22+
"a",
23+
{ href: "#", className: "page-link", tabIndex: "-1",
24+
onClick: props.firstPage },
25+
props.config.language.pagination.first
26+
)
27+
) : null,
28+
_react2.default.createElement(
29+
"li",
30+
{ className: (props.isFirst ? "disabled " : "") + "page-item" },
31+
_react2.default.createElement(
32+
"a",
33+
{ href: "#", className: "page-link", tabIndex: "-1",
34+
onClick: props.previousPage },
35+
props.config.language.pagination.previous
36+
)
37+
),
38+
_react2.default.createElement(
39+
"li",
40+
{ className: "page-item" },
41+
_react2.default.createElement(
42+
"a",
43+
{ className: "page-link" },
44+
_react2.default.createElement("input", { style: {
45+
border: 'none',
46+
padding: '0',
47+
maxWidth: '30px',
48+
textAlign: 'center',
49+
display: 'inline-block'
50+
},
51+
type: "text",
52+
value: props.is_temp_page ? props.temp_page_number : props.page_number,
53+
onChange: function onChange(e) {
54+
return props.onPageChange(e, true);
55+
},
56+
onBlur: props.onPageBlur,
57+
onKeyDown: props.onPageChange })
58+
)
59+
),
60+
_react2.default.createElement(
61+
"li",
62+
{ className: (props.isLast ? "disabled " : "") + "page-item" },
63+
_react2.default.createElement(
64+
"a",
65+
{ href: "#", className: "page-link",
66+
onClick: props.nextPage },
67+
props.config.language.pagination.next
68+
)
69+
),
70+
props.config.show_last ? _react2.default.createElement(
71+
"li",
72+
{ className: (props.isLast ? "disabled " : "") + "page-item" },
73+
_react2.default.createElement(
74+
"a",
75+
{ href: "#", className: "page-link", tabIndex: "-1",
76+
onClick: props.lastPage },
77+
props.config.language.pagination.last
78+
)
79+
) : null
80+
);
81+
}

‎lib/components/TableFooter.js

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = TableFooter;
7+
8+
var _react = require('react');
9+
10+
var _react2 = _interopRequireDefault(_react);
11+
12+
var _Pagination = require('./Pagination');
13+
14+
var _Pagination2 = _interopRequireDefault(_Pagination);
15+
16+
var _ADPagination = require('./ADPagination');
17+
18+
var _ADPagination2 = _interopRequireDefault(_ADPagination);
19+
20+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21+
22+
function TableFooter(props) {
23+
if (props.config.show_info == true || props.config.show_pagination == true) {
24+
return _react2.default.createElement(
25+
'div',
26+
{ className: 'row table-foot asrt-table-foot', id: props.id ? props.id + "-table-foot" : "" },
27+
_react2.default.createElement(
28+
'div',
29+
{ className: 'col-md-6' },
30+
props.config.show_info ? props.paginationInfo : null
31+
),
32+
_react2.default.createElement(
33+
'div',
34+
{ className: 'col-md-6 pull-right text-right' },
35+
props.config.show_pagination ? _react2.default.createElement(
36+
'nav',
37+
{ 'aria-label': 'Page navigation', className: 'pull-right' },
38+
_react2.default.createElement(
39+
'ul',
40+
{ className: 'pagination justify-content-end asrt-pagination' },
41+
props.config.pagination == "basic" ? _react2.default.createElement(_Pagination2.default, {
42+
config: props.config,
43+
isFirst: props.isFirst,
44+
isLast: props.isLast,
45+
pages: props.pages,
46+
page_number: props.page_number,
47+
is_temp_page: props.is_temp_page,
48+
temp_page_number: props.temp_page_number,
49+
previousPage: props.previousPage,
50+
firstPage: props.firstPage,
51+
nextPage: props.nextPage,
52+
lastPage: props.lastPage,
53+
goToPage: props.goToPage,
54+
onPageChange: props.onPageChange,
55+
onPageBlur: props.onPageBlur }) : _react2.default.createElement(_ADPagination2.default, {
56+
language: props.config.language,
57+
isFirst: props.isFirst,
58+
isLast: props.isLast,
59+
pages: props.pages,
60+
page_number: props.page_number,
61+
previousPage: props.previousPage,
62+
nextPage: props.nextPage,
63+
goToPage: props.goToPage })
64+
)
65+
) : null
66+
)
67+
);
68+
} else {
69+
return null;
70+
}
71+
}

0 commit comments

Comments
 (0)