Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/agracio/ts-react-json-table

Simple React table component to display JSON data.
https://github.com/agracio/ts-react-json-table
Last synced: about 1 month ago
JSON representation
Simple React table component to display JSON data.
Host: GitHub
URL: https://github.com/agracio/ts-react-json-table
Owner: agracio
License: mit
Created: 2017-10-14T10:21:33.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2019-06-12T13:36:53.000Z (over 5 years ago)
Last Synced: 2024-09-19T01:13:11.221Z (2 months ago)
Language: TypeScript
Homepage:
Size: 165 KB
Stars: 37
Watchers: 3
Forks: 6
Open Issues: 4
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

        # React JSON table

##### Simple table component to display JSON data.

> This is based on excellent `react-json-table` https://github.com/arqex/react-json-table. 

The component is written in TypeScript and supports React 16.x. 

It attempts to be backward compatible with `react-json-table`.

## Features

Features are similar to original `react-json-table`

* Basic functionality has no external dependencies when using pre-built UMD files.

* Customizable cell contents to show your data the way you need.

* Callbacks for clicks on headers, rows or cells.

* Customizable column rendering and ability to add custom columns.

* Customizable CSS class names for table, header, rows and cells.

* No internal state, everything comes from the props.

## Installation

```bash

npm install ts-react-json-table

```

