mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
patch docs for export CSV
This commit is contained in:
parent
b792803974
commit
ec77a0539d
@ -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.
|
||||
|
||||
@ -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
|
||||
@ -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`.
|
||||
Loading…
Reference in New Issue
Block a user