Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1cc6e26

Browse files
patch docs for export CSV
1 parent fe9d047 commit 1cc6e26

File tree

3 files changed

+70
-8
lines changed

3 files changed

+70
-8
lines changed

‎docs/columns.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ Available properties in a column object:
3838
* [editorRenderer](#editorRenderer)
3939
* [filter](#filter)
4040
* [filterValue](#filterValue)
41+
* [csvType](#csvType)
42+
* [csvFormatter](#csvFormatter)
43+
* [csvText](#csvText)
44+
* [csvExport](#csvExport)
4145

4246
Following is a most simplest and basic usage:
4347

@@ -685,4 +689,17 @@ A final `String` value you want to be filtered.
685689
filter: textFilter(),
686690
filterValue: (cell, row) => owners[cell]
687691
}
688-
```
692+
```
693+
694+
## <a name='csvType'>column.csvType - [Object]</a>
695+
Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
696+
697+
## <a name='csvFormatter'>column.csvFormatter - [Function]</a>
698+
699+
This is same as [`column.formatter`](#formatter). But `csvFormatter` only for CSV export and called when export CSV.
700+
701+
## <a name='csvText'>column.csvText - [String]</a>
702+
Custom the CSV header cell, Default is [`column.text`](#text).
703+
704+
## <a name='csvExport'>column.csvExport - [Bool]</a>
705+
Default is `true`, `false` will hide this column when export CSV.

‎docs/migration.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ Currently, **I still can't implement all the mainly features in legacy `react-bo
2222
* Pagination Addons
2323
* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
2424
* Overlay/Loading Addons
25+
* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
26+
* Table Toolkits, like search, csv etc.
2527

2628
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.
2729

@@ -131,6 +133,9 @@ No big changes for pagination, but still can't custom the pagination list, butto
131133
- [ ] Expand Column position
132134
- [ ] Expand Column Style/Class
133135

136+
## Export CSV
137+
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.
138+
134139
## Remote
135140

136141
> 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
141146

142147
## Keyboard Navigation
143148
Not support yet
144-
145-
## Export CSV
146-
Not support yet

‎packages/react-bootstrap-table2-toolkit/README.md

Lines changed: 47 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
`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).
44

5-
In the future, this toolkit will support other feature like row delete, insert and export csv etc. Right now we only support Table Search.
5+
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.
66

77
**[Live Demo For Table Search](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Table%20Search)**
88

@@ -51,9 +51,9 @@ const { SearchBar } = Search;
5151

5252
3. You should render `SearchBar` with `searchProps` as well. The position of `SearchBar` is depends on you.
5353

54-
### search pptions
54+
### Search Options
5555

56-
# searchFormatted - [bool]
56+
#### searchFormatted - [bool]
5757
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.
5858

5959
```js
@@ -67,4 +67,47 @@ If you want to search on the formatted data, you are supposed to enable this pro
6767
>
6868
// ...
6969
</ToolkitProvider>
70-
```
70+
```
71+
72+
## Export CSV
73+
There are two step to enable the export CSV functionality:
74+
75+
1. Give `exportCSV` prop as `true` on `ToolkitProvider`.
76+
2. Render `ExportCSVButton` with `csvProps`. The position of `ExportCSVButton` is depends on you.
77+
78+
```js
79+
import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
80+
81+
const { ExportCSVButton } = CSVExport;
82+
83+
<ToolkitProvider
84+
keyField="id"
85+
data={ products }
86+
columns={ columns }
87+
exportCSV
88+
>
89+
{
90+
props => (
91+
<div>
92+
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
93+
<hr />
94+
<BootstrapTable { ...props.baseProps } />
95+
</div>
96+
)
97+
}
98+
</ToolkitProvider>
99+
```
100+
101+
### Export CSV Options
102+
103+
#### fileName - [String]
104+
Custom the csv file name.
105+
106+
#### separator - [String]
107+
Custom the csv file separator.
108+
109+
#### ignoreHeader - [bool]
110+
Default is `false`. Give true to avoid to attach the csv header.
111+
112+
#### noAutoBOM - [bool]
113+
Default is `true`.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /