Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Duplicate content in datatable

Codinga free asked 5 years ago


Really I am not satisfied with the pro version of mdbootstrap. I bought the pro version and I am disappointed. I have lost hours to implement functionalities that are really easy on material-ui. It's really stupid to add components on each line to display action buttons like modify, display, delete, activate? And i can't found How to select a row and retrieve data from this row to show them in modal?

rows: [
                    {
                        id: 'Tiger Nixon',
                        firstname: 'System Architect',
                        lastname: 'Edinburgh',
                        email: '30',
                        role: '2011/04/25',
                        actions: <MDBBtn onClick={this.handleClick} floating gradient="blue"><MDBIcon icon="pencil-alt" /></MDBBtn>

                    },
                    {
                        id: 'Tiger Nixon',
                        firstname: 'System Architect',
                        lastname: 'Edinburgh',
                        email: '61',
                        role: '2011/04/25',
                        actions: <MDBIcon onClick={this.handleClick} far icon="edit" />

                    },
                    {
                        id: 'Tiger Nixon',
                        firstname: 'System Architect',
                        lastname: 'Edinburgh',
                        email: '70',
                        role: '2011/04/25',
                        actions: <MDBIcon far icon="edit" />

                    }
                ]

Aliaksandr Andrasiuk staff answered 5 years ago


Hi,

We apologise for the unjustified expectations. We listen to your feedback and will try to improve user experience.

For not duplicating Button code you can store it in the variable :

const button = <MDBBtn onClick={this.handleClick)} floating gradient="blue"><MDBIcon icon="pencil-alt" /></MDBBtn>;

And then just add it to the each row:

 {
       id: 'Tiger Nixon',
       firstname: 'System Architect',
       lastname: 'Edinburgh',
       email: '70',
       role: '2011/04/25',
       actions: button
  }

So if you need to modify button you shouldn't modify it in each row separately.

Another option is to modify your rows before render (then you don't need to add this button to each row manually):

const rows = data.rows.map(row => ({ ...row, actions: button }))
data.rows = rows;

If you want to get data from the Row, unfortunately, there is no easy way to do it. And we are not happy about that, probably we will implement new methods to work with the data in the near future. But you can implement method to process the data you get from the clickEvent(each row has built-in method clickEvent, it returns an event object). Add a clickEvent to one of your rows(or all rows in way I described above):

   {
       id: 'Tiger Nixon',
       firstname: 'System Architect',
       email: '70',
       role: '2011/04/25',
       clickEvent: e => getData(e)
  }...

getData method :

 const getData = e => {
    const elements = e.target.parentElement.children;
    let transformedData = {};

    data.columns.forEach(({ label }, index) => transformedData = {...transformedData, [label]: elements[index].textContent})

    console.log(transformedData)
  }

This method will show the Object with all the Field's names and values in the console. Of course, you can store this object in the state and pass it to the Modal or wherever.

Hope I could help.

Best regards.


Codinga free answered 5 years ago


Hello any answer for my question?



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.17.0
  • Device: Mac os
  • Browser: Chrome
  • OS: Mac os
  • Provided sample code: No
  • Provided link: No
Tags