Render Table with button when change page


Topic: Render Table with button when change page

Giovanni Petruzzellis asked 2 years ago

I have a table with some values and for each row have a button to show the status of the record, and cliccking I can change this status.

All work good, but when change page or chnage sorting of the rows, the column with the buttons remain with the old status order (but only for the colors). I have add some id in the button and see that this change on sort, but the background color no, remain always the same.

class StatusButton extends React.Component {

constructor(props) {

    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
        status: props.status,
    };
}


toggle() {

    this.props.action();

    this.setState({
        status: !this.state.status,
    });
}


render() {
    return (
        <Button style={{ background: this.state.status ? 'green' : 'red' }} onClick={() => this.toggle()}><i style={{ color: "white" }} className={this.state.status ? 'icon-check' : 'icon-close'}></i></Button>
    );
}

}

..............

RenderTable(items) { let columns = [ { label: '#', field: 'id', sort: 'asc', width: 10 }, { label: 'Name', field: 'name', sort: 'asc', width: 100 }, { label: 'Order', field: 'order', sort: 'asc', width: 30 }, { label: 'Status', field: 'status', sort: 'asc', width: 30 }, { label: 'Action', field: 'action', sort: 'asc', width: 90 } ];

                let data = [];

                items.forEach((item, index) => {
                    let row = {
                        id: item.id,
                        name: item.name,
                        order: <FormGroup><InputGroup><Input type="number" placeholder="0" /><Button style={{ width: "50px" }} color="success"><i className="icon-check"></i></Button></InputGroup></FormGroup>,
                        status: <StatusButton status={item.enabled} action={() => this.UpdateStatus(index)}></StatusButton>,
                        action: this.renderActionButton(index)
                    };
                    data.push(row);
                });

                const table = { columns: columns, rows: data }

    return (
        <MDBDataTable
            responsive
            btn
            fixed
            hover
            striped
            bordered
            order={['name', 'asc']}
            onPageChange={value => console.log(value)}

            data={table}
        />
    );

}


Piotr Glejzer staff commented 2 years ago

what is it RenderTable(items) ?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.25.3
  • Device: Desktop
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No