react-taj
Rich tables based on Tables-As-JSON specification
Last updated a year ago by brendancol .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-taj 
SYNC missed versions from official npm registry.

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

Image of Front

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"
}

License

Current Tags

  • 0.1.3                                ...           latest (a year ago)

3 Versions

  • 0.1.3                                ...           a year ago
  • 0.1.2                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 5
Dependencies (26)
Dev Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |