vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-08-12 04:00:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

20190218 release

Browse Source
This commit is contained in:
AllenFang
2019-02-17 23:42:06 +08:00
parent b1e6bd05ab
commit e5bfaca33d
9 changed files with 240 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/basic-column-toggle.md
+123
View File
@@ -0,0 +1,123 @@
---
id: basic-column-toggle
title: Column Toggle
sidebar_label: Column Toggle
---
`react-bootstrap-table2` support a toggle list for user to toggle the column visibility.
**[Live Demo For Column Toggle](../storybook/index.html?selectedKind=Column%20Toggle)**
-----
## Prepare
Please check [How to start with table toolkit](./toolkits-getting-started.html)
## Enable Column Toggle
```js
import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
const { ToggleList } = ColumnToggle;
//...
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
columnToggle
>
{
props => (
<div>
<ToggleList { ...props.columnToggleProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
/>
</div>
)
}
</ToolkitProvider>
```
1. Enable column toggle via `columnToggle` prop on `ToolkitProvider`.
2. `ToolkitProvider` is a wrapper of react context, you should wrap the `BootstrapTable` and `ToggleList` as the child of `ToolkitProvider`.
3. Rendering `ToggleList` with `columnToggleProps`. The position of `ToggleList` is depends on you.
## Customize ToggleList Component
So far we only have limited customization on `ToggleList` component, following props is available for you:
* `btnClassName`: Add custom class on toggle button.
* `className`: Add custom class on toggle list.
* `contextual`: config bootstrap contextual, default is `primary`.
However, you can custom the whole thing by yourself like following:
```js
// This is my custom column toggle component
const CustomToggleList = ({
columns,
onColumnToggle,
toggles
}) => (
<div className="btn-group btn-group-toggle btn-group-vertical" data-toggle="buttons">
{
columns
.map(column => ({
...column,
toggle: toggles[column.dataField]
}))
.map(column => (
<button
type="button"
key={ column.dataField }
className={ `btn btn-warning ${column.toggle ? 'active' : ''}` }
data-toggle="button"
aria-pressed={ column.toggle ? 'true' : 'false' }
onClick={ () => onColumnToggle(column.dataField) }
>
{ column.text }
</button>
))
}
</div>
);
export const MyTable = () => (
<ToolkitProvider
keyField="id"
data={ products }
columns={ columnsdt }
columnToggle
>
{
props => (
<div>
<CustomToggleList { ...props.columnToggleProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
/>
</div>
)
}
</ToolkitProvider>
);
```
Following, we just explain how it work:
`ToolkitProvider` will pass a props which have a property called `columnToggleProps`. `columnToggleProps` have following properties:
* `columns`: Column list
* `toggles`: An object which describe current column visibilities. `true` is on and `false` is off.
* `onColumnToggle`: Call this method when user toggle a column.
docs/basic-pagination.md
+19 -10
View File
@@ -80,14 +80,14 @@ If you want to customize the pagination component completely, you may get intere
`react-bootstrap-table2-paginator` have a `PaginationProvider` which is a react context and you will be easier to customize the pagination components under the scope of `PaginationProvider`. Let's introduce it step by step:
#### Import PaginationProvider
#### 1. Import PaginationProvider
```js
import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';
```
#### Declare custom and totalSize in pagination option:
#### 2. Declare custom and totalSize in pagination option:
```js
const paginationOption = {
@@ -96,7 +96,7 @@ const paginationOption = {
};
```
#### Render PaginationProvider
#### 3. Render PaginationProvider
```js
<PaginationProvider
@@ -142,19 +142,25 @@ So far, your customization pagination should look like it:
```
Now, you have two choices
* Use built-in standalne components
* Use Standalone Component
* Customize everything by yourself
#### Use Standalone Component
`react-bootstrap-table2-paginator` provider two standalone components:
#### 4.1 Use Standalone Component
`react-bootstrap-table2-paginator` provider three standalone components:
* Size Per Page Dropdwn Standalone
* Size Per Page Dropdown Standalone
* Pagination List Standalone
* Pagination Total Standalone
When render each standalone, you just need to pass the `paginationProps` props to standalone component:
```js
import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePerPageDropdownStandalone } from 'react-bootstrap-table2-paginator';
import paginationFactory, {
PaginationProvider,
PaginationListStandalone,
PaginationTotalStandalone,
SizePerPageDropdownStandalone
} from 'react-bootstrap-table2-paginator';
<PaginationProvider
pagination={ paginationFactory(options) }
@@ -168,6 +174,9 @@ import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePe
<SizePerPageDropdownStandalone
{ ...paginationProps }
/>
<PaginationTotalStandalone
{ ...paginationProps }
/>
<BootstrapTable
keyField="id"
data={ products }
@@ -185,7 +194,7 @@ import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePe
That's it!! The benifit for using standalone is you can much easier to render the standalone component in any posistion. In the future, we will implement more featue like applying `style`, `className` etc on standalone components.
#### Customization Everything
#### 4.2 Customization Everything
If you choose to custom the pagination component by yourself, the `paginationProps` will be important for you. Becasue you have to know for example how to change page or what's the current page etc. Therefore, following is all the props in `paginationProps` object:
@@ -218,7 +227,7 @@ onPageChange,
onSizePerPageChange
```
In most of case, `page`, `sizePerPage`, `onPageChange` and `onSizePerPageChange` are most important propertoes for you:
In most of case, `page`, `sizePerPage`, `onPageChange` and `onSizePerPageChange` are much important properties for you:
* `page`: Current page.
* `sizePerPage`: Current size per page.
docs/migration.md
+26 -27
View File
@@ -28,6 +28,7 @@ Currently, **I still can't implement all the mainly features in legacy `react-bo
* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
* Table Search
* CSV Export
* Column Toggle
* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
* Overlay/Loading Addons
@@ -63,12 +64,12 @@ The `text` property is just same as the children for the `TableHeaderColumn`, if
Please see [Work with table sort](./basic-sort.html).
- [x] Basic sorting
- [x] Custom sort function
- [x] Default Sort
- [x] Remote mode
- [x] Custom the sorting header
- [x] Sort event listener
- [v] Basic sorting
- [v] Custom sort function
- [v] Default Sort
- [v] Remote mode
- [v] Custom the sorting header
- [v] Sort event listener
- [ ] Custom the sort caret
- [ ] Sort management
- [ ] Multi sort
@@ -87,17 +88,15 @@ No huge changes in row selection.
Please see [Work with column filter](./basic-filter.html).
Please see [available filter configuration](./filter-props.html).
- [x] Text Filter
- [x] Custom Text Filter
- [x] Remote Filter
- [x] Custom Filter Component
- [v] Text Filter
- [v] Remote Filter
- [v] Custom Filter Component
- [ ] Regex Filter
- [x] Select Filter
- [x] Custom Select Filter
- [x] Number Filter
- [X] Date Filter
- [x] Array Filter
- [X] Programmatically Filter
- [v] Select Filter
- [v] Number Filter
- [v] Date Filter
- [v] Array Filter
- [v] Programmatically Filter
Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly.
@@ -119,7 +118,7 @@ Please see [available pagination configurations](./pagination-props.html).
Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator) firstly.
Until newest `react-bootstrap-table2-paginator@2.0.0`, we allow you to custom any part of pagination component more flexible.
In newest `react-bootstrap-table2-paginator@2.0.0`, we allow you to custom any part of pagination component more flexible.
## Table Search
Please see [Work with table search](./basic-search.html).
@@ -127,9 +126,9 @@ 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
- [x] Clear search
- [v] Custom search component and position
- [v] Custom search value
- [v] Clear search
- [ ] Multiple search
- [ ] Strict search
@@ -137,13 +136,13 @@ The usage of search functionality is a little bit different from legacy search.
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
- [v] Expand Row Events
- [v] Expand Row Indicator
- [v] Expand Row Management
- [v] Custom Expand Row Indicators
- [v] Compatiable with Row Selection
- [v] Expand Column position
- [v] Expand Column Style/Class
## Export CSV
Please see [Work with export to CSV](./basic-export-csv.html).
docs/row-expand-props.md
+13 -2
View File
@@ -115,6 +115,17 @@ const expandRow = {
};
```
## expandRow.expandByColumnOnly - [Bool]
Default is `false`. If you want to restrict user to expand/collapse row via clicking the expand column only, you can enable it.
```js
const expandRow = {
renderer: (row) => ...,
showExpandColumn: true,
expandByColumnOnly: true
};
```
## expandRow.expandColumnPosition - [String]
Default is `left`. You can give this as `right` for rendering expand column in the right side.
@@ -128,7 +139,7 @@ const expandRow = {
## expandRow.expandByColumnOnly - [Bool]
Default is `false`. If you want to restrict user to expand/collapse row via clicking the expand column only, you can enable it.
```js
```js
const expandRow = {
renderer: (row) => ...,
showExpandColumn: true,
@@ -137,6 +148,7 @@ const expandRow = {
```
## 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 these properties:
* `expanded`: If current row is expanded or not
* `rowKey`: Current row key
@@ -151,7 +163,6 @@ const expandRow = {
)
};
```
```
## expandRow.expandHeaderColumnRenderer - [Function]
docs/table-props.md
+26 -31
View File
@@ -8,37 +8,32 @@ title: BootstrapTable Props
* [columns (**required**)](#columns-required-object)
## Optional
- [Required](#required)
- [Optional](#optional)
- [keyField(**required**) - [String]](#keyfieldrequired---string)
- [data(**required**) - [Array]](#datarequired---array)
- [columns(**required**) - [Object]](#columnsrequired---object)
- [remote - [Bool | Object]](#remote---bool--object)
- [bootstrap4 - [Bool]](#bootstrap4---bool)
- [noDataIndication - [Function]](#nodataindication---function)
- [loading - [Bool]](#loading---bool)
- [overlay - [Function]](#overlay---function)
- [caption - [String | Node]](#caption---string--node)
- [striped - [Bool]](#striped---bool)
- [bordered - [Bool]](#bordered---bool)
- [hover - [Bool]](#hover---bool)
- [condensed - [Bool]](#condensed---bool)
- [id - [String]](#id---string)
- [tabIndexCell - [Bool]](#tabindexcell---bool)
- [classes - [String]](#classes---string)
- [wrapperClasses - [String]](#wrapperclasses---string)
- [headerClasses - [String]](#headerclasses---string)
- [cellEdit - [Object]](#celledit---object)
- [selectRow - [Object]](#selectrow---object)
- [rowStyle - [Object | Function]](#rowstyle---object--function)
- [rowClasses - [String | Function]](#rowclasses---string--function)
- [rowEvents - [Object]](#rowevents---object)
- [hiddenRows - [Array]](#hiddenrows---array)
- [defaultSorted - [Array]](#defaultsorted---array)
- [defaultSortDirection - [String]](#defaultsortdirection---string)
- [pagination - [Object]](#pagination---object)
- [filter - [Object]](#filter---object)
- [onTableChange - [Function]](#ontablechange---function)
* [remote](#remote-bool-object)
* [bootstrap4](#bootstrap4-bool)
* [noDataIndication](#nodataindication-function)
* [loading](#loading-bool)
* [overlay](#overlay-function)
* [caption](#caption-string-node)
* [striped](#striped-bool)
* [bordered](#bordered-bool)
* [hover](#hover-bool)
* [condensed](#condensed-bool)
* [id](#id-string)
* [tabIndexCell](#tabindexcell-bool)
* [classes](#classes-string)
* [wrapperClasses](#wrapperClasses-string)
* [headerClasses](#headerClasses-string)
* [cellEdit](#celledit-object)
* [selectRow](#selectrow-object)
* [rowStyle](#rowstyle-object-function)
* [rowClasses](#rowclasses-string-function)
* [rowEvents](#rowevents-object)
* [hiddenRows](#hiddenrows-array)
* [defaultSorted](#defaultsorted-array)
* [defaultSortDirection](#defaultSortDirection-string)
* [pagination](#pagination-object)
* [filter](#filter-object)
* [onTableChange](#ontablechange-function)
-----
docs/toolkits-getting-started.md
+4 -1
View File
@@ -10,6 +10,7 @@ sidebar_label: Getting Started
* Export CSV
* Table Search
* Column Toggle
## Installation
@@ -58,7 +59,8 @@ In addition, You have to move following required props from `BootstraTable` to `
### Additional props on ToolkitProvider
* [search](./search-props.html): For enabling search.
* [exportCSV](./export-csv-props.html): For enableing export CSV.
* [exportCSV](./export-csv-props.html): For enabling export CSV.
* **columnToggle**: For enabling column toggle.
## Available children props
@@ -67,3 +69,4 @@ In addition, You have to move following required props from `BootstraTable` to `
* `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.
* `columnToggleProps`: props for column toggle component.
website/blog/2019-02-18-version-bump.md
+25
View File
@@ -0,0 +1,25 @@
---
title: New Release (2019-02-18)
author: Allen Fang
authorURL: https://twitter.com/allenfang_tw
---
## Changed Packages
We got following package version bump in this release:
* `react-bootstrap-table-next@2.2.0`
* `react-bootstrap-table2-toolkit@1.3.0`
* `react-bootstrap-table2-paginator@2.0.3`
## Changelog
### Bug fixes
N/A
### Features
* Support Column Toggle([#800](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/800))
### Enhancements
* Support `PaginationTotalStandalone` component([#801](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/801))
* Add `rowIndex` for `selectRow.selectionRenderer`([a7c2a49](https://github.com/react-bootstrap-table/react-bootstrap-table2/commit/a7c2a49182681dcf77d547d0d58a0b69af667bec))
website/i18n/en.json
+2
View File
@@ -8,6 +8,8 @@
"About": "About",
"basic-celledit": "Cell Edit",
"Cell Edit": "Cell Edit",
"basic-column-toggle": "Column Toggle",
"Column Toggle": "Column Toggle",
"basic-column": "Work on Column",
"Work on Column": "Work on Column",
"basic-export-csv": "Export to CSV",
website/sidebars.json
+2 -1
View File
@@ -23,7 +23,8 @@
"Table Toolkits": [
"toolkits-getting-started",
"basic-search",
"basic-export-csv"
"basic-export-csv",
"basic-column-toggle"
],
"Exposed API": [
"exposed-api"