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 #522 from react-bootstrap-table/feat/510

Browse Source 
Feat/510
This commit is contained in:
Allen 2018-09-01 16:37:03 +08:00 committed by GitHub
commit b76566126c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 282 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
packages/react-bootstrap-table2-example/examples/csv/export-custom-data.js vendored Normal file
View File

@ -0,0 +1,98 @@
/* eslint react/prop-types: 0 */
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider from 'react-bootstrap-table2-toolkit';
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 sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider from 'react-bootstrap-table2-toolkit';
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const MyExportCSV = (props) => {
const handleClick = () => {
props.onExport();
};
return (
<div>
<button className="btn btn-success" onClick={ handleClick }>Export to CSV</button>
</div>
);
};
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
exportCSV
>
{
props => (
<div>
<BootstrapTable { ...props.baseProps } />
<hr />
<MyExportCSV { ...props.csvProps } />
</div>
)
}
</ToolkitProvider>
`;
const MyExportCSV = (props) => {
const handleClick = () => {
// passing my custom data
props.onExport(products.filter(r => r.id > 2));
};
return (
<div>
<button className="btn btn-success" onClick={ handleClick }>Only export Product ID bigger than 2</button>
</div>
);
};
export default () => (
<div>
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
exportCSV
>
{
props => (
<div>
<BootstrapTable { ...props.baseProps } />
<hr />
<MyExportCSV { ...props.csvProps } />
</div>
)
}
</ToolkitProvider>
<Code>{ sourceCode }</Code>
</div>
);

140
packages/react-bootstrap-table2-example/examples/csv/export-only-selected.js vendored Normal file
View File

@ -0,0 +1,140 @@
/* eslint react/prop-types: 0 */
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
import paginationFactory from 'react-bootstrap-table2-paginator';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
const { ExportCSVButton } = CSVExport;
const products1 = productsGenerator(15);
const products2 = productsGenerator(15);
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
const { ExportCSVButton } = CSVExport;
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const selectRow = {
mode: 'checkbox',
clickToSelect: true
};
<ToolkitProvider
keyField="id"
data={ products1 }
columns={ columns }
exportCSV={ { onlyExportSelection: true, exportAll: true } }
>
{
props => (
<div>
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
<hr />
<BootstrapTable
{ ...props.baseProps }
selectRow={ selectRow }
pagination={ paginationFactory() }
/>
</div>
)
}
</ToolkitProvider>
<ToolkitProvider
keyField="id"
data={ products2 }
columns={ columns }
exportCSV={ { onlyExportSelection: true, exportAll: false } }
>
{
props => (
<div>
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
<hr />
<BootstrapTable
{ ...props.baseProps }
selectRow={ selectRow }
pagination={ paginationFactory() }
/>
</div>
)
}
</ToolkitProvider>
`;
const selectRow = {
mode: 'checkbox',
clickToSelect: true
};
export default () => (
<div>
<h3>Export all selected row</h3>
<ToolkitProvider
keyField="id"
data={ products1 }
columns={ columns }
exportCSV={ { onlyExportSelection: true, exportAll: true } }
>
{
props => (
<div>
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
<hr />
<BootstrapTable
{ ...props.baseProps }
selectRow={ selectRow }
pagination={ paginationFactory() }
/>
</div>
)
}
</ToolkitProvider>
<h3>Export all selected rows in currect visible rows</h3>
<ToolkitProvider
keyField="id"
data={ products2 }
columns={ columns }
exportCSV={ { onlyExportSelection: true, exportAll: false } }
>
{
props => (
<div>
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
<hr />
<BootstrapTable
{ ...props.baseProps }
selectRow={ selectRow }
pagination={ paginationFactory() }
/>
</div>
)
}
</ToolkitProvider>
<Code>{ sourceCode }</Code>
</div>
);

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

