mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
add README.md
This commit is contained in:
AllenFang
parent
42339b76aa
commit
1ef006e4c2
59
packages/react-bootstrap-table2-editor/README.md
Normal file
59
packages/react-bootstrap-table2-editor/README.md
Normal file
@ -0,0 +1,59 @@
|
||||
# react-bootstrap-table2-editor
|
||||
|
||||
`react-bootstrap-table2` separate the cell edit code base to [`react-bootstrap-table2-editor`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-editor), so there's a little bit different when you use cell edit than `react-bootstrap-table`. In the following, we are going to show you how to enable the cell edit
|
||||
|
||||
**[Live Demo For Cell Edit](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing)**
|
||||
|
||||
-----
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
$ npm install react-bootstrap-table2-editor --save
|
||||
```
|
||||
|
||||
## How
|
||||
|
||||
We have [two ways](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditmode-string) to trigger a editable cell as editing cell:
|
||||
|
||||
* click
|
||||
* dbclick
|
||||
|
||||
That's look into how we enable the cell edit on tabe:
|
||||
|
||||
```js
|
||||
import cellEditFactory from 'react-bootstrap-table2-editor';
|
||||
|
||||
// omit
|
||||
|
||||
<BootstrapTable
|
||||
keyField="id"
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
cellEdit={ cellEditFactory({ mode: 'click' }) }
|
||||
/>
|
||||
```
|
||||
|
||||
How user save their new editings? We offer two ways:
|
||||
|
||||
* Press ENTER(**default**)
|
||||
* Blur from current editing cell(Need to enable the [cellEdit.blurToSave](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditblurtosave-bool))
|
||||
|
||||
## Editable Cell
|
||||
`react-bootstrap-table2` support you to configure the cell editable on three level:
|
||||
|
||||
* Row Level ([cellEdit.nonEditableRows](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditnoneditablerows-function))
|
||||
* Column Level (Configure [column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as bool value)
|
||||
* Cell Level (Configure [column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as a callback function)
|
||||
|
||||
## Customize Style/Class
|
||||
Currently, we only support the editing cell style/class customization, in the future, we will offer more customizations.
|
||||
|
||||
### Editing Cell
|
||||
|
||||
* Customize the editing cell style via [column.editCellStyle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditcellstyle-object-function)
|
||||
* Customize the editing cell classname via [column.editCellClasses](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditcellclasses-string-function)
|
||||
|
||||
## Validation
|
||||
|
||||
[`column.validator`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnvalidator-function) will help you to work on it!
|
||||
@ -1,13 +1,24 @@
|
||||
# react-bootstrap-table2-filter
|
||||
|
||||
## Filters
|
||||
`react-bootstrap-table2` separate the filter core code base to [`react-bootstrap-table2-filter`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-filter), so there's a little bit different when you use column filter than `react-bootstrap-table`. In the following, we are going to show you how to enable the column filter:
|
||||
|
||||
* Text (`textFilter`)
|
||||
**[Live Demo For Column Filter](https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/gh-pages-src/storybook/index.html?selectedKind=Column%20Filter)**
|
||||
|
||||
You can get all of above filters via import and these filters are a factory function to create a individual filter instance.
|
||||
In addition, for some simple customization reasons, these factory function allow to pass some props.
|
||||
-----
|
||||
|
||||
### Text Filter
|
||||
## Install
|
||||
|
||||
```sh
|
||||
$ npm install react-bootstrap-table2-filter --save
|
||||
```
|
||||
|
||||
You can get all types of filters via import and these filters are a factory function to create a individual filter instance. Currently, we support following filters:
|
||||
|
||||
* TextFilter
|
||||
* **Coming soon!**
|
||||
|
||||
## Text Filter
|
||||
Following is a quick demo for enable the column filter on **Product Price** column!!
|
||||
|
||||
```js
|
||||
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
|
||||
@ -23,18 +34,20 @@ const columns = [
|
||||
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
|
||||
```
|
||||
|
||||
Following we list all the availabe props for `textFilter` function:
|
||||
In addition, we preserve all of the filter features and functionality in legacy `react-bootstrap-table`, but in different way to do it:
|
||||
|
||||
```js
|
||||
import { Comparator } from 'react-bootstrap-table2-filter';
|
||||
import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
|
||||
// omit...
|
||||
|
||||
const customTextFilter = textFilter({
|
||||
const priceFilter = textFilter({
|
||||
placeholder: 'My Custom PlaceHolder', // custom the input placeholder
|
||||
style: { ... }, // your custom styles on input
|
||||
className: 'my-custom-text-filter', // custom classname on input
|
||||
defaultValue: 'test', // default filtering value
|
||||
delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
|
||||
comparator: Comparator.EQ // default is Comparator.LIKE
|
||||
comparator: Comparator.EQ, // default is Comparator.LIKE
|
||||
style: { ... }, // your custom styles on input
|
||||
delay: 1000 // how long will trigger filtering after user typing, default is 500 ms
|
||||
});
|
||||
|
||||
// omit...
|
||||
```
|
||||
14
packages/react-bootstrap-table2-overlay/README.md
Normal file
14
packages/react-bootstrap-table2-overlay/README.md
Normal file
@ -0,0 +1,14 @@
|
||||
# react-bootstrap-table2-overlay
|
||||
In `react-bootstrap-table2`, you will be easier to custom the loading or lverlay on table no matter if remote enabled or not. In the following, we have two way to do it:
|
||||
|
||||
-----
|
||||
|
||||
## Empty Table
|
||||
[**`noDataIndication`**](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html#nodataindication-function) is a simple case you can take it, if current data size is empty, `react-bootstrap-table2` will call the `noDataIndication` prop and get the result to display on the table.
|
||||
|
||||
[**Here**](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=EmptyTableOverlay) is a quick exmaple for `noDataIndication`.
|
||||
|
||||
## Loading Table
|
||||
In the most of case for remote mode, you need the loading animation to tell the user the table is loading or doing some action in the background. Hence, you can lervarge [**`overlay`**](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html#overlay-function) prop.
|
||||
|
||||
[**Here**](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=EmptyTableOverlay) is also a example for `overlay`
|
||||
28
packages/react-bootstrap-table2-paginator/README.md
Normal file
28
packages/react-bootstrap-table2-paginator/README.md
Normal file
@ -0,0 +1,28 @@
|
||||
# react-bootstrap-table2-pagination
|
||||
|
||||
`react-bootstrap-table2` separate the pagination code base to [`react-bootstrap-table2-pagination`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-paginator), so there's a little bit different when you use pagination. In the following, we are going to show you how to enable and configure the a pagination table
|
||||
|
||||
**[Live Demo For Pagination](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination)**
|
||||
|
||||
-----
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
$ npm install react-bootstrap-table2-pagination --save
|
||||
```
|
||||
|
||||
## How
|
||||
|
||||
Let's enable a pagination on your table:
|
||||
|
||||
```js
|
||||
import paginator from 'react-bootstrap-table2-paginator';
|
||||
// omit...
|
||||
|
||||
<BootstrapTable keyField='id' data={ products } columns={ columns } pagination={ paginator() } />
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
See [pagination props](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html)
|
||||
43
packages/react-bootstrap-table2/README.md
Normal file
43
packages/react-bootstrap-table2/README.md
Normal file
@ -0,0 +1,43 @@
|
||||
# react-bootstrap-table-next
|
||||
Next generation of [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table)
|
||||
|
||||
## Usage
|
||||
|
||||
### Installation
|
||||
|
||||
```sh
|
||||
npm install react-bootstrap-table-next --save
|
||||
```
|
||||
|
||||
### Include 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
|
||||
|
||||
```js
|
||||
// es5
|
||||
require('react-bootstrap-table-next/dist/react-bootstrap-table2.min.css');
|
||||
|
||||
// es6
|
||||
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
|
||||
```
|
||||
|
||||
### Your First Table
|
||||
|
||||
```js
|
||||
import BootstrapTable from 'react-bootstrap-table-next';
|
||||
|
||||
const products = [ ... ];
|
||||
const columns = [{
|
||||
dataField: 'id',
|
||||
text: 'Product ID'
|
||||
}, {
|
||||
dataField: 'name',
|
||||
text: 'Product Name'
|
||||
}, {
|
||||
dataField: 'price',
|
||||
text: 'Product Price'
|
||||
}];
|
||||
|
||||
export default () =>
|
||||
<BootstrapTable keyField='id' data={ products } columns={ columns } />
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user