patch docs for export CSV

This commit is contained in:
AllenFang 2018-07-14 16:26:34 +08:00
parent b792803974
commit ec77a0539d
3 changed files with 70 additions and 8 deletions

View File

@ -38,6 +38,10 @@ Available properties in a column object:
* [editorRenderer](#editorRenderer)
* [filter](#filter)
* [filterValue](#filterValue)
* [csvType](#csvType)
* [csvFormatter](#csvFormatter)
* [csvText](#csvText)
* [csvExport](#csvExport)
Following is a most simplest and basic usage:
@ -685,4 +689,17 @@ A final `String` value you want to be filtered.
filter: textFilter(),
filterValue: (cell, row) => owners[cell]
}
```
```
## <a name='csvType'>column.csvType - [Object]</a>
Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
## <a name='csvFormatter'>column.csvFormatter - [Function]</a>
This is same as [`column.formatter`](#formatter). But `csvFormatter` only for CSV export and called when export CSV.
## <a name='csvText'>column.csvText - [String]</a>
Custom the CSV header cell, Default is [`column.text`](#text).
## <a name='csvExport'>column.csvExport - [Bool]</a>
Default is `true`, `false` will hide this column when export CSV.

View File

@ -22,6 +22,8 @@ Currently, **I still can't implement all the mainly features in legacy `react-bo
* Pagination Addons
* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
* Overlay/Loading Addons
* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
* Table Toolkits, like search, csv etc.
This can help your application with less bundled size and also help `react-bootstrap-table2` have clean design to avoid handling to much logic in kernel module(SRP). Hence, which means you probably need to install above addons when you need specific features.
@ -131,6 +133,9 @@ No big changes for pagination, but still can't custom the pagination list, butto
- [ ] Expand Column position
- [ ] Expand Column Style/Class
## Export CSV
Export CSV functionality is like search, which is one of functionality in the `react-bootstrap-table2-toolkit`. But all the legacy function we already implemented.
## Remote
> It's totally different in `react-bootstrap-table2`. Please [see](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-remote.html).
@ -141,6 +146,3 @@ Not support yet
## Keyboard Navigation
Not support yet
## Export CSV
Not support yet

View File

@ -2,7 +2,7 @@
`react-bootstrap-table2` support some additional features in [`react-bootstrap-table2-toolkit`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-toolkit).
In the future, this toolkit will support other feature like row delete, insert and export csv etc. Right now we only support Table Search.
In the future, this toolkit will support other feature like row delete, insert and export csv etc. Right now we only support Table Search and CSV export.
**[Live Demo For Table Search](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Table%20Search)**
@ -51,9 +51,9 @@ const { SearchBar } = Search;
3. You should render `SearchBar` with `searchProps` as well. The position of `SearchBar` is depends on you.
### search pptions
### Search Options
# searchFormatted - [bool]
#### searchFormatted - [bool]
If you want to search on the formatted data, you are supposed to enable this props. `react-bootstrap-table2` will check if you define the `column.formatter` when doing search.
```js
@ -67,4 +67,47 @@ If you want to search on the formatted data, you are supposed to enable this pro
>
// ...
</ToolkitProvider>
```
```
## Export CSV
There are two step to enable the export CSV functionality:
1. Give `exportCSV` prop as `true` on `ToolkitProvider`.
2. Render `ExportCSVButton` with `csvProps`. The position of `ExportCSVButton` is depends on you.
```js
import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
const { ExportCSVButton } = CSVExport;
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
exportCSV
>
{
props => (
<div>
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
<hr />
<BootstrapTable { ...props.baseProps } />
</div>
)
}
</ToolkitProvider>
```
### Export CSV Options
#### fileName - [String]
Custom the csv file name.
#### separator - [String]
Custom the csv file separator.
#### ignoreHeader - [bool]
Default is `false`. Give true to avoid to attach the csv header.
#### noAutoBOM - [bool]
Default is `true`.