Skip to content

Commit 81d5236

Browse files
myaposmyapos
committed
preparing hasFooter attribute for react-bootstrap table
1 parent 91b4dca commit 81d5236

File tree

4 files changed

+153
-37
lines changed

4 files changed

+153
-37
lines changed

‎examples/js/sort/custom-sort-table-has-footer.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/* eslint max-len: 0 */
2+
import React from 'react';
3+
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
4+
5+
6+
const products = [];
7+
8+
function addProducts(quantity) {
9+
const startId = products.length;
10+
for (let i = 0; i < quantity; i++) {
11+
const id = startId + i;
12+
if (i === quantity - 1) {
13+
products.push({
14+
id: id,
15+
name: 'Footer ',
16+
price: 2100 + Math.floor(Math.random() * 100) + 1,
17+
isFooter: true
18+
});
19+
} else {
20+
products.push({
21+
id: id,
22+
name: 'Item name ' + id,
23+
price: 2100 + Math.floor(Math.random() * 100) + 1,
24+
isFooter: false
25+
});
26+
}
27+
}
28+
}
29+
30+
addProducts(20);
31+
32+
function revertSortFunc(a, b, order) { // order is desc or asc
33+
34+
if (order === 'desc') {
35+
return a.price - b.price;
36+
} else {
37+
return b.price - a.price;
38+
}
39+
}
40+
41+
function sortStrings(a, b, order) {
42+
if (order === 'desc') {
43+
return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
44+
} else {
45+
return b.name.toLowerCase().localeCompare(a.name.toLowerCase());
46+
}
47+
}
48+
49+
export default class CustomSortTableHasFooter extends React.Component {
50+
render() {
51+
const options = {
52+
hasFooter: true
53+
};
54+
return (
55+
<BootstrapTable data={ products } options={ options }>
56+
<TableHeaderColumn dataField='id' isKey={ true } dataSort={ true }>Product ID</TableHeaderColumn>
57+
<TableHeaderColumn dataField='name' dataSort={ true } sortFunc={ sortStrings }>Product Name</TableHeaderColumn>
58+
<TableHeaderColumn dataField='price' dataSort={ true } sortFunc={ revertSortFunc }>Product Price</TableHeaderColumn>
59+
</BootstrapTable>
60+
);
61+
}
62+
}

‎examples/js/sort/demo.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import MultiSortTable from './multi-sort-table';
55
import DefaultSortTable from './default-sort-table';
66
import ExternalSort from './manage-sort-external-table';
77
import CustomSortTable from './custom-sort-table';
8+
import CustomSortTableHasFooter from './custom-sort-table-has-footer';
89
import CustomSortWithExtraDataTable from './custom-sort-with-extra-data-table';
910
import ReusableCustomSortTable from './reusable-custom-sort-table';
1011
import SortHookTable from './sort-hook-table';
@@ -70,6 +71,15 @@ class Demo extends React.Component {
7071
</div>
7172
</div>
7273
</div>
74+
<div className='col-md-offset-1 col-md-8'>
75+
<div className='panel panel-default'>
76+
<div className='panel-heading'>Customize Table Sort Example With Footer</div>
77+
<div className='panel-body'>
78+
<h5>Source in /examples/js/sort/custom-sort-table-has-footer.js</h5>
79+
<CustomSortTableHasFooter />
80+
</div>
81+
</div>
82+
</div>
7383
<div className='col-md-offset-1 col-md-8'>
7484
<div className='panel panel-default'>
7585
<div className='panel-heading'>Customize Table Sort With Extra Data Example</div>

‎src/BootstrapTable.js

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ class BootstrapTable extends Component {
2323
this.isIE = document.documentMode;
2424
}
2525
this.store = new TableDataStore(this.props.data ? this.props.data.slice() : []);
26-
this.isVerticalScroll = false;
2726
this.initTable(this.props);
2827

2928
if (this.props.selectRow && this.props.selectRow.selected) {
@@ -98,7 +97,8 @@ class BootstrapTable extends Component {
9897
colInfos: this.colInfos,
9998
multiColumnSearch: props.multiColumnSearch,
10099
multiColumnSort: props.multiColumnSort,
101-
remote: this.props.remote
100+
remote: this.props.remote,
101+
hasFooter: this.props.options.hasFooter
102102
});
103103
}
104104

