react-antd-object-table v1.0.1

react-antd-object-table

This is a component to display an object using antd Description component. The values get a copy icon to be able to copy the value to clipboard. Multiple values can be provided for a single lable with an optional separator.

Installation

npm install react-antd-object-table

Usage and Examples

import React from 'react'
import ObjectTable from 'react-antd-object-table'
import 'antd/dist/antd.css'

var dataObject = {
    'firstName': 'First',
    'lastName': 'Name',
    'city': 'Some City',
    'state': 'Some State',
    'height': 'few ft',
    'weight': 'some kgs',
}

export default class App extends React.Component {
    render() {
        return <ObjectTable data={[
            { label: 'First Name', value: dataObject.firstName },
            { label: 'Last Name', value: dataObject.lastName },
            { label: 'City / State', value: [dataObject.city, dataObject.state] },
            { label: 'Height / Weight', value: [dataObject.height, dataObject.weight], separator: '-' },
        ]} />
    }
}

Disable copy icon for the whole object

Disable copy icon for the whole table, but display only for a specific value

<ObjectTable copyable={false} data={[
    {label: 'First Name', value: dataObject.firstName},
    {label: 'Last Name', value: dataObject.lastName, copyable: true},
    {label: 'City / State', value: [dataObject.city, dataObject.state]},
]}>

Disable copy icon for a specific value

Enable copy icon for the whole table, but disable only for a specific value

<ObjectTable data={[
    {label: 'First Name', value: dataObject.firstName},
    {label: 'Last Name', value: dataObject.lastName, copyable: false},
    {label: 'City / State', value: [dataObject.city, dataObject.state]},
]}>

The label and value can be ReactNodes. When ReactNodes are used as value the copy icon and copyable props are not applicable.

Properties

Data list

data is a list of objects with the following keys: