How to add value to a button dynamically in react-table

Question

I have a react table (using react-table) component which looks as below. In the column State, I want to render button in each cell with dynamic values. These values I want to fetch from server data.

{
    //Header: 'Download',
    id: 'request_state',
    filterable: false,
    Cell: ({index}) =>
    (<Button id={"approve_" + index}
            value={<FormattedMessage id={"Approve_" + index} defaultMessage={"Approved"}
            fontSize={14}
            minHeight={33}
            minWidth={"100%"}
            backgroundColor="transparent"
            borderRadius={5}
            icon={<Download size={13} color={'black'}></Download>}
            onClick={() => this.handleDownloadDelivery(index)}
    />)
}

Using above code, I could populate button in each cell with value "Approved". However, I want to populate this value dynamically using attribute values that I am getting in request_state attribute of the object "data" from server. Using "accessor:" I could access these attribute values of server side data, but I am not able to do the same for 'Cell:'. I could see string "invited" using accessor:

{
    Header: 'State',
    id: 'request_state',
    filterable: false,
    accessor: data =>{
              let output =[];
              output = data.request_state;
              return output;
           },
}

I basically want something like below:

{
    //Header: 'Download',
    id: 'request_state',
    filterable: false,
    Cell: ({index}) =>
    (<Button id={"approve_" + index}
        value={<FormattedMessage id={"Approve_" + index} defaultMessage={data.request_state}}
        fontSize={14}
        minHeight={33}
        minWidth={"100%"}
        backgroundColor="transparent"
        borderRadius={5}
        icon={<Download size={13} color={'black'}></Download>}
        onClick={() => this.handleDownloadDelivery(index)}
    />)
}

Nilakshi Naphade · Accepted Answer · 2017-10-26 16:00:57Z

3

I solved it as below:

{
    id: 'invite_accept',
    filterable: false,
    accessor: data => {
    let output =[];
    output = data.request_state;
    if(output == 'invited') {
        output = 'Accept Invitation'
    }
    return output;
    },
    Cell: props => <Button id={"Approve_" + props}
                value={<FormattedMessage id={"Approve_" + props} defaultMessage={props.value}/>}
                fontSize={14}
                minHeight={33}
                minWidth= {"100%"}
                backgroundColor="transparent"
                border={10}
                borderRadius={5}
                icon={<Eye size={14} color={'black'}></Eye>}
                onClick={() => this.handleApproveOrRequestDelivery(props)}
    />

},

answered Oct 26, 2017 at 16:00

Nilakshi Naphade

1,0954 gold badges14 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add value to a button dynamically in react-table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related