0.1.3 • Published 6 years ago
react-taj v0.1.3
React TAJ
Table as JSON library in React used to display JSON end-points in table and also download it as a CSV file.
Installation
npm install react-taj
Import styles by including react-table.css
import 'react-table/react-table.css'
Example
import ReactTaj from 'react-taj';
ReactDOM.render(
<ReactTaj url='http://localhost:5000/dfmulti'
pagination={false}
filter={false}
/>,
document.getElementById('root')
);
URL content
{
columns: [
[
"sepal_length",
"min"
],
[
"sepal_length",
"max"
],
[
"sepal_width",
"min"
],
[
"sepal_width",
"max"
],
[
"petal_length",
"min"
],
[
"petal_length",
"max"
],
[
"petal_width",
"min"
],
[
"petal_width",
"max"
]
],
index: [
"setosa",
"versicolor",
"virginica"
],
data: [
[
4.3,
5.8,
2.3,
4.4,
1,
1.9,
0.1,
0.6
],
[
4.9,
7,
2,
3.4,
3,
5.1,
1,
1.8
],
[
4.9,
7.9,
2.2,
3.8,
4.5,
6.9,
1.4,
2.5
]
],
index_field: "species"
}
Output
Properties
url
JSON end point such as.
http://localhost:5000/dfmulti
pagination
boolean property to show pagination or display data in one page. default false
filter
boolean property to show filter row or not. default false
colors
array of colors to make a background color for each cell based on its value high or low, such as
const colors = [
'#762a83',
'#9970ab',
'#c2a5cf',
'#e7d4e8',
'#f7f7f7',
'#d9f0d3',
'#a6dba0',
'#5aae61',
'#1b7837'
];
className {string} default: 'taj'
The css class.
end-point structure
- specify the JSON type in a key tableType as a value of Simple or MultiIndex.
{
schema: {
fields: [
{
name: "index",
type: "integer"
},
{
name: "sepal_length",
type: "number"
},
{
name: "sepal_width",
type: "number"
},
{
name: "petal_length",
type: "number"
},
{
name: "petal_width",
type: "number"
},
{
name: "species",
type: "string"
}
],
primaryKey: [
"index"
],
pandas_version: "0.20.0"
},
data: {
sepal_length: {
0: 5.1,
1: 4.9,
2: 4.7,
3: 4.6,
4: 5,
5: 5.4,
6: 4.6,
7: 5,
8: 4.4,
9: 4.9,
10: 5.4
},
sepal_width: {
0: 3.5,
1: 3,
2: 3.2,
3: 3.1,
4: 3.6,
5: 3.9,
6: 3.4,
7: 3.4,
8: 2.9,
9: 3.1,
10: 3.7
},
petal_length: {
0: 1.4,
1: 1.4,
2: 1.3,
3: 1.5,
4: 1.4,
5: 1.7,
6: 1.4,
7: 1.5,
8: 1.4,
9: 1.5,
10: 1.5
},
petal_width: {
0: 0.2,
1: 0.2,
2: 0.2,
3: 0.2,
4: 0.2,
5: 0.4,
6: 0.3,
7: 0.2,
8: 0.2,
9: 0.1,
10: 0.2
},
species: {
0: "setosa",
1: "setosa",
2: "setosa",
3: "setosa",
4: "setosa",
5: "setosa",
6: "setosa",
7: "setosa",
8: "setosa",
9: "setosa",
10: "setosa"
}
},
tableType: "Simple"
}