vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2025-10-16 11:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #846 from react-bootstrap-table/develop

Browse Source 
20190310 release
This commit is contained in:
Allen 2019-03-10 13:37:02 +08:00 committed by GitHub
commit c45deee590
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 494 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/cell-edit.md
View File

@ -69,7 +69,7 @@ const cellEdit: {
// omit...
beforeSaveCell(oldValue, newValue, row, column, done) {
setTimeout(() => {
if (confirm('Do you want to accep this change?')) {
if (confirm('Do you want to accept this change?')) {
done(); // contine to save the changes
} else {
done(false); // reject the changes

130
packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js vendored
View File

@ -7,7 +7,7 @@ import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
const products = productsGenerator(21);
const products = productsGenerator(40);
const { SearchBar } = Search;
const columns = [{
@ -24,61 +24,12 @@ import paginationFactory, { PaginationProvider, PaginationListStandalone } from
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
class Table extends React.Component {
render() {
const options = {
custom: true,
paginationSize: 4,
pageStartIndex: 1,
firstPageText: 'First',
prePageText: 'Back',
nextPageText: 'Next',
lastPageText: 'Last',
nextPageTitle: 'First page',
prePageTitle: 'Pre page',
firstPageTitle: 'Next page',
lastPageTitle: 'Last page',
showTotal: true,
totalSize: products.length
};
const contentTable = ({ paginationProps, paginationTableProps }) => (
<div>
<PaginationListStandalone { ...paginationProps } />
<div>
<div>
<BootstrapTable
striped
hover
keyField="id"
data={ products }
columns={ columns }
filter={ filterFactory() }
cellEdit={ cellEditFactory() }
{ ...paginationTableProps }
/>
</div>
</div>
<PaginationListStandalone { ...paginationProps } />
</div>
);
state = { products }
return (
<div>
<h2>PaginationProvider will care the data size change. You dont do anything</h2>
<PaginationProvider
pagination={
paginationFactory(options)
}
>
{ contentTable }
</PaginationProvider>
<Code>{ sourceCode }</Code>
</div >
);
loadData = () => {
this.setState({ products: productsGenerator(17) });
}
}
`;
export default class Table extends React.Component {
render() {
const options = {
custom: true,
@ -93,15 +44,84 @@ export default class Table extends React.Component {
firstPageTitle: 'Next page',
lastPageTitle: 'Last page',
showTotal: true,
totalSize: products.length
totalSize: this.state.products.length
};
const contentTable = ({ paginationProps, paginationTableProps }) => (
<div>
<button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
<PaginationListStandalone { ...paginationProps } />
<ToolkitProvider
keyField="id"
columns={ columns }
data={ products }
data={ this.state.products }
search
>
{
toolkitprops => (
<div>
<SearchBar { ...toolkitprops.searchProps } />
<BootstrapTable
striped
hover
{ ...toolkitprops.baseProps }
{ ...paginationTableProps }
/>
</div>
)
}
</ToolkitProvider>
<PaginationListStandalone { ...paginationProps } />
</div>
);
return (
<div>
<h2>PaginationProvider will care the data size change. You dont do anything</h2>
<PaginationProvider
pagination={
paginationFactory(options)
}
>
{ contentTable }
</PaginationProvider>
<Code>{ sourceCode }</Code>
</div >
);
}
}
`;
export default class Table extends React.Component {
state = { products }
loadData = () => {
this.setState({ products: productsGenerator(17) });
}
render() {
const options = {
custom: true,
paginationSize: 4,
pageStartIndex: 1,
firstPageText: 'First',
prePageText: 'Back',
nextPageText: 'Next',
lastPageText: 'Last',
nextPageTitle: 'First page',
prePageTitle: 'Pre page',
firstPageTitle: 'Next page',
lastPageTitle: 'Last page',
showTotal: true,
totalSize: this.state.products.length
};
const contentTable = ({ paginationProps, paginationTableProps }) => (
<div>
<button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
<PaginationListStandalone { ...paginationProps } />
<ToolkitProvider
keyField="id"
columns={ columns }
data={ this.state.products }
search
>
{

72
packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js vendored
View File

@ -3,28 +3,70 @@ import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
import { productsQualityGenerator } from 'utils/common';
const products = productsGenerator(21);
const products = productsQualityGenerator(21);
const selectOptions = {
0: 'good',
1: 'Bad',
2: 'unknown'
};
const columns = [{
dataField: 'id',
text: 'Product ID',
filter: textFilter({})
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name',
filter: textFilter()
}, {
dataField: 'quality',
text: 'Product Quailty',
formatter: cell => selectOptions[cell],
filter: selectFilter({
options: selectOptions,
defaultValue: 0
})
}];
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
const selectOptions = {
0: 'good',
1: 'Bad',
2: 'unknown'
};
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name',
filter: textFilter()
}, {
dataField: 'quality',
text: 'Product Quailty',
formatter: cell => selectOptions[cell],
filter: selectFilter({
options: selectOptions,
defaultValue: 0
})
}];
class Table extends React.Component {
state = { products }
loadData = () => {
this.setState({ products: productsQualityGenerator(40, 7) });
}
render() {
const options = {
custom: true,
@ -39,10 +81,11 @@ class Table extends React.Component {
firstPageTitle: 'Next page',
lastPageTitle: 'Last page',
showTotal: true,
totalSize: products.length
totalSize: this.state.products.length
};
const contentTable = ({ paginationProps, paginationTableProps }) => (
<div>
<button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
<PaginationListStandalone { ...paginationProps } />
<div>
<div>
@ -50,10 +93,9 @@ class Table extends React.Component {
striped
hover
keyField="id"
data={ products }
data={ this.state.products }
columns={ columns }
filter={ filterFactory() }
cellEdit={ cellEditFactory() }
{ ...paginationTableProps }
/>
</div>
@ -72,7 +114,6 @@ class Table extends React.Component {
>
{ contentTable }
</PaginationProvider>
<Code>{ sourceCode }</Code>
</div >
);
}
@ -80,6 +121,12 @@ class Table extends React.Component {
`;
export default class Table extends React.Component {
state = { products }
loadData = () => {
this.setState({ products: productsQualityGenerator(40, 7) });
}
render() {
const options = {
custom: true,
@ -94,10 +141,11 @@ export default class Table extends React.Component {
firstPageTitle: 'Next page',
lastPageTitle: 'Last page',
showTotal: true,
totalSize: products.length
totalSize: this.state.products.length
};
const contentTable = ({ paginationProps, paginationTableProps }) => (
<div>
<button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
<PaginationListStandalone { ...paginationProps } />
<div>
<div>
@ -105,7 +153,7 @@ export default class Table extends React.Component {
striped
hover
keyField="id"
data={ products }
data={ this.state.products }
columns={ columns }
filter={ filterFactory() }
{ ...paginationTableProps }

150
packages/react-bootstrap-table2-example/examples/pagination/pagination-with-dynamic-data.js vendored Normal file
View File

@ -0,0 +1,150 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import Code from 'components/common/code-block';
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
class BookList extends React.Component {
state = {
books: [
{ id: '1', name: 'Book 1' },
{ id: '2', name: 'Book 2' },
{ id: '3', name: 'Book 3' },
{ id: '4', name: 'Book 4' },
{ id: '5', name: 'Book 5' },
{ id: '6', name: 'Book 6' }
]
};
deleteBookWithId = () => {
const lastOneId = this.state.books.length;
const updatedBooks = this.state.books.filter(m => m.id !== lastOneId.toString());
this.setState({ books: updatedBooks });
};
addBook = () => {
const lastOneId = this.state.books.length + 1;
this.setState({ books: [...this.state.books, {
id: \`$\{lastOneId}\`, name: \`Book $\{lastOneId}\`
}] });
}
render() {
const options = {
// pageStartIndex: 0,
sizePerPage: 5,
hideSizePerPage: true,
hidePageListOnlyOnePage: true
};
const columns = [
{
dataField: 'id',
text: 'Product ID',
Cell: row => (
<div>
<span title={ row.value }>{ row.value }</span>
</div>
)
},
{
dataField: 'name',
text: 'Product Name'
}
];
return (
<React.Fragment>
<BootstrapTable
keyField="id"
data={ this.state.books }
columns={ columns }
pagination={ paginationFactory(options) }
/>
<button className="btn btn-default" onClick={ () => this.deleteBookWithId() }>
delete last one book
</button>
<button className="btn btn-default" onClick={ () => this.addBook() }>
Add a book to the end
</button>
<Code>{ sourceCode }</Code>
</React.Fragment>
);
}
`;
export default class BookList extends React.Component {
state = {
books: [
{ id: '1', name: 'Book 1' },
{ id: '2', name: 'Book 2' },
{ id: '3', name: 'Book 3' },
{ id: '4', name: 'Book 4' },
{ id: '5', name: 'Book 5' },
{ id: '6', name: 'Book 6' },
{ id: '7', name: 'Book 6' },
{ id: '8', name: 'Book 6' },
{ id: '9', name: 'Book 6' },
{ id: '10', name: 'Book 6' },
{ id: '11', name: 'Book 6' }
]
};
deleteBookWithId = () => {
const lastOneId = this.state.books.length;
const updatedBooks = this.state.books.filter(m => m.id !== lastOneId.toString());
this.setState({ books: updatedBooks });
};
addBook = () => {
const lastOneId = this.state.books.length + 1;
this.setState({ books: [...this.state.books, {
id: `${lastOneId}`, name: `Book ${lastOneId}`
}] });
}
render() {
const options = {
// pageStartIndex: 0,
sizePerPage: 5,
hideSizePerPage: true,
hidePageListOnlyOnePage: true
};
const columns = [
{
dataField: 'id',
text: 'Product ID',
Cell: row => (
<div>
<span title={ row.value }>{ row.value }</span>
</div>
)
},
{
dataField: 'name',
text: 'Product Name'
}
];
return (
<React.Fragment>
<BootstrapTable
keyField="id"
data={ this.state.books }
columns={ columns }
pagination={ paginationFactory(options) }
/>
<button className="btn btn-default" onClick={ () => this.deleteBookWithId() }>
delete last one book
</button>
<button className="btn btn-default" onClick={ () => this.addBook() }>
Add a book to the end
</button>
<Code>{ sourceCode }</Code>
</React.Fragment>
);
}
}

1
packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js vendored
View File

@ -84,6 +84,7 @@ export default class StandaloneSizePerPage extends React.Component {
<div>
<SizePerPageDropdownStandalone
{ ...paginationProps }
btnContextual="btn btn-primary"
/>
<BootstrapTable
keyField="id"

6
packages/react-bootstrap-table2-example/src/utils/common.js vendored
View File

@ -29,10 +29,10 @@ export const withOnSale = rows => rows.map((row) => {
return row;
});
export const productsQualityGenerator = (quantity = 5) =>
export const productsQualityGenerator = (quantity = 5, factor = 0) =>
Array.from({ length: quantity }, (value, index) => ({
id: index,
name: `Item name ${index}`,
id: index + factor,
name: `Item name ${index + factor}`,
quality: index % 3
}));

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

@ -163,6 +163,7 @@ import ExpandHooks from 'examples/row-expand/expand-hooks';
// pagination
import PaginationTable from 'examples/pagination';
import PaginationHooksTable from 'examples/pagination/pagination-hooks';
import PaginationWithDynamicData from 'examples/pagination/pagination-with-dynamic-data';
import CustomPaginationTable from 'examples/pagination/custom-pagination';
import CustomPageButtonTable from 'examples/pagination/custom-page-button';
import CustomSizePerPageOptionTable from 'examples/pagination/custom-size-per-page-option';
@ -404,6 +405,7 @@ storiesOf('Pagination', module)
.addDecorator(bootstrapStyle())
.add('Basic Pagination Table', () => <PaginationTable />)
.add('Pagination Hooks', () => <PaginationHooksTable />)
.add('Pagination with Dynamic Data', () => <PaginationWithDynamicData />)
.add('Custom Pagination', () => <CustomPaginationTable />)
.add('Custom Page Button', () => <CustomPageButtonTable />)
.add('Custom Page List', () => <CustomPageListTable />)

30
packages/react-bootstrap-table2-filter/src/context.js vendored
View File

@ -27,9 +27,8 @@ export default (
this.onFilter = this.onFilter.bind(this);
this.doFilter = this.doFilter.bind(this);
this.onExternalFilter = this.onExternalFilter.bind(this);
this.state = {
data: props.data
};
this.data = props.data;
this.isEmitDataChange = false;
}
componentDidMount() {
@ -39,13 +38,10 @@ export default (
}
componentWillReceiveProps(nextProps) {
let nextData = nextProps.data;
if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.state.data)) {
nextData = this.doFilter(nextProps);
// let nextData = nextProps.data;
if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) {
this.doFilter(nextProps, undefined, this.isEmitDataChange);
}
this.setState({
data: nextData
});
}
onFilter(column, filterType, initialize = false) {
@ -83,9 +79,7 @@ export default (
if (filter.props.onFilter) {
result = filter.props.onFilter(filterVal);
}
result = this.doFilter(this.props, result);
this.setState({ data: result });
this.doFilter(this.props, result);
};
}
@ -95,21 +89,25 @@ export default (
};
}
doFilter(props, customResult) {
doFilter(props, customResult, ignoreEmitDataChange = false) {
let result = customResult;
const { dataChangeListener, data, columns } = props;
result = result || filters(data, columns, _)(this.currFilters);
if (dataChangeListener) {
this.data = result;
if (dataChangeListener && !ignoreEmitDataChange) {
this.isEmitDataChange = true;
dataChangeListener.emit('filterChanged', result.length);
} else {
this.isEmitDataChange = false;
this.forceUpdate();
}
return result;
}
render() {
return (
<FilterContext.Provider value={ {
data: this.state.data,
data: this.data,
onFilter: this.onFilter,
onExternalFilter: this.onExternalFilter
} }

4
packages/react-bootstrap-table2-filter/test/context.test.js
View File

@ -283,9 +283,9 @@ describe('FilterContext', () => {
expect(onFilter).toHaveBeenCalledWith(filterVal);
});
it('should set state.data correctly', () => {
it('should set data correctly', () => {
instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
expect(instance.state.data).toEqual(mockReturn);
expect(instance.data).toEqual(mockReturn);
});
});

13
packages/react-bootstrap-table2-paginator/README.md
View File

@ -190,6 +190,19 @@ import paginationFactory, {
That's it!! The benifit for using standalone is you can much easier to render the standalone component in any posistion. In the future, we will implement more featue like applying `style`, `className` etc on standalone components.
##### Customizable props for `PaginationListStandalone`
* N/A
##### Customizable props for `SizePerPageDropdownStandalone`
* `open`: `true` to make dropdown show.
* `hidden`: `true` to hide the size per page dropdown.
* `btnContextual`: Set the button contextual
* `variation`: Variation for dropdown, available value is `dropdown` and `dropup`.
* `className`: Custom the class on size per page dropdown
##### Customizable props for `SizePerPageDropdownStandalone`
* N/A
#### 4.2 Customization Everything
If you choose to custom the pagination component by yourself, the `paginationProps` will be important for you. Becasue you have to know for example how to change page or what's the current page etc. Hence, following is all the props in `paginationProps` object:

7
packages/react-bootstrap-table2-paginator/src/data-context.js vendored
View File

@ -32,7 +32,12 @@ class PaginationDataProvider extends Provider {
// user should align the page when the page is not fit to the data size when remote enable
if (!this.isRemotePagination() && !custom) {
const newPage = alignPage(
nextProps.data.length, this.currPage, currSizePerPage, pageStartIndex);
nextProps.data.length,
this.props.data.length,
this.currPage,
currSizePerPage,
pageStartIndex
);
if (this.currPage !== newPage) {
if (onPageChange) {

14
packages/react-bootstrap-table2-paginator/src/page.js vendored
View File

@ -1,3 +1,5 @@
import Const from './const';
const getNormalizedPage = (
page,
pageStartIndex
@ -19,12 +21,20 @@ const startIndex = (
export const alignPage = (
dataSize,
prevDataSize,
page,
sizePerPage,
pageStartIndex
) => {
if (page < pageStartIndex || page > (Math.floor(dataSize / sizePerPage) + pageStartIndex)) {
return pageStartIndex;
if (prevDataSize < dataSize) return page;
if (page < pageStartIndex) return pageStartIndex;
if (dataSize <= 0) return pageStartIndex;
if ((page >= (Math.floor(dataSize / sizePerPage) + pageStartIndex)) && pageStartIndex === 1) {
return Math.ceil(dataSize / sizePerPage);
}
if (page >= Math.floor(dataSize / sizePerPage) && pageStartIndex === 0) {
const newPage = Math.ceil(dataSize / sizePerPage);
return newPage - Math.abs((Const.PAGE_START_INDEX - pageStartIndex));
}
return page;
};

1
packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js vendored
View File

@ -48,6 +48,7 @@ const sizePerPageDropdownAdapter = WrappedComponent =>
}
return (
<WrappedComponent
{ ...this.props }
currSizePerPage={ `${currSizePerPage}` }
options={ this.calculateSizePerPageStatus() }
optionRenderer={ sizePerPageOptionRenderer }

15
packages/react-bootstrap-table2-paginator/src/state-context.js vendored
View File

@ -50,9 +50,15 @@ class StateProvider extends React.Component {
// user should align the page when the page is not fit to the data size when remote enable
if (this.isRemotePagination() || custom) {
this.currPage = nextProps.pagination.options.page;
this.currSizePerPage = nextProps.pagination.options.sizePerPage;
this.dataSize = nextProps.pagination.options.totalSize;
if (typeof nextProps.pagination.options.page !== 'undefined') {
this.currPage = nextProps.pagination.options.page;
}
if (typeof nextProps.pagination.options.sizePerPage !== 'undefined') {
this.currSizePerPage = nextProps.pagination.options.sizePerPage;
}
if (typeof nextProps.pagination.options.totalSize !== 'undefined') {
this.dataSize = nextProps.pagination.options.totalSize;
}
}
}
@ -117,13 +123,14 @@ class StateProvider extends React.Component {
const { pagination: { options } } = this.props;
const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
Const.PAGE_START_INDEX : options.pageStartIndex;
this.dataSize = newDataSize;
this.currPage = alignPage(
newDataSize,
this.dataSize,
this.currPage,
this.currSizePerPage,
pageStartIndex
);
this.dataSize = newDataSize;
this.forceUpdate();
}

132
packages/react-bootstrap-table2-paginator/test/page.test.js
View File

@ -43,18 +43,132 @@ describe('Page Functions', () => {
});
describe('alignPage', () => {
const pageStartIndex = 1;
const sizePerPage = 10;
const page = 3;
describe('if the page does not fit the pages which calculated from the length of data', () => {
it('should return pageStartIndex argument', () => {
expect(alignPage(15, page, sizePerPage, pageStartIndex)).toEqual(pageStartIndex);
let newDataSize;
let prevDataSize;
let currPage;
let pageStartIndex;
let sizePerPage;
describe('if prevDataSize < newDataSize', () => {
beforeEach(() => {
newDataSize = 10;
prevDataSize = 6;
currPage = 2;
pageStartIndex = 1;
sizePerPage = 5;
});
it('should return same page', () => {
expect(alignPage(
newDataSize,
prevDataSize,
currPage,
sizePerPage,
pageStartIndex
)).toEqual(currPage);
});
});
describe('if the length of store.data is large than the end page index', () => {
it('should return current page', () => {
expect(alignPage(30, page, sizePerPage, pageStartIndex)).toEqual(page);
describe('if currPage < newDataSize', () => {
beforeEach(() => {
newDataSize = 10;
prevDataSize = 12;
currPage = 0;
pageStartIndex = 1;
sizePerPage = 5;
});
it('should return correct page', () => {
expect(alignPage(
newDataSize,
prevDataSize,
currPage,
sizePerPage,
pageStartIndex
)).toEqual(pageStartIndex);
});
});
describe('if partStartIndex is default 1', () => {
describe('and currPage is bigger than newest last page', () => {
beforeEach(() => {
newDataSize = 9;
prevDataSize = 12;
currPage = 3;
pageStartIndex = 1;
sizePerPage = 5;
});
it('should return correct page', () => {
expect(alignPage(
newDataSize,
prevDataSize,
currPage,
sizePerPage,
pageStartIndex
)).toEqual(2);
});
});
describe('and currPage is short than newest last page', () => {
beforeEach(() => {
newDataSize = 11;
prevDataSize = 12;
currPage = 3;
pageStartIndex = 1;
sizePerPage = 5;
});
it('should return correct page', () => {
expect(alignPage(
newDataSize,
prevDataSize,
currPage,
sizePerPage,
pageStartIndex
)).toEqual(currPage);
});
});
});
describe('if partStartIndex is default 0', () => {
describe('and currPage is bigger than newest last page', () => {
beforeEach(() => {
newDataSize = 8;
prevDataSize = 11;
currPage = 2;
pageStartIndex = 0;
sizePerPage = 5;
});
it('should return correct page', () => {
expect(alignPage(
newDataSize,
prevDataSize,
currPage,
sizePerPage,
pageStartIndex
)).toEqual(1);
});
});
describe('and currPage is short than newest last page', () => {
beforeEach(() => {
newDataSize = 11;
prevDataSize = 12;
currPage = 2;
pageStartIndex = 0;
sizePerPage = 5;
});
it('should return correct page', () => {
expect(alignPage(
newDataSize,
prevDataSize,
currPage,
sizePerPage,
pageStartIndex
)).toEqual(currPage);
});
});
});
});

17
packages/react-bootstrap-table2-toolkit/README.md
View File

@ -67,6 +67,19 @@ const { SearchBar } = Search;
3. You should render `SearchBar` with `searchProps` as well. The position of `SearchBar` is depends on you.
### `SearchBar` Props
#### className - [string]
Custom the class on input element.
#### placeholder - [string]
Custom the placeholder on input element.
#### style - [object]
Custom the style on input element.
#### delay = [number]
milionsecond for debounce user input.
### Search Options
#### defaultSearch - [string]
@ -127,6 +140,8 @@ const { SearchBar, ClearSearchButton } = Search;
</ToolkitProvider>
```
-----
## Export CSV
There are two steps to enable the export CSV functionality:
@ -176,6 +191,8 @@ Default is `true`. `false` will only export current data which display on table.
#### onlyExportSelection - [bool]
Default is `false`. `true` will only export the data which is selected.
-----
## Column Toggle
Let's see how to render the column toggle in your react component:

3
packages/react-bootstrap-table2/src/body.js vendored
View File

@ -17,7 +17,6 @@ class Body extends React.Component {
super(props);
const {
keyField,
visibleColumnSize,
cellEdit,
selectRow,
expandRow
@ -34,7 +33,7 @@ class Body extends React.Component {
const expandRowEnabled = !!expandRow.renderer;
if (expandRowEnabled) {
RowComponent = withRowExpansion(RowAggregator, visibleColumnSize);
RowComponent = withRowExpansion(RowAggregator);
}
if (selectRowEnabled) {

4
packages/react-bootstrap-table2/src/row-expand/row-consumer.js vendored
View File

@ -3,7 +3,7 @@ import React from 'react';
import ExpandRow from './expand-row';
import ExpansionContext from '../contexts/row-expand-context';
export default (Component, visibleColumnSize) => {
export default (Component) => {
const renderWithExpansion = (props, expandRow) => {
const key = props.value;
@ -20,7 +20,7 @@ export default (Component, visibleColumnSize) => {
/>,
expanded ? <ExpandRow
key={ `${key}-expanding` }
colSpan={ visibleColumnSize }
colSpan={ props.visibleColumnSize }
>
{ expandRow.renderer(props.row) }
</ExpandRow> : null