@@ -225,6 +225,7 @@ class BootstrapTable extends Component {
225225
const sortList = this.store.getSortInfo();
226226
const sortField = options.sortName;
227227
const sortOrder = options.sortOrder;
228+
228229
if (sortField && sortOrder) {
229230
this.store.setSortInfo(sortOrder, sortField);
230231
this.store.sort();
@@ -381,6 +382,7 @@ class BootstrapTable extends Component {
381382
expandableRow={ this.props.expandableRow }
382383
expandRowBgColor={ this.props.options.expandRowBgColor }
383384
expandBy={ this.props.options.expandBy || Const.EXPAND_BY_ROW }
385+
hasFooter={ this.props.options.hasFooter }
384386
columns={ columns }
385387
trClassName={ this.props.trClassName }
386388
striped={ this.props.striped }
@@ -1152,7 +1154,7 @@ class BootstrapTable extends Component {
11521154

11531155
const scrollBarWidth = isScroll ? Util.getScrollBarWidth() : 0;
11541156
if (firstRow && this.store.getDataNum()) {
1155-
if (isScroll || this.isVerticalScroll !== isScroll) {
1157+
if (isScroll) {
11561158
const cells = firstRow.childNodes;
11571159
for (let i = 0; i < cells.length; i++) {
11581160
const cell = cells[i];
@@ -1190,7 +1192,6 @@ class BootstrapTable extends Component {
11901192
}
11911193
});
11921194
}
1193-
this.isVerticalScroll = isScroll;
11941195
}
11951196

11961197
_adjustHeight() {
@@ -1271,7 +1272,7 @@ BootstrapTable.propTypes = {
12711272
Const.ROW_SELECT_MULTI
12721273
]),
12731274
customComponent: PropTypes.func,
1274-
bgColor: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
1275+
bgColor: PropTypes.string,
12751276
selected: PropTypes.array,
12761277
onSelect: PropTypes.func,
12771278
onSelectAll: PropTypes.func,
@@ -1292,6 +1293,7 @@ BootstrapTable.propTypes = {
12921293
}),
12931294
insertRow: PropTypes.bool,
12941295
deleteRow: PropTypes.bool,
1296+
hasFooter: PropTypes.bool,
12951297
search: PropTypes.bool,
12961298
columnFilter: PropTypes.bool,
12971299
trClassName: PropTypes.any,
@@ -1416,6 +1418,7 @@ BootstrapTable.defaultProps = {
14161418
pagination: false,
14171419
printable: false,
14181420
keyBoardNav: false,
1421+
hasFooter: false,
14191422
searchPlaceholder: undefined,
14201423
selectRow: {
14211424
mode: Const.ROW_SELECT_NONE,

‎src/store/TableDataStore.js

Lines changed: 73 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export class TableDataStore {
3030
this.remote = props.remote;
3131
this.multiColumnSearch = props.multiColumnSearch;
3232
this.multiColumnSort = props.multiColumnSort;
33+
this.hasFooter = props.hasFooter;
3334
}
3435

3536
clean() {
@@ -155,7 +156,7 @@ export class TableDataStore {
155156
let currentDisplayData = this.getCurrentDisplayData();
156157

157158
currentDisplayData = this._sort(currentDisplayData);
158-
159+
this.data = currentDisplayData;
159160
return this;
160161
}
161162

@@ -570,44 +571,84 @@ export class TableDataStore {
570571
if (this.sortList.length === 0 || typeof(this.sortList[0]) === 'undefined') {
571572
return arr;
572573
}
573-
574-
arr.sort((a, b) => {
575-
let result = 0;
576-
577-
for (let i = 0; i < this.sortList.length; i++) {
578-
const sortDetails = this.sortList[i];
579-
const isDesc = sortDetails.order.toLowerCase() === Const.SORT_DESC;
580-
581-
const { sortFunc, sortFuncExtraData } = this.colInfos[sortDetails.sortField];
582-
583-
if (sortFunc) {
584-
result = sortFunc(a, b, sortDetails.order, sortDetails.sortField, sortFuncExtraData);
585-
} else {
586-
const valueA = a[sortDetails.sortField] === null ? '' : a[sortDetails.sortField];
587-
const valueB = b[sortDetails.sortField] === null ? '' : b[sortDetails.sortField];
588-
if (isDesc) {
589-
if (typeof valueB === 'string') {
590-
result = valueB.localeCompare(valueA);
591-
} else {
592-
result = valueA > valueB ? -1 : ((valueA < valueB) ? 1 : 0);
593-
}
574+
if (this.hasFooter) {
575+
/* if it has hasFooter propery enabled*/
576+
const lastElem = arr[ arr.length - 1];
577+
/* sort all elements except the last one */
578+
const subAr = arr.slice(0, arr.length - 1);
579+
console.log('log:', lastElem, ' :', subAr);
580+
console.log('sorting subar');
581+
/* subAr.sort(this.compare);*/
582+
subAr.sort((a, b) => {
583+
let result = 0;
584+
585+
for (let i = 0; i < this.sortList.length; i++) {
586+
const sortDetails = this.sortList[i];
587+
const isDesc = sortDetails.order.toLowerCase() === Const.SORT_DESC;
588+
589+
const { sortFunc, sortFuncExtraData } = this.colInfos[sortDetails.sortField];
590+
if (sortFunc) {
591+
result = sortFunc(a, b, sortDetails.order, sortDetails.sortField, sortFuncExtraData);
594592
} else {
595-
if (typeof valueA === 'string') {
596-
result = valueA.localeCompare(valueB);
593+
const valueA = a[sortDetails.sortField] === null ? '' : a[sortDetails.sortField];
594+
const valueB = b[sortDetails.sortField] === null ? '' : b[sortDetails.sortField];
595+
if (isDesc) {
596+
if (typeof valueB === 'string') {
597+
result = valueB.localeCompare(valueA);
598+
} else {
599+
result = valueA > valueB ? -1 : ((valueA < valueB) ? 1 : 0);
600+
}
597601
} else {
598-
result = valueA < valueB ? -1 : ((valueA > valueB) ? 1 : 0);
602+
if (typeof valueA === 'string') {
603+
result = valueA.localeCompare(valueB);
604+
} else {
605+
result = valueA < valueB ? -1 : ((valueA > valueB) ? 1 : 0);
606+
}
599607
}
600608
}
609+
if (result !== 0) {
610+
return result;
611+
}
601612
}
602613

603-
if (result !== 0) {
604-
return result;
614+
return result;
615+
});
616+
subAr.push(lastElem);
617+
arr = subAr;
618+
} else {
619+
arr.sort((a, b) => {
620+
let result = 0;
621+
for (let i = 0; i < this.sortList.length; i++) {
622+
const sortDetails = this.sortList[i];
623+
const isDesc = sortDetails.order.toLowerCase() === Const.SORT_DESC;
624+
625+
const { sortFunc, sortFuncExtraData } = this.colInfos[sortDetails.sortField];
626+
if (sortFunc) {
627+
result = sortFunc(a, b, sortDetails.order, sortDetails.sortField, sortFuncExtraData);
628+
} else {
629+
const valueA = a[sortDetails.sortField] === null ? '' : a[sortDetails.sortField];
630+
const valueB = b[sortDetails.sortField] === null ? '' : b[sortDetails.sortField];
631+
if (isDesc) {
632+
if (typeof valueB === 'string') {
633+
result = valueB.localeCompare(valueA);
634+
} else {
635+
result = valueA > valueB ? -1 : ((valueA < valueB) ? 1 : 0);
636+
}
637+
} else {
638+
if (typeof valueA === 'string') {
639+
result = valueA.localeCompare(valueB);
640+
} else {
641+
result = valueA < valueB ? -1 : ((valueA > valueB) ? 1 : 0);
642+
}
643+
}
644+
}
645+
if (result !== 0) {
646+
return result;
647+
}
605648
}
606-
}
607-
608-
return result;
609-
});
610-
649+
return result;
650+
});
651+
}
611652
return arr;
612653
}
613654

0 commit comments

Comments
 (0)