From d07fbcd04d54edbc70183eaa8ab332210e12fdff Mon Sep 17 00:00:00 2001
From: michaelPotter <mpotter.dev@gmail.com>
Date: Wed, 29 Apr 2020 16:07:47 -0700
Subject: [PATCH] Update keyField/data props Documentation

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.
---
 docs/README.md | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/docs/README.md b/docs/README.md
index d622a8848..9bc4ff181 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -39,11 +39,36 @@
 * [onDataSizeChange](#onDataSizeChange)
 
 ### <a name='keyField'>keyField(**required**) - [String]</a>
-Tells `react-bootstrap-table2` which column is unique.
+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
 
 ### <a name='data'>data(**required**) - [Array]</a>
 Provides data for your table. It accepts a single Array object.
 
+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.
+
+For example, if your column definitions look like:
+
+```js
+columns = [
+  { dataField: 'id', text: 'Id' },
+  { dataField: 'name', text: 'Name' },
+  { dataField: 'animal', text: 'Animal' },
+]
+```
+
+Then your data might look like:
+
+```js
+data = [
+  { id: 1, name: 'George', animal: 'Monkey' }
+  { id: 2, name: 'Jeffrey', animal: 'Giraffe' }
+  { id: 3, name: 'Alice', animal: 'Giraffe' }
+  { id: 4, name: 'Alice', animal: 'Tiger' }
+]
+```
+
+And your "keyField" would be `id`
+
 ### <a name='columns'>columns(**required**) - [Object]</a>
 Accepts a single Array object, please see [columns definition](./columns.md) for more detail.