@ -146,8 +146,10 @@ import ExportCSV from 'examples/csv';
import CSVFormatter from 'examples/csv/csv-column-formatter';
import CustomCSVHeader from 'examples/csv/custom-csv-header';
import HideCSVColumn from 'examples/csv/hide-column';
import ExportOnlySelected from 'examples/csv/export-only-selected';
import CSVColumnType from 'examples/csv/csv-column-type';
import CustomCSVButton from 'examples/csv/custom-csv-button';
import ExportCustomData from 'examples/csv/export-custom-data';
import CustomCSV from 'examples/csv/custom-csv';
// loading overlay
@ -330,8 +332,10 @@ storiesOf('Export CSV', module)
.add('Format CSV Column', () => <CSVFormatter />)
.add('Custom CSV Header', () => <CustomCSVHeader />)
.add('Hide CSV Column', () => <HideCSVColumn />)
.add('Only Export Selected Rows', () => <ExportOnlySelected />)
.add('CSV Column Type', () => <CSVColumnType />)
.add('Custom CSV Button', () => <CustomCSVButton />)
.add('Export Custom Data', () => <ExportCustomData />)
.add('Custom CSV', () => <CustomCSV />);
storiesOf('EmptyTableOverlay', module)

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

@ -123,4 +123,7 @@ Default is `false`. Give true to avoid to attach the csv header.
Default is `true`.
#### exportAll - [bool]
Default is `true`. `false` will only export current data which display on table.
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.

4
packages/react-bootstrap-table2-toolkit/context.js vendored
View File

@ -26,7 +26,9 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
fileName: PropTypes.string,
separator: PropTypes.string,
ignoreHeader: PropTypes.bool,
noAutoBOM: PropTypes.bool
noAutoBOM: PropTypes.bool,
exportAll: PropTypes.bool,
onlyExportSelection: PropTypes.bool
})
])
}

2
packages/react-bootstrap-table2-toolkit/src/csv/button.js vendored
View File

@ -11,7 +11,7 @@ const ExportCSVButton = (props) => {
return (
<button
type="button"
onClick={ onExport }
onClick={ () => onExport() }
{ ...rest }
>
{ children }

21
packages/react-bootstrap-table2-toolkit/src/op/csv.js vendored
View File

@ -5,13 +5,14 @@ const csvDefaultOptions = {
separator: ',',
ignoreHeader: false,
noAutoBOM: true,
exportAll: true
exportAll: true,
onlyExportSelection: false
};
export default Base =>
class CSVOperation extends Base {
handleExportCSV = () => {
const { columns, exportCSV } = this.props;
handleExportCSV = (source) => {
const { columns, exportCSV, keyField } = this.props;
const meta = getMetaInfo(columns);
const options = exportCSV === true ?
csvDefaultOptions :
@ -20,7 +21,19 @@ export default Base =>
...exportCSV
};
const data = options.exportAll ? this.props.data : this.getData();
// get data for csv export
let data;
if (typeof source !== 'undefined') {
data = source;
} else {
data = options.exportAll ? this.props.data : this.getData();
}
// filter data
if (options.onlyExportSelection) {
const selections = this.getSelected();
data = data.filter(row => !!selections.find(sel => row[keyField] === sel));
}
const content = transform(data, meta, this._.get, options);
save(content, options);
}

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

@ -269,8 +269,9 @@ const withContext = Base =>
}
render() {
const { keyField, columns, bootstrap4 } = this.props;
const { keyField, columns, bootstrap4, registerExposedAPI } = this.props;
const baseProps = { keyField, columns };
if (registerExposedAPI) baseProps.registerExposedAPI = registerExposedAPI;
let base = this.renderBase();

13
packages/react-bootstrap-table2/src/contexts/selection-context.js vendored
View File

@ -15,6 +15,14 @@ export default (
keyField: PropTypes.string.isRequired
}
constructor(props) {
super(props);
if (props.registerExposedAPI) {
const getSelected = () => this.getSelected();
props.registerExposedAPI(getSelected);
}
}
state = { selected: (this.props.selectRow && this.props.selectRow.selected) || [] };
componentWillReceiveProps(nextProps) {
@ -25,6 +33,11 @@ export default (
}
}
// exposed API
getSelected() {
return this.state.selected;
}
handleRowSelect = (rowKey, checked, rowIndex, e) => {
const { data, keyField, selectRow: { mode, onSelect } } = this.props;
const { ROW_SELECT_SINGLE } = Const;