vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-06-28 13:10:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix #711

Browse Source
This commit is contained in:
AllenFang
2018-12-21 16:23:14 +08:00
parent d84dc46ff1
commit 4ddbfd4972
6 changed files with 125 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/README.md
View File

@@ -27,6 +27,7 @@
* [rowStyle](#rowStyle)
* [rowClasses](#rowClasses)
* [rowEvents](#rowEvents)
* [hiddenRows](#hiddenRows)
* [defaultSorted](#defaultSorted)
* [defaultSortDirection](#defaultSortDirection)
* [pagination](#pagination)
@@ -181,6 +182,14 @@ const rowEvents = {
<BootstrapTable data={ data } columns={ columns } rowEvents={ rowEvents } />
```
### <a name='hiddenRows'>hiddenRows - [Array]</a>
Hide rows, this props accept an array of row keys:
```js
const hiddenRows = [1, 4];
<BootstrapTable data={ data } columns={ columns } hiddenRows={ hiddenRows } />
```
### <a name='defaultSorted'>defaultSorted - [Array]</a>
`defaultSorted` accept an object array which allow you to define the default sort columns when first render.

57
packages/react-bootstrap-table2-example/examples/rows/row-hidden.js vendored Normal file
View File

@@ -0,0 +1,57 @@
/* eslint no-unused-vars: 0 */
/* eslint no-console: 0 */
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
const products = productsGenerator();
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const rowEvents = {
onClick: (e, row, rowIndex) => {
console.log(`clicked on row with index: ${rowIndex}`);
},
onMouseEnter: (e, row, rowIndex) => {
console.log(`enter on row with index: ${rowIndex}`);
}
};
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const hiddenRowKeys = [1, 3];
<BootstrapTable keyField="id" data={ products } columns={ columns } hiddenRows={ hiddenRowKeys } />
`;
const hiddenRowKeys = [1, 3];
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } hiddenRows={ hiddenRowKeys } />
<Code>{ sourceCode }</Code>
</div>
);

2
packages/react-bootstrap-table2-example/stories/index.js vendored
View File

@@ -79,6 +79,7 @@ import ClearAllFilters from 'examples/column-filter/clear-all-filters';
import RowStyleTable from 'examples/rows/row-style';
import RowClassTable from 'examples/rows/row-class';
import RowEventTable from 'examples/rows/row-event';
import RowHiddenTable from 'examples/rows/row-hidden';
// table sort
import EnableSortTable from 'examples/sort/enable-sort-table';
@@ -271,6 +272,7 @@ storiesOf('Work on Rows', module)
.addDecorator(bootstrapStyle())
.add('Customize Row Style', () => <RowStyleTable />)
.add('Customize Row Class', () => <RowClassTable />)
.add('Hide Rows', () => <RowHiddenTable />)
.add('Row Event', () => <RowEventTable />);
storiesOf('Sort Table', module)

5
packages/react-bootstrap-table2/src/bootstrap-table.js vendored
View File

@@ -21,7 +21,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
// Exposed APIs
getData() {
return this.props.data;
return this.visibleRows();
}
render() {
@@ -39,7 +39,6 @@ class BootstrapTable extends PropsBaseResolver(Component) {
renderTable() {
const {
data,
columns,
keyField,
tabIndexCell,
@@ -88,7 +87,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
expandRow={ expandRow }
/>
<Body
data={ data }
data={ this.getData() }
keyField={ keyField }
tabIndexCell={ tabIndexCell }
columns={ columns }

10
packages/react-bootstrap-table2/src/props-resolver/index.js vendored
View File

@@ -1,3 +1,4 @@
import _ from '../utils';
import ColumnResolver from './column-resolver';
export default ExtendBase =>
@@ -15,4 +16,13 @@ export default ExtendBase =>
isEmpty() {
return this.props.data.length === 0;
}
visibleRows() {
const { data, hiddenRows, keyField } = this.props;
if (!hiddenRows || hiddenRows.length === 0) return data;
return data.filter((row) => {
const key = _.get(row, keyField);
return !hiddenRows.includes(key);
});
}
};

45
packages/react-bootstrap-table2/test/props-resolver/index.test.js
View File

@@ -25,6 +25,51 @@ describe('TableResolver', () => {
const BootstrapTableMock = extendTo(ExtendBase);
let wrapper;
describe('visibleRows', () => {
describe('if hiddenRows prop is not existing', () => {
beforeEach(() => {
const mockElement = React.createElement(BootstrapTableMock, {
data, columns, keyField
}, null);
wrapper = shallow(mockElement);
});
it('should return correct data', () => {
expect(wrapper.instance().visibleRows()).toEqual(data);
});
});
describe('if hiddenRows prop is an empty array', () => {
beforeEach(() => {
const mockElement = React.createElement(BootstrapTableMock, {
data, columns, keyField, hiddenRows: []
}, null);
wrapper = shallow(mockElement);
});
it('should return correct data', () => {
expect(wrapper.instance().visibleRows()).toEqual(data);
});
});
describe('if hiddenRows prop is not an empty array', () => {
const hiddenRows = [1];
beforeEach(() => {
const mockElement = React.createElement(BootstrapTableMock, {
data, columns, keyField, hiddenRows
}, null);
wrapper = shallow(mockElement);
});
it('should return correct data', () => {
const result = wrapper.instance().visibleRows();
expect(result).toHaveLength(data.length - hiddenRows.length);
expect(result).toEqual(data.filter(d => !hiddenRows.includes(d.id)));
});
});
});
describe('validateProps', () => {
describe('if keyField is defined and columns is all visible', () => {
beforeEach(() => {