diff --git a/docs/columns.md b/docs/columns.md index 4b78e36..89c62cf 100644 --- a/docs/columns.md +++ b/docs/columns.md @@ -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] } -``` \ No newline at end of file +``` + +## column.csvType - [Object] +Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote. + +## column.csvFormatter - [Function] + +This is same as [`column.formatter`](#formatter). But `csvFormatter` only for CSV export and called when export CSV. + +## column.csvText - [String] +Custom the CSV header cell, Default is [`column.text`](#text). + +## column.csvExport - [Bool] +Default is `true`, `false` will hide this column when export CSV. diff --git a/docs/migration.md b/docs/migration.md index a215952..a4b4c2c 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -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 \ No newline at end of file diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md index 5ddf507..ace3fb4 100644 --- a/packages/react-bootstrap-table2-toolkit/README.md +++ b/packages/react-bootstrap-table2-toolkit/README.md @@ -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 > // ... -``` \ No newline at end of file +``` + +## 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; + + + { + props => ( +
+ Export CSV!! +
+ +
+ ) + } +
+``` + +### 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`. \ No newline at end of file