Skip to content

Commit e7de262

Browse files
Update keyField/data props Documentation (#1362)
I added more info to the descriptions of the keyField and data props of the Table component. I also added an example of what these properties might look like for a sample dataset. I had trouble figuring these out, and had to find a medium post about this library to understand how the input data should be formatted, and I had to read the source code to understand what the keyField was for. I think having better descriptions of these props will be helpful to users.
1 parent 5fa5af2 commit e7de262

File tree

1 file changed

+26
-1
lines changed

1 file changed

+26
-1
lines changed

docs/README.md

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,36 @@
3939
* [onDataSizeChange](#onDataSizeChange)
4040

4141
### <a name='keyField'>keyField(**required**) - [String]</a>
42-
Tells `react-bootstrap-table2` which column is unique.
42+
Tells `react-bootstrap-table2` which column of the data is unique. This should be the name of a property that is unique for each item in your dataset
4343

4444
### <a name='data'>data(**required**) - [Array]</a>
4545
Provides data for your table. It accepts a single Array object.
4646

47+
Each item in this array is an object that represents a row in the table. Each "Row" object should have a key-value pair for each column in the table, whose key matches that column's dataField value.
48+
49+
For example, if your column definitions look like:
50+
51+
```js
52+
columns = [
53+
{ dataField: 'id', text: 'Id' },
54+
{ dataField: 'name', text: 'Name' },
55+
{ dataField: 'animal', text: 'Animal' },
56+
]
57+
```
58+
59+
Then your data might look like:
60+
61+
```js
62+
data = [
63+
{ id: 1, name: 'George', animal: 'Monkey' }
64+
{ id: 2, name: 'Jeffrey', animal: 'Giraffe' }
65+
{ id: 3, name: 'Alice', animal: 'Giraffe' }
66+
{ id: 4, name: 'Alice', animal: 'Tiger' }
67+
]
68+
```
69+
70+
And your "keyField" would be `id`
71+
4772
### <a name='columns'>columns(**required**) - [Object]</a>
4873
Accepts a single Array object, please see [columns definition](./columns.md) for more detail.
4974

0 commit comments

Comments
 (0)