mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
Merge pull request #447 from react-bootstrap-table/1.0.0
1.0.0 docs source
This commit is contained in:
Allen
GitHub
commit
8b8a5e35e1
110
docs/basic-export-csv.md
Normal file
110
docs/basic-export-csv.md
Normal file
@ -0,0 +1,110 @@
|
||||
---
|
||||
id: basic-export-csv
|
||||
title: Export to CSV
|
||||
sidebar_label: Export to CSV
|
||||
---
|
||||
|
||||
`react-bootstrap-table2` support export table data to CSV.
|
||||
|
||||
**[Live Demo For CSV Export](../storybook/index.html?selectedKind=Export%20CSV)**
|
||||
**[API & Props Definition](./export-csv-props.html)**
|
||||
|
||||
-----
|
||||
|
||||
## Prepare
|
||||
|
||||
Please check [How to start with table toolkit](./toolkits-getting-started.html)
|
||||
|
||||
|
||||
## Enable Export CSV
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
* Give [`exportCSV`](./export-csv-props.html) prop as `true` on `ToolkitProvider`.
|
||||
* Render `ExportCSVButton` with `csvProps`. The position of `ExportCSVButton` is depends on you.
|
||||
|
||||
|
||||
## Customize Export CSV Component
|
||||
|
||||
`ExportCSVButton` is a independent component, it's free to place this component in anywhere, just make sure it is inside of the `ToolkitProvider`.
|
||||
You can add any `style` and `className` prop on `ExportCSVButton` for styling it.
|
||||
|
||||
However, if you feel `ExportCSVButton` can not fit your requirement or you want more customization, you can create your own button like following:
|
||||
|
||||
```js
|
||||
// This is my custom csv export component
|
||||
const MyExportCSV = (props) => {
|
||||
const handleClick = () => {
|
||||
props.onExport();
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<button className="btn btn-success" onClick={ handleClick }>Click me to export CSV</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const MyTable = () => (
|
||||
<ToolkitProvider
|
||||
keyField="id"
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
exportCSV
|
||||
>
|
||||
{
|
||||
props => (
|
||||
<div>
|
||||
<BootstrapTable { ...props.baseProps } />
|
||||
<hr />
|
||||
<MyExportCSV { ...props.csvProps } />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</ToolkitProvider>
|
||||
);
|
||||
|
||||
```
|
||||
|
||||
Following, we just explain how it work:
|
||||
|
||||
`ToolkitProvider` will pass a props which have a property called `csvProps`. `csvProps` have following properties:
|
||||
|
||||
* `onExport`: Call this method will trigger export CSV.
|
||||
|
||||
|
||||
In the customization case, you just need to pass `csvProps` to your component and call `csvProps.onExport` when export action trigger.
|
||||
|
||||
## Customize CSV Content
|
||||
|
||||
* Configure [column.csvExport](./column-props.html#columncsvExport-bool) to decide if hiden a column when exporting CSV.
|
||||
* Configure [column.csvType](./column-props.html#columncsvType-object) to decide the data type.
|
||||
* Configure [column.csvFormatter](./column-props.html#columncsvFormatter-function) to customize the column when exporting CSV.
|
||||
* Configure [column.csvText](./column-props.html#columncsvText-string) to customize the column header.
|
||||
|
||||
|
||||
## CSV Configuration
|
||||
|
||||
Please see available [`exportCSV`](./export-csv-props.html) props.
|
||||
|
||||
|
||||
@ -221,7 +221,7 @@ const columns = [..., {
|
||||
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
|
||||
```
|
||||
|
||||
> **Notes:** date filter accept a Javascript Date object in your raw data.
|
||||
> **Notes:** date filter accept a Javascript Date object in your raw data and you have to use `column.formatter` to make it as your prefer string result.
|
||||
|
||||
Date filter is same as other filter, you can custom the date filter via `dateFilter` factory function:
|
||||
|
||||
|
||||
56
docs/basic-row-expand.md
Normal file
56
docs/basic-row-expand.md
Normal file
@ -0,0 +1,56 @@
|
||||
---
|
||||
id: basic-row-expand
|
||||
title: Expandable Row
|
||||
sidebar_label: Expandable Row
|
||||
---
|
||||
|
||||
**[Live Demo For Row Expand](../storybook/index.html?selectedKind=Row%20Expand)**
|
||||
**[API & Props Definition](./row-expand-props.html)**
|
||||
|
||||
-----
|
||||
|
||||
## Expand Mode
|
||||
|
||||
`react-bootstrap-table2` allow support click to expand or collapse a row. When you enable row expandable functionality, you have to give [`expandRow.renderer`](./row-expand-props.html#expandrowrenderer-function) to tell what kind of context you want to render in the expanding content, for example:
|
||||
|
||||
```js
|
||||
const expandRow = {
|
||||
renderer: row => (
|
||||
<div>....</div>
|
||||
)
|
||||
};
|
||||
|
||||
// omit...
|
||||
|
||||
<BootstrapTable
|
||||
keyField='id'
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
expandRow={ expandRow }
|
||||
/>
|
||||
|
||||
```
|
||||
|
||||
## Expand Management
|
||||
Please check [`expandRow.expanded`](./row-expand-props.html#expandrowexpanded-array), it's used for default expanding usually but also can be used as a external expandation control.
|
||||
|
||||
This is an example for [manage on expands](../storybook/index.html?selectedKind=Row%20Expand&selectedStory=Expand%20Management)
|
||||
|
||||
## Customization
|
||||
|
||||
### Style/Class
|
||||
`expandRow.renderer` allow you to render everything in the content of expanding row. You can control the style or class by yourself. However, a expand row is wrapped by a HTML `tr` element. Currently, we don't support any ways to custom the style or class on the expanding `tr` elemnt.
|
||||
|
||||
### Expand Column
|
||||
`react-bootstrap-table2` default doesn't render a additional indicator column, just like row selection. But if you want it, you can enable it via [`expandRow.showExpandColumn`](./row-expand-props.html#expandrowshowexpandcolumn-bool)
|
||||
|
||||
In addition, we allow you to custom the expand columns:
|
||||
|
||||
* For header cell: [`expandRow.expandHeaderColumnRenderer`](row-expand-props.html#expandrowexpandheadercolumnrenderer-function)
|
||||
* For normal cell: [`expandRow.expandColumnRenderer`](./row-expand-props.html#expandrowexpandcolumnrenderer-function)
|
||||
|
||||
|
||||
## Event Listening
|
||||
|
||||
* [`expandRow.onExpand`](./row-expand-props.html#expandrowonexpand-function) allow you to listen a row is expand or collapse.
|
||||
* [`expandRow.onExpandAll`](./row-expand-props.html#expandrowonexpandall-function) for listening the expand/collapse all event.
|
||||
139
docs/basic-search.md
Normal file
139
docs/basic-search.md
Normal file
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: basic-search
|
||||
title: Table Search
|
||||
sidebar_label: Table Search
|
||||
---
|
||||
|
||||
`react-bootstrap-table2` support a table search function just like legacy search in `react-bootstrap-table`. However, new way will be more easier to custom.
|
||||
|
||||
**[Live Demo For Table Search](../storybook/index.html?selectedKind=Table%20Search)**
|
||||
**[API & Props Definition](./search-props.html)**
|
||||
|
||||
-----
|
||||
|
||||
## Prepare
|
||||
|
||||
Please check [How to start with table toolkit](./toolkits-getting-started.html)
|
||||
|
||||
|
||||
## Enable Search
|
||||
|
||||
```js
|
||||
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
|
||||
|
||||
const { SearchBar } = Search;
|
||||
//...
|
||||
|
||||
<ToolkitProvider
|
||||
keyField="id"
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
search
|
||||
>
|
||||
{
|
||||
props => (
|
||||
<div>
|
||||
<h3>Input something at below input field:</h3>
|
||||
<SearchBar { ...props.searchProps } />
|
||||
<hr />
|
||||
<BootstrapTable
|
||||
{ ...props.baseProps }
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</ToolkitProvider>
|
||||
```
|
||||
|
||||
* Enable search via [`search`](./search-props.html) prop on `ToolkitProvider`.
|
||||
|
||||
* `ToolkitProvider` is a wrapper of react context, you are supposed to wrap the `BootstrapTable` and `SearchBar` as the child of `ToolkitProvider`.
|
||||
|
||||
* You should render `SearchBar` with `searchProps` as well. The `SearchBar` position is depends on you.
|
||||
|
||||
|
||||
## Customize Search Component
|
||||
|
||||
`SearchBar` is a independent component, it's free to place this component in anywhere, just make sure it is inside of the `ToolkitProvider`.
|
||||
You can add any `style` and `className` prop on `SearchBar` for component styling
|
||||
|
||||
In addition, following is some valid props on `SearchBar` component:
|
||||
|
||||
* `delay`: How long should trigger search after user enter the search text, default is `250` ms.
|
||||
* placeholder: The placeholder on the input field, default is `Search`.
|
||||
|
||||
However, if you feel `SearchBar` can not fit your requirement or you want more customization, you can create your own search bar like following:
|
||||
|
||||
```js
|
||||
// This is my custom search component
|
||||
const MySearch = (props) => {
|
||||
let input;
|
||||
const handleClick = () => {
|
||||
props.onSearch(input.value);
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
className="form-control"
|
||||
style={ { backgroundColor: 'pink' } }
|
||||
ref={ n => input = n }
|
||||
type="text"
|
||||
/>
|
||||
<button className="btn btn-warning" onClick={ handleClick }>Click to Search!!</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const MyTable = () => (
|
||||
<ToolkitProvider
|
||||
keyField="id"
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
search
|
||||
>
|
||||
{
|
||||
props => (
|
||||
<div>
|
||||
<BootstrapTable
|
||||
{ ...props.baseProps }
|
||||
/>
|
||||
<MySearch { ...props.searchProps } />
|
||||
<br />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</ToolkitProvider>
|
||||
);
|
||||
```
|
||||
|
||||
Following, we just explain how it work:
|
||||
|
||||
`ToolkitProvider` will pass a props which have a property called `searchProps`. `searchProps` have following properties:
|
||||
|
||||
* `onSearch`: Call this method with search text when you want to do the search.
|
||||
|
||||
|
||||
In the customization case, you just need to pass `searchProps` to your component and call `searchProps.onSearch` when search trigger.
|
||||
|
||||
|
||||
## Search on Formatted Data
|
||||
|
||||
`react-bootstrap-table2` default is search on your raw data. If you define a [`column.formatter`](./column-props.html#columnformatter-function) on a column, sometime that will cause
|
||||
the search can't be performed accurately.
|
||||
|
||||
Therefore, we support [`searchFormatted`](./search-props.html#searchsearchformatted-bool) to let search can work on the formatted data.
|
||||
|
||||
## Customize the Search Value
|
||||
|
||||
Sometime, you hope `react-bootstrap-table2` to search another value instead of raw data, you can use [`column.filterValue`](./column-props.html#columnfiltervalue-function).
|
||||
When table search on a specified column, will use the return value from `column.filterValue` for searching.
|
||||
|
||||
|
||||
```js
|
||||
..., {
|
||||
dataField: 'type',
|
||||
text: 'Job Type',
|
||||
formatter: (cell, row) => types[cell],
|
||||
filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
|
||||
}
|
||||
```
|
||||
11
docs/bootstrap4.md
Normal file
11
docs/bootstrap4.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
id: bootstrap4
|
||||
title: Bootstrap 4
|
||||
sidebar_label: Bootstrap 4
|
||||
---
|
||||
|
||||
## Bootstrap 3
|
||||
`react-bootstrap-table2` default support bootstrap 3.
|
||||
|
||||
## Bootstrap 4
|
||||
Add [`bootstrap4`](./table-props.html#bootstrap4-bool) prop on `BootstrapTable` or `ToolkitProvider` to enable the Bootstrap 4.
|
||||
@ -41,6 +41,10 @@ Definition of columns props on BootstrapTable
|
||||
* [editorRenderer](#columneditorrenderer-function)
|
||||
* [filter](#columnfilter-object)
|
||||
* [filterValue](#columnfiltervalue-function)
|
||||
* [csvType](#columncsvType-object)
|
||||
* [csvFormatter](#columncsvFormatter-function)
|
||||
* [csvText](#columncsvText-string)
|
||||
* [csvExport](#columncsvExport-bool)
|
||||
|
||||
-----
|
||||
|
||||
@ -672,3 +676,18 @@ A final `String` value you want to be filtered.
|
||||
filterValue: (cell, row) => owners[cell]
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 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`](#columnformatter-function). But `csvFormatter` only for CSV export and called when export CSV.
|
||||
|
||||
## column.csvText - [String]
|
||||
Custom the CSV header cell, Default is [`column.text`](#columntext-required-string).
|
||||
|
||||
## column.csvExport - [Bool]
|
||||
Default is `true`, `false` will hide this column when export CSV.
|
||||
|
||||
|
||||
47
docs/export-csv-props.md
Normal file
47
docs/export-csv-props.md
Normal file
@ -0,0 +1,47 @@
|
||||
---
|
||||
id: export-csv-props
|
||||
title: Export CSV Props
|
||||
---
|
||||
Export CSV in one of features supported by `react-bootstrap-table2-toolkit`. By passing `exportCSV` prop to `ToolkitProvider` for enabling this functionality.
|
||||
|
||||
|
||||
## Required
|
||||
**N/A**
|
||||
|
||||
## Optional
|
||||
* [fileName](#exportCSVfilename-string)
|
||||
* [separator](#exportCSVseparator-string)
|
||||
* [ignoreHeader](#exportCSVignoreheader-bool)
|
||||
* [noAutoBOM](#exportCSVnoautobom-bool)
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
<ToolkitProvider
|
||||
keyField="id"
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
exportCSV={ {
|
||||
fileName: 'custom.csv',
|
||||
separator: '|',
|
||||
ignoreHeader: true,
|
||||
noAutoBOM: false
|
||||
} }
|
||||
>
|
||||
//...
|
||||
</ToolkitProvider>
|
||||
```
|
||||
|
||||
-----
|
||||
|
||||
## exportCSV.fileName - [Bool]
|
||||
Custom the csv file name.
|
||||
|
||||
## exportCSV.separator - [String]
|
||||
Custom the csv file separator.
|
||||
|
||||
## exportCSV.ignoreHeader - [bool]
|
||||
Default is `false`. Give true to avoid to attach the csv header.
|
||||
|
||||
## exportCSV.noAutoBOM - [bool]
|
||||
Default is `true`.
|
||||
@ -14,7 +14,7 @@ $ npm install react-bootstrap-table-next --save
|
||||
|
||||
## Add CSS
|
||||
|
||||
> `react-bootstrap-table2` need you to add bootstrap css in your application firstly. About bootstrap css, we only compatible with bootstrap 3 but will start to compatible for bootstrap 4 on **v0.2.0**
|
||||
> `react-bootstrap-table2` need you to add bootstrap css in your application firstly. After **v1.0.0**, we start to suport `bootstrap@4`.
|
||||
|
||||
Finish above step, let's add the `react-bootstrap-table2` styles:
|
||||
|
||||
@ -57,6 +57,7 @@ export default () =>
|
||||
* The namespace of `react-bootstrap-table2-filter` is `ReactBootstrapTable2Filter`
|
||||
* The namespace of `react-bootstrap-table2-paginator` is `ReactBootstrapTable2Paginator`
|
||||
* The namespace of `react-bootstrap-table2-overlay` is `ReactBootstrapTable2Overlay`
|
||||
* The namespace of `react-bootstrap-table2-toolkit` is `ReactBootstrapTable2Toolkit`
|
||||
|
||||
### npm
|
||||
|
||||
@ -69,3 +70,4 @@ After install from npm, your can get UMD module from the `dist`.
|
||||
* Download `react-bootstrap-table2-filter` from [here](https://unpkg.com/react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.js)
|
||||
* Download `react-bootstrap-table2-paginator` from [here](https://unpkg.com/react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.js)
|
||||
* Download `react-bootstrap-table2-overlay` from [here](https://unpkg.com/react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay.min.js)
|
||||
* Download `react-bootstrap-table2-toolkit` from [here](https://unpkg.com/react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.js)
|
||||
|
||||
@ -7,7 +7,6 @@ sidebar_label: Migration
|
||||
## Migration Guide
|
||||
|
||||
* Please see the [CHANGELOG](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/new-version-0.1.0.html) for `react-bootstrap-table2` first drop.
|
||||
* Please see the [Road Map](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html) for `react-bootstrap-table2` in 2018/Q1.
|
||||
* Feel free to see the [official docs](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/about.html), we list all the basic usage here!!
|
||||
|
||||
## Preface
|
||||
@ -26,6 +25,9 @@ Currently, **I still can't implement all the mainly features in legacy `react-bo
|
||||
* Cell Editing Addons
|
||||
* [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
|
||||
* Pagination Addons
|
||||
* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
|
||||
* Table Search
|
||||
* CSV Export
|
||||
* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
|
||||
* Overlay/Loading Addons
|
||||
|
||||
@ -119,6 +121,44 @@ Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/p
|
||||
|
||||
No big changes for pagination, but still can't custom the pagination list, button and sizePerPage dropdown.
|
||||
|
||||
|
||||
## Table Search
|
||||
Please see [Work with table search](./basic-search.html).
|
||||
Please see [Search configurations](./search-props.html).
|
||||
|
||||
The usage of search functionality is a little bit different from legacy search. The mainly different thing is developer have to render the search input field, we do believe it will be very flexible for all the developers who want to custom the search position or search field itself.
|
||||
|
||||
- [x] Custom search component and position
|
||||
- [x] Custom search value
|
||||
- [ ] Clear search
|
||||
- [ ] Multiple search
|
||||
- [ ] Strict search
|
||||
|
||||
## Row Expand
|
||||
Please see [Work with expandable row](./basic-row-expand.html).
|
||||
Please see [Row expand configurations](./row-expand-props.html).
|
||||
|
||||
- [x] Expand Row Events
|
||||
- [x] Expand Row Indicator
|
||||
- [x] Expand Row Management
|
||||
- [x] Custom Expand Row Indicators
|
||||
- [ ] Compatiable with Row Selection
|
||||
- [ ] Expand Column position
|
||||
- [ ] Expand Column Style/Class
|
||||
|
||||
## Export CSV
|
||||
Please see [Work with export to CSV](./basic-export-csv.html).
|
||||
Please see [Export CSV configurations](./export-csv-props.html).
|
||||
|
||||
Export CSV functionality is like search, which is one of functionality in the `react-bootstrap-table2-toolkit`. All of the legacy functions we already implemented.
|
||||
|
||||
## Remote
|
||||
|
||||
> It's totally different in `react-bootstrap-table2`. Please [see](./basic-remote.html).
|
||||
> It's totally different in `react-bootstrap-table2`. Please [see](./basic-remote.html).
|
||||
|
||||
|
||||
## Row insert/Delete
|
||||
Not support yet
|
||||
|
||||
## Keyboard Navigation
|
||||
Not support yet
|
||||
131
docs/row-expand-props.md
Normal file
131
docs/row-expand-props.md
Normal file
@ -0,0 +1,131 @@
|
||||
---
|
||||
id: row-expand-props
|
||||
title: Row Expand Props
|
||||
---
|
||||
`react-bootstrap-table2` supports the row expand feature. By passing prop `expandRow` to enable this functionality.
|
||||
|
||||
> Default is click to expand/collapse a row. In addition, we don't support any way to chagne this mechanism!
|
||||
|
||||
## Required
|
||||
* [renderer (**required**)](#expandrowrenderer-function)
|
||||
|
||||
## Optional
|
||||
* [expanded](#expandrowexpanded-array)
|
||||
* [nonExpandable](#expandrownonexpandable-array)
|
||||
* [onExpand](#expandrowonexpand-function)
|
||||
* [onExpandAll](#expandrowonexpandall-function)
|
||||
* [showExpandColumn](#expandrowshowexpandcolumn-bool)
|
||||
* [expandColumnRenderer](#expandrowexpandcolumnrenderer-function)
|
||||
* [expandHeaderColumnRenderer](#expandrowexpandheadercolumnrenderer-function)
|
||||
|
||||
-----
|
||||
|
||||
## expandRow.renderer - [Function]
|
||||
|
||||
Specify the content of expand row, `react-bootstrap-table2` will pass the currnet row object as argument and expect this function to return a react element.
|
||||
|
||||
|
||||
```js
|
||||
const expandRow = {
|
||||
renderer: row => (
|
||||
<div>
|
||||
<p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
|
||||
<p>You can render anything here, also you can add additional data on every row object</p>
|
||||
<p>expandRow.renderer callback will pass the origin row object to you</p>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
<BootstrapTable
|
||||
keyField='id'
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
expandRow={ expandRow }
|
||||
/>
|
||||
```
|
||||
|
||||
|
||||
## expandRow.expanded - [Array]
|
||||
`expandRow.expanded` is useful to manage the row expand on table, for example: you can use it to perform the default expands.
|
||||
|
||||
```js
|
||||
const expandRow = {
|
||||
renderer: (row) => ...
|
||||
expanded: [1, 3] // should be a row keys array
|
||||
};
|
||||
```
|
||||
|
||||
## expandRow.nonExpandable - [Array]
|
||||
This prop allow you to restrict some rows which can not be expanded by user. `expandRow.nonExpandable` accept an rowkeys array.
|
||||
|
||||
```js
|
||||
const expandRow = {
|
||||
renderer: (row) => ...
|
||||
nonExpandable: [1, 3 ,5]
|
||||
};
|
||||
```
|
||||
|
||||
## expandRow.onExpand - [Function]
|
||||
This prop accept a callback function which will be called when a row is expand/collapse and pass following four arguments:
|
||||
`row`, `isExpand`, `rowIndex` and `e`.
|
||||
|
||||
```js
|
||||
const expandRow = {
|
||||
renderer: (row) => ...
|
||||
onExpand: (row, isExpand, rowIndex, e) => {
|
||||
// ...
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
## expandRow.onExpandAll - [Function]
|
||||
This prop accept a callback function which will be called when expand/collapse all. It only work when you configure [`expandRow.showExpandColumn`](#expandrowshowexpandcolumn-bool) as `true`.
|
||||
|
||||
```js
|
||||
const expandRow = {
|
||||
renderer: (row) => ...,
|
||||
showExpandColumn: true,
|
||||
onExpandAll: (isExpandAll, results, e) => {
|
||||
// ...
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## expandRow.showExpandColumn - [Bool]
|
||||
Default is `false`, if you want to have a expand indicator, give this prop as `true`.
|
||||
|
||||
```js
|
||||
const expandRow = {
|
||||
renderer: (row) => ...
|
||||
showExpandColumn: true
|
||||
};
|
||||
```
|
||||
|
||||
## expandRow.expandColumnRenderer - [Function]
|
||||
Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain one property `expanded` to indicate if current row is expanded
|
||||
|
||||
|
||||
```js
|
||||
const expandRow = {
|
||||
renderer: (row) => ...,
|
||||
showExpandColumn: true,
|
||||
expandColumnRenderer: ({ expanded }) => (
|
||||
// ....
|
||||
)
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
## expandRow.expandHeaderColumnRenderer - [Function]
|
||||
Provide a callback function which allow you to custom the expand indicator in the expand header column. This callback only have one argument which is an object and contain one property `isAnyExpands` to indicate if there are any expanded rows:
|
||||
|
||||
```js
|
||||
const expandRow = {
|
||||
renderer: (row) => ...,
|
||||
showExpandColumn: true,
|
||||
expandHeaderColumnRenderer: ({ isAnyExpands }) => (
|
||||
// ....
|
||||
)
|
||||
};
|
||||
```
|
||||
31
docs/search-props.md
Normal file
31
docs/search-props.md
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
id: search-props
|
||||
title: Search Props
|
||||
---
|
||||
Table search in one of features supported by `react-bootstrap-table2-toolkit`. By passing `search` prop to `ToolkitProvider` for enabling this functionality.
|
||||
|
||||
|
||||
## Required
|
||||
**N/A**
|
||||
|
||||
## Optional
|
||||
* [searchFormatted](#searchsearchformatted-bool)
|
||||
|
||||
-----
|
||||
|
||||
## search.searchFormatted - [Bool]
|
||||
|
||||
If you want to search on the formatted data, you are supposed to enable this prop. `react-bootstrap-table2` will check if you define the [column.formatter](./column-props.html#columnformatter-function) when doing search.
|
||||
|
||||
```js
|
||||
<ToolkitProvider
|
||||
keyField="id"
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
search={ {
|
||||
searchFormatted: true
|
||||
} }
|
||||
>
|
||||
// ...
|
||||
</ToolkitProvider>
|
||||
```
|
||||
@ -9,6 +9,7 @@ title: BootstrapTable Props
|
||||
|
||||
## Optional
|
||||
* [remote](#remote-bool-object)
|
||||
* [bootstrap4](#bootstrap4-bool)
|
||||
* [noDataIndication](#nodataindication-function)
|
||||
* [loading](#loading-bool)
|
||||
* [overlay](#overlay-function)
|
||||
@ -69,6 +70,9 @@ remote={ { pagination: true, filter: false, sort: false } }
|
||||
|
||||
There is a special case for remote pagination, even you only specified the pagination need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall data.
|
||||
|
||||
## bootstrap4 - [Bool]
|
||||
`true` to indicate your bootstrap version is 4. Default version is 3.
|
||||
|
||||
## noDataIndication - [Function]
|
||||
`noDataIndication` should be a callback function which return anything that will be showed in the table when data is **empty**.
|
||||
|
||||
|
||||
68
docs/toolkits-getting-started.md
Normal file
68
docs/toolkits-getting-started.md
Normal file
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: toolkits-getting-started
|
||||
title: Getting Started
|
||||
sidebar_label: Getting Started
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
`react-bootstrap-table2` support following features in `react-bootstrap-table2-toolkit` package:
|
||||
|
||||
* Export CSV
|
||||
* Table Search
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
$ npm install react-bootstrap-table2-toolkit --save
|
||||
```
|
||||
|
||||
## Add CSS
|
||||
|
||||
```js
|
||||
// es5
|
||||
require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css');
|
||||
|
||||
// es6
|
||||
import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
`react-bootstrap-table2-toolkit` default give you a react context wrapper: `ToolkitProvider`. When you use any toolkit functionalities, you are supposed to render toolkit component and `BootstrapTable` as the children of `ToolkitProvider`:
|
||||
|
||||
```js
|
||||
import ToolkitProvider from 'react-bootstrap-table2-toolkit';
|
||||
|
||||
|
||||
<ToolkitProvider
|
||||
keyField="id"
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
>
|
||||
{
|
||||
props =>
|
||||
<BootstrapTable { ...props.baseProps } />
|
||||
}
|
||||
</ToolkitProvider>
|
||||
```
|
||||
|
||||
In addition, You have to move following required props from `BootstraTable` to `ToolkitProvider` and inject them to `BootstrapTable` from the `baseProps` provided by `ToolkitProvider`:
|
||||
|
||||
* [keyField](./table-props.html#keyfield-required-string)
|
||||
* [data](./table-props.html#data-required-array)
|
||||
* [columns](./table-props.html#columns-required-object)
|
||||
|
||||
### Additional props on ToolkitProvider
|
||||
|
||||
* [search](./search-props.html): For enabling search.
|
||||
* [exportCSV](./export-csv-props.html): For enableing export CSV.
|
||||
|
||||
## Available children props
|
||||
|
||||
`ToolkitProvider` will pass following props to the childrens:
|
||||
|
||||
* `baseProps`: It have the basic props from `ToolkitProvider` and also contain few internal data.
|
||||
* `searchProps`: props for search component.
|
||||
* `csvProps`: props for export csv component.
|
||||
@ -8,7 +8,7 @@ authorURL: https://twitter.com/allenfang_tw
|
||||
|
||||
This release bump following packages:
|
||||
|
||||
* `react-bootstrap-table2-filter@0.4.0`
|
||||
* `react-bootstrap-table2-filter@0.3.2`
|
||||
|
||||
## Changelog
|
||||
|
||||
@ -19,4 +19,4 @@ N/A
|
||||
* Support MultiSelect Filter([e26065](https://github.com/react-bootstrap-table/react-bootstrap-table2/commit/e26065b11606d45eff33a027008e9cafadcc0c86), [6f4e77](https://github.com/react-bootstrap-table/react-bootstrap-table2/commit/6f4e779a3eac6f0eda2a84c43fce5c733fb30980))
|
||||
|
||||
### Enhancements
|
||||
N/A
|
||||
N/A
|
||||
|
||||
31
website/blog/2018-08-04-version-bump.md
Normal file
31
website/blog/2018-08-04-version-bump.md
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
title: New Release (2018-08-04)
|
||||
author: Allen Fang
|
||||
authorURL: https://twitter.com/allenfang_tw
|
||||
---
|
||||
|
||||
## Changed Packages
|
||||
|
||||
This release bump following packages:
|
||||
|
||||
* `react-bootstrap-table-next@1.0.0`
|
||||
* `react-bootstrap-table2-filter@1.0.0`
|
||||
* `react-bootstrap-table2-editor@1.0.0`
|
||||
* `react-bootstrap-table2-paginator@1.0.0`
|
||||
* `react-bootstrap-table2-toolkit@1.0.0`
|
||||
|
||||
## Notes
|
||||
In `1.0.0`, you have to upgrade `react` and `react-dom` to `16.3.0` or behind.
|
||||
|
||||
## Changelog
|
||||
|
||||
### Bug fixes
|
||||
* fix bug for default sort and filter have potential issue when remote enabled.
|
||||
|
||||
### Features
|
||||
* Row Expand
|
||||
* Table Search
|
||||
* Export CSV
|
||||
|
||||
### Enhancements
|
||||
* Support Bootstrap 4
|
||||
@ -10,20 +10,29 @@
|
||||
"Cell Edit": "Cell Edit",
|
||||
"basic-column": "Work on Column",
|
||||
"Work on Column": "Work on Column",
|
||||
"basic-export-csv": "Export to CSV",
|
||||
"Export to CSV": "Export to CSV",
|
||||
"basic-filter": "Column Filter",
|
||||
"Column Filter": "Column Filter",
|
||||
"basic-pagination": "Pagination",
|
||||
"Pagination": "Pagination",
|
||||
"basic-remote": "Remote Table",
|
||||
"Work on Remote": "Work on Remote",
|
||||
"basic-row-expand": "Expandable Row",
|
||||
"Expandable Row": "Expandable Row",
|
||||
"basic-row-select": "Row Selection",
|
||||
"Row Selection": "Row Selection",
|
||||
"basic-row": "Work on Row",
|
||||
"Work on Row": "Work on Row",
|
||||
"basic-search": "Table Search",
|
||||
"Table Search": "Table Search",
|
||||
"basic-sort": "Table Sort",
|
||||
"Table Sort": "Table Sort",
|
||||
"bootstrap4": "Bootstrap 4",
|
||||
"Bootstrap 4": "Bootstrap 4",
|
||||
"cell-edit-props": "Cell Editing Props",
|
||||
"column-props": "Columns Props",
|
||||
"export-csv-props": "Export CSV Props",
|
||||
"filter-props": "Column Filter Props",
|
||||
"getting-started": "Getting Started",
|
||||
"Getting Started": "Getting Started",
|
||||
@ -32,20 +41,27 @@
|
||||
"overlay": "Remote Loading/Overlay",
|
||||
"Overlay": "Overlay",
|
||||
"pagination-props": "Pagination Props",
|
||||
"row-expand-props": "Row Expand Props",
|
||||
"row-select-props": "Row Selection Props",
|
||||
"search-props": "Search Props",
|
||||
"table-props": "BootstrapTable Props",
|
||||
"toolkits-getting-started": "Getting Started",
|
||||
"Docs": "Docs",
|
||||
"API": "API",
|
||||
"Help": "Help",
|
||||
"Blog": "Blog",
|
||||
"Basic Usage": "Basic Usage",
|
||||
"Remote Table": "Remote Table",
|
||||
"Table Toolkits": "Table Toolkits",
|
||||
"Table Definition": "Table Definition",
|
||||
"Column Definition": "Column Definition",
|
||||
"Cell Editing Definition": "Cell Editing Definition",
|
||||
"Pagination Definition": "Pagination Definition",
|
||||
"Row Select Definition": "Row Select Definition",
|
||||
"Column Filter Definition": "Column Filter Definition"
|
||||
"Row Expand Definition": "Row Expand Definition",
|
||||
"Column Filter Definition": "Column Filter Definition",
|
||||
"Search Definition": "Search Definition",
|
||||
"Export to CSV Definition": "Export to CSV Definition"
|
||||
},
|
||||
"pages-strings": {
|
||||
"Help Translate|recruit community translators for your project": "Help Translate",
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
"Getting Started": [
|
||||
"about",
|
||||
"getting-started",
|
||||
"bootstrap4",
|
||||
"migration"
|
||||
],
|
||||
"Basic Usage": [
|
||||
@ -12,11 +13,17 @@
|
||||
"basic-row-select",
|
||||
"basic-filter",
|
||||
"basic-celledit",
|
||||
"basic-pagination"
|
||||
"basic-pagination",
|
||||
"basic-row-expand"
|
||||
],
|
||||
"Remote Table": [
|
||||
"basic-remote",
|
||||
"overlay"
|
||||
],
|
||||
"Table Toolkits": [
|
||||
"toolkits-getting-started",
|
||||
"basic-search",
|
||||
"basic-export-csv"
|
||||
]
|
||||
},
|
||||
"api": {
|
||||
@ -35,8 +42,17 @@
|
||||
"Row Select Definition": [
|
||||
"row-select-props"
|
||||
],
|
||||
"Row Expand Definition": [
|
||||
"row-expand-props"
|
||||
],
|
||||
"Column Filter Definition": [
|
||||
"filter-props"
|
||||
],
|
||||
"Search Definition": [
|
||||
"search-props"
|
||||
],
|
||||
"Export to CSV Definition": [
|
||||
"export-csv-props"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user