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 507e554

Browse files
fix #11
* create document * CONTRIBUTING * refine contributing docs * patch for some propTypes definition missing
1 parent ee6afcb commit 507e554

File tree

5 files changed

+229
-12
lines changed

5 files changed

+229
-12
lines changed

‎CONTRIBUTING.md

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1-
# Contributing to react-bootstrap-table2
1+
# Issues
2+
Before open issue, please make sure your problem/request is open or not. When open issue, please give following information if you can:
23

4+
* Example code or repo(Please keep it simple and minimal)
5+
* Reproduce steps
6+
* `react-bootstrap-table2` version
37

4-
## Commands
8+
Anyway, it's welcome to open issue to ask questions or feature request.
59

6-
### Testing
7-
In order to run the tests
10+
#Pull Requests
11+
Check [here](./docs/development.md) for getting start development.
812

9-
`yarn test`
13+
* When you want to implement a new feature, please let us know(via issues).
14+
* Please run test before opening PR and also remember to write test code.
15+
* If you PR is trying to fix bug, please describe the bug when PR open.
1016

11-
testing with `watch mode`
17+
# For the member of react-bootstrap-table2 org
1218

13-
`yarn test:watch`
14-
15-
see the coverage report
16-
17-
`yarn test:coverage`
19+
* Please convert ticket to issue when ticket move to `Ready` from `Backlog` in project
20+
* Please write document if any new API/feature/props changed or added
21+
* Please add story example if any new feature implement

‎docs/README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Documents
2+
3+
## Props on BootstrapTable
4+
5+
### <a name='keyField'>keyField(**required**) - [String]</a>
6+
`keyField` is a prop to tell `react-bootstrap-table2` which column is unigue key.
7+
8+
### <a name='data'>data(**required**) - [Array]</a>
9+
Assign your table data via `data` prop. It only accept an Array object.
10+
11+
### <a name='columns'>columns(**required**) - [Object]</a>
12+
`columns` props accept an Array object, please see [columns definition](./columns.md) for more detail.
13+
14+
### <a name='striped'>striped - [Bool]</a>
15+
Same as `.table-striped` class for adding zebra-stripes to a table
16+
### <a name='bordered'>bordered - [Bool]</a>
17+
Same as `.table-bordered` class for adding borders on all sides of the table and cells
18+
### <a name='hover'>hover - [Bool]</a>
19+
Same as `.table-hover` class for adding a hover effect (grey background color) on table rows
20+
### <a name='condensed'>condensed - [Bool]</a>
21+
Same as `.table-condensed` class for makeing a table more compact by cutting cell padding in half

‎docs/columns.md

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
# Definition of columns props on BootstrapTable
2+
3+
Available properties in a column object:
4+
5+
* [dataField (**required**)](#dataField)
6+
* [text (**required**)](#text)
7+
* [formatter](#formatter)
8+
* [headerFormatter](#headerFormatter)
9+
* [formatExtraData](#formatExtraData)
10+
* [classes](#classes)
11+
* [style](#style)
12+
* [title](#title)
13+
* [events](#events)
14+
* [align](#align)
15+
* [headerTitle](#headerTitle)
16+
* [headerEvents](#headerEvents)
17+
* [headerAlign](#headerAlign)
18+
19+
Following is a most simplest and basic usage:
20+
21+
```js
22+
const rows = [ { id: 1, name: '...', price: '102' } ];
23+
const columns = [ {
24+
dataField: id,
25+
text: Production ID
26+
}, {
27+
dataField: name,
28+
text: Production Name
29+
}, {
30+
dataField: price,
31+
text: Production Price
32+
}
33+
];
34+
```
35+
36+
Let's introduce the definition of column object
37+
38+
## <a name='dataField'>column.dataField (**required**) - [String]</a>
39+
Use `dataField` to specify what field should be apply on this column. If your raw data is nested, for example:
40+
41+
```js
42+
const row = {
43+
id: 'A001',
44+
address: {
45+
postal: '1234-12335',
46+
city: 'Chicago'
47+
}
48+
}
49+
```
50+
You can use `dataField` with dot(`.`) to describe nested object:
51+
52+
```js
53+
dataField: 'address.postal'
54+
dataField: 'address.city'
55+
```
56+
57+
## <a name='text'>column.text (**required**) - [String]</a>
58+
`text` will be apply as the column text in header column, if your header is not only text and you want to customize your header column, please check [`column.headerFormatter`](#headerFormatter)
59+
60+
## <a name='formatter'>column.formatter - [Function]</a>
61+
`formatter` allow you to customize the table column and only accept a callback function which take four arguments and a JSX/String are expected for return.
62+
63+
* `cell`
64+
* `row`
65+
* `rowIndex`
66+
* [`formatExtraData`](#formatExtraData)
67+
68+
## <a name='headerFormatter'>column.headerFormatter - [Function]</a>
69+
`headerFormatter` allow you to customize the header column and only accept a callback function which take two arguments and a JSX/String are expected for return.
70+
71+
* `column`: column object itself
72+
* `colIndex`
73+
74+
## <a name='formatExtraData'>column.formatExtraData - [Any]</a>
75+
It's only used for [`column.formatter`](#formatter), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#formatter) callback function.
76+
77+
## <a name='classes'>column.classes - [String | Function]</a>
78+
It's availabe to have custom class on table column:
79+
80+
```js
81+
{
82+
// omit...
83+
classes: 'id-custom-cell'
84+
}
85+
```
86+
In addition, `classes` also accept a callback function which have more power to custom the css class on each columns. This callback function take three arguments and a string is expect to return:
87+
88+
* `cell`
89+
* `row`
90+
* `colIndex`
91+
92+
## <a name='style'>column.style - [Object | Function]</a>
93+
It's availabe to have custom class on table column:
94+
95+
```js
96+
{
97+
// omit...
98+
style: { backgroundColor: 'green' }
99+
}
100+
```
101+
`style` like [`column.classes`](#classes), it accept a callback function too and have same arguments: `cell`, `row` and `colIndex`.
102+
103+
## <a name='title'>column.title - [Bool | Function]</a>
104+
`react-bootstrap-table2` is disable [`HTML title`](https://www.w3schools.com/tags/tag_title.asp) as default. You can assign `title` as `true` to enable the HTML title on table column. In addition, you can custom the title via a callback function:
105+
106+
```js
107+
{
108+
// omit...
109+
title: (cell, row, colIndex) => {
110+
// return custom title here
111+
}
112+
}
113+
```
114+
115+
## <a name='headerTitle'>column.headerTitle - [Bool | Function]</a>
116+
`headerTitle` is only for the title on header column, default is disable. The usage almost same as [`column.title`](#title), it's also availabe to custom via a callback function:
117+
118+
```js
119+
{
120+
// omit...
121+
headerTitle: (column, colIndex) => {
122+
// column is an object and perform itself
123+
// return custom title here
124+
}
125+
}
126+
```
127+
128+
## <a name='align'>column.align - [String | Function]</a>
129+
You can configure the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) for table column by `align` property. However, `align` also accept a callback function for customizable reason and this function take fore arguments:
130+
131+
* `cell`
132+
* `row`
133+
* `colIndex`
134+
135+
## <a name='headerAlign'>column.headerAlign - [String | Function]</a>
136+
It's almost same as [`column.align`](#align), but it's for the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) on header column. Also, you can custom the align by a callback function:
137+
138+
```js
139+
{
140+
// omit...
141+
headerAlign: (column, colIndex) => {
142+
// column is an object and perform itself
143+
// return custom title here
144+
}
145+
}
146+
```
147+
148+
## <a name='events'>column.events - [Object]</a>
149+
You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via event property:
150+
151+
```js
152+
{
153+
// omit...
154+
events: {
155+
onClick: e => { ... }
156+
}
157+
}
158+
```
159+
160+
## <a name='headerEvents'>column.headerEvents - [Object]</a>
161+
`headerEvents` same as [`column.events`](#events) but this is for header column.

‎docs/development.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
## Development Guide
2+
3+
### Setup
4+
```bash
5+
$ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
6+
$ cd react-bootstrap-table
7+
$ npm install
8+
$ lerna bootstrap # ./node_modules/.bin/lerna bootstrap
9+
```
10+
### Development
11+
```bash
12+
$ npm start
13+
```
14+
15+
### Launch StoryBook
16+
We use [storybook](https://storybook.js.org/) to list our examples and it also have hot reload from source code. Sometime, it is also a good entry point to develop.
17+
18+
```bash
19+
$ cd packages/react-bootstrap-table2-example
20+
$ npm run storybook
21+
```
22+
23+
### Testing
24+
```bash
25+
$ npm test
26+
$ npm run test:watch # for watch mode
27+
$ npm run test:coverage # generate coverage report
28+
```

‎packages/react-bootstrap-table2/src/bootstrap-table.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,10 @@ BootstrapTable.propTypes = {
4848
keyField: PropTypes.string.isRequired,
4949
data: PropTypes.array.isRequired,
5050
columns: PropTypes.array.isRequired,
51-
striped: PropTypes.bool
51+
striped: PropTypes.bool,
52+
bordered: PropTypes.bool,
53+
hover: PropTypes.bool,
54+
condensed: PropTypes.bool
5255
};
5356

5457
BootstrapTable.defaultProps = {

0 commit comments

Comments
(0)

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