react-antd-object-table

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

Name	Description
data	List of objects with label, value, copyable and separator as the keys
copyable	true/false, Enable or disable copy icon for values, defaults to true

Data list

data is a list of objects with the following keys:

Key	Desciption
label	Label to show, string or ReactNode
value	string, list of strings, ReactNode or a list of ReactNodes
separator	If a list is provided for value, then show the separator between the values, default '/'
copyable	true or false, inherits the value of the component prop and can be overridden specifically for the item