Skip to content

Commit 68efdcc

Browse files
committed
React table Readme Updated
React table Readme Updated Readme updated to show examples of JSON usage Signed-off-by: Jose Antonio Ciccio <jciccio@gmail.com>
1 parent 52f5890 commit 68efdcc

File tree

3 files changed

+32
-31
lines changed

3 files changed

+32
-31
lines changed

README.md

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ In the above example, will create a table with three columns: `number, name, pos
4848
Optionally, you can add the key `success` to the object. If value is true, the row will be displayed in green, if it is false will be displayed red.
4949

5050
```javascript
51-
let table = [ {number: 12, name: "Del Piero", position: "ST", success: true},
51+
let table = [
52+
{number: 12, name: "Del Piero", position: "ST", success: true},
5253
{number: 21, name: "Pirlo", position: "MC", success: false},
5354
{number: 10, name: "Ruiz", position: "MDI"},
5455
];
@@ -82,6 +83,33 @@ For example:
8283
/>
8384
```
8485

86+
You can send a JSON String to a specific cell and will be rendered correctly with different color scheme as shows in the following image:
87+
88+
For assume you have the following JSON:
89+
90+
```javascript
91+
let json = {
92+
"Key1": {"id":10,"values":"1-2"},
93+
"Key2":{},
94+
"Key3":"(Zone 1)",
95+
"description":"","array":[100],
96+
"array2":[],
97+
"Object":[{"id":1000,"values":"K-1"}]};
98+
```
99+
100+
By sending the following row to the table:
101+
102+
```javascript
103+
{ number: 12,
104+
name:"Buffon",
105+
position: JSON.stringify(json),
106+
success: true
107+
}
108+
```
109+
Note the conversion of the JSON using the function stringify(). Then, you'll have the result:
110+
111+
![alt text](screenshots/table_json.png "React JS Table JSON example")
112+
85113
If you have big tables, you can optionally add a pagination for the table using the prop `pagination`.
86114

87115
![alt text](screenshots/table_w_pagination.png "React JS Table with pagination")
@@ -119,38 +147,11 @@ Changes the background to white and the text to blue
119147
| caseInsensitive | boolean |N| do searches without casing|
120148

121149
# What's new
122-
v0.5.0
123-
* Table now speaks JSON, you can pass as param a JSON in string format and will be rendered.
124-
125-
v0.4.12
126-
* Download button CSS fix
127-
128-
v0.4.11
129-
* links style fixed
130-
* Search box fixed
131-
132-
v0.4.10
133-
* Borders fixed
134-
* Download button is now on the left
135-
136-
v0.4.9
137-
* Search default style fixes
138-
139-
v0.4.8
140-
* CSV generator enhancements: you can now have data with commas
141-
* JSON objects transformed to Strings are now being generated correctly
150+
v0.5.1
142151

143-
v0.4.7
144-
* Case insensitive searches
145-
146-
v0.4.4
147-
* CSS issues fix
148-
149-
v0.4.0
150-
* New optional search feature within the table
151-
* Minor bug fixing
152152

153+
v0.5.0
154+
* Table now speaks JSON, you can pass as param a JSON in string format and will be rendered.
153155

154156
# License
155-
156157
Licensed under the MIT License © [jciccio](https://www.npmjs.com/~jciccio)

screenshots/table.png

18.8 KB
Loading

screenshots/table_json.png

105 KB
Loading

0 commit comments

Comments
 (0)