Or use the pre-built UMD files [ts-react-json-table.js](https://github.com/agracio/ts-react-json-table/blob/master/build/ts-react-json-table.js) 

and [ts-react-json-table.min.js](https://github.com/agracio/ts-react-json-table/blob/master/build/ts-react-json-table.min.js) 

## Quickstart

```js

const JsonTable = require('ts-react-json-table');

```

 

```js

var items = [

  {"id": 75950,"name": "Louella Wallace","age": 24,"phone": "+44 (0)203 437 7302","color": "green"},

  {"id": 80616,"name": "Hanson Perry","age": 36,"phone": "+44 (0)203 279 3708","color": "brown"},

  {"id": 77621,"name": "Brandi Long","age": 20,"phone": "+44 (0)203 319 4880","color": "gray"},

  {"id": 81299,"name": "Tonia Sykes","age": 38,"phone": "+44 (0)208 328 3671","color": "blue"},

  {"id": 14225,"name": "Leach Durham","age": 23,"phone": "+44 (0)208 280 9572","color": "green"}

];

ReactDOM.render(, document.body);

```

**JSFiddle demo: https://jsfiddle.net/agracio/vx1yfna0/**

## Usage

### props

Prop | Type | Description

---|---|---

rows | Array\[Object\] (required) | JSON data.

columns | *Array\[string\|ColumnSettings\]* (optional) | Table columns, if not defined `rows` JSON data is used. See [column settings](#column-settings).

excludeColumns | *Array\[string\]* (optional) | Exclude columns by key, allows to quickly exclude elements from `rows` JSON data without defining all `columns`. See [exclude columns](#exclude-columns)

className | *string* (optional)| Class to use for `` element.

theadClassName | *string* (optional)| Class to use for `` element.

caption | *string* (optional)| Table `` element contents. If not defined `` element will not be rendered.

settings | *TableSettings* (optional)| Table settings, see [table settings](#table-settings).

onClickCell | *Function* (optional)| Callback triggered when a cell is clicked: `fn(event, columnName, rowData)`.

onClickRow | *Function* (optional)| Callback triggered when a row is clicked: `fn(event, rowData)`.

onClickHeader | *Function* (optional)| Callback triggered when a column header is clicked: `fn(event, columnName)`.

### Table settings

Setting name | Type | Description

---|---|---

header | *boolean* (optional) | Determines whether to show table header. Default is `true`.

classPrefix | *string* (optional) | JsonTable uses `class` attributes for its markup like `jsonRow` or `jsonCell`. The default prefix is `json` but you can use this setting to change it in the case it is conflicting with other classes in your app.

noRowsMessage | *string*\|*ReactComponent*  (optional) | Message shown when the table has no rows. Default is *"No items"*.

cellClass | *Function* (optional) | Cell custom class using `fn(currentClass, columnKey, rowData)`.

headerClass | *Function* (optional) | Header custom class using `fn(currentClass, columnKey)`.

rowClass | *Function* (optional) | Row custom class using `fn(currentClass, rowData)`.

cellRenderer | *Function* (optional) | If provided, this function will be used to render all the cells' content. If not provided, the cell contents will be `item[field]`, the value of the item for that field.

### Column settings

Setting name | Type | Description

---|---|---

key | string | Object key of `rows` JSON data.

label | *string* (optional) | Column header, if not defined `key` is used.

cell | *Function*\|*string* (optional) | Contents of table cell, if not defined `key` is used. Can be `string` or `function(row, columnKey)`

group | *string* (optional) | Allows to group multiple items under same group header. See [column grouping](#column-grouping)

If `columns` props is not defined columns settings will be automatically generated using `rows` JSON data.

```js

var rows = [

  {"id": 75950,"name": "Louella Wallace","age": 24,"phone": "+44 (0)203 437 7302","color": "green"},

  {"id": 80616,"name": "Hanson Perry","age": 36,"phone": "+44 (0)203 279 3708","color": "brown"},

  {"id": 77621,"name": "Brandi Long","age": 20,"phone": "+44 (0)203 319 4880","color": "gray"},

];

```

 Will result in the following column settings generated for the table:

 

 ```js

var columns = [

    {key: 'id', label: 'id', cell: 'id'},

    {key: 'name', label: 'name', cell: 'name'},

    {key: 'age', label: 'age', cell: 'age'},

    {key: 'phone', label: 'phone', cell: 'phone'},

    {key: 'color', label: 'color', cell: 'color'},

];

 ```

 

You can specify column settings and pass them as `columns` prop. 

This also allows to change the order of columns in the table.

Example for `rows` data above: 

 ```js

var columns = [

    'id',

    'name',

    'age',

    {key: 'phone', label: 'Phone'},

    {key: 'color', label: 'Colourful', cell: function(row, columnKey){

        return {row.color};

    }}

];

 ```

**JSFiddle demo: https://jsfiddle.net/agracio/2dd7sxxs/**

 

Complex JSON objects are also supported 

```js

var rows = [

  {"id": 75950,"name":{"first":"Catherine","last":"Welch"},"age": 24,"phone": "+44 (0)203 437 7302","color": "green"},

  {"id": 80616,"name":{"first":"Goff","last":"Castro"},"age": 36,"phone": "+44 (0)203 279 3708","color": "brown"},

  {"id": 77621,"name":{"first":"Guthrie","last":"Sullivan"},"age": 20,"phone": "+44 (0)203 319 4880","color": "gray"},

];

var columns = [

    {key: 'name.first', label: 'First Name'},

    {key: 'name.last', label: 'Last Name'},

    'age',

    {key: 'phone', label: 'Phone'},

    {key: 'color', label: 'Color'}

];

```

 

Only columns defined in `columns` prop will be shown in table.

### Column grouping

Columns can be grouped under same header by specifying `group` column property.

```js

var rows = [

    {"id":56480,"company":"Plasmox","name":{"first":"Catherine","last":"Welch"},"position":"Regional manager","address":"888 Himrod Street, Independence, Virgin Islands, 3588","phone":"+1 (968) 567-2395","mobile":"+1 (804) 414-3278","email":"[email protected]","registered":"Wednesday, August 27, 2014 11:46 AM"},

    {"id":27368,"company":"Accidency","name":{"first":"Goff","last":"Castro"},"position":"Operations manager","address":"295 Bogart Street, Defiance, Marshall Islands, 8354","phone":"+1 (831) 510-2392","mobile":"+1 (840) 446-2807","email":"[email protected]","registered":"Monday, November 9, 2015 7:37 PM"},

    {"id":44914,"company":"Viagreat","name":{"first":"Guthrie","last":"Sullivan"},"position":"Office manager","address":"802 Wythe Place, Jardine, Ohio, 7435","phone":"+1 (990) 409-3109","mobile":"+1 (875) 417-3069","email":"[email protected]","registered":"Tuesday, December 6, 2016 11:38 AM"},

    ];

var columns = [

    {key: 'company', label: 'Company'},

    {key: 'name.first', label: 'First Name', group: 'Employee'},

    {key: 'name.last', label: 'Last Name', group: 'Employee'},

    {key: 'position', label: 'Position', group: 'Employee'},

    {key: 'address', label: 'Address', group: 'Contact Details'},

    {key: 'phone', label: 'Phone', group: 'Contact Details'},

    {key: 'mobile', label: 'Mobile', group: 'Contact Details'},

    {key: 'email', label: 'Email', group: 'Contact Details'},

    {key: 'registered', label: 'Registered'}

];

```

**JSFiddle demo: https://jsfiddle.net/agracio/sstjzy3L/**

### Exclude columns

This allows to exclude columns from table without defining all columns. 

For `rows` example above, if you wanted to show all columns except 'id' instead of passing `columns` prop 

 ```js

var columns = [

    'name',

    'age',

    'phone',

    'color'

];

 ```

 

 You can pass `excludeColumns` prop

 

  ```js

 var excludeColumns = [

     'id'

 ];

  ```

If both `columns` and `excludeColumns` props are passed, columns will be excluded even if they are defined in `columns` prop.

## README update in progress...