Topic: Make a MDBDataTable row clickable

robnewton pro asked 4 years ago


I need to make a row clickable so that if the TR is clicked anywhere I can specify a to={{}} with a pathname and state object. I cannot find any documentation for how to do this.


dtremblay.grt premium answered 3 years ago


@robnewton I just looked into the core of MDB and you can make a row clickable with the reserved row key "clickEvent".

Here is an example :

<MDBDataTable
                data={{
                    columns: [
            {            
                label: 'Last Name',
                field: 'lastName',
                sort: 'asc',
            },
            {
                label: 'First Name',
                field: 'firstName',
                sort: 'asc',
            }], 
            rows: [
                {
                    firstName: 'value column',
                    lastName: 'value column 2',
                    clickEvent: () => this.handleClick(params)
                }
            ]
                }}
            />

Konrad Stępień staff commented 3 years ago

Hi @dtremblay.grt,

Very thank you for your answer. I think the question is resolved and your suggestion is a good way.

Best regards, Konrad.


revanth free commented 3 years ago

Hi [@dtremblay.grt],

Your comment solved my problem thanks for that.


sushant free commented 3 years ago

but what if the data coming from server


Konrad Stępień staff commented 3 years ago

Hi @sushant,

I think that you can download data asynchronously and after downloading render data with processed data.

We need to test it, or create properties suitable for our datatable.

Best regards, Konrad.


Ravali K free commented 3 years ago

Hi @dtremblay.grt, What is params in clickEvent: () => this.handleClick(params)?


rh xie free commented 2 years ago

How can I pass the row detail back?


Piotr Glejzer staff commented 2 years ago

did you try this clickable option?


Ricardo Miguel free commented 2 years ago

this works, but if we choose the next page in the table, click on the line, it goes back to the first page of the datatable


Jakub Mandra staff answered 3 years ago


We always want to fit the needs of our users and develop features, which you need - so yes, we have got it in our planned tasks.


robnewton pro answered 4 years ago


That is unfortunate. Is this functionality that is on the roadmap to be added in the future?


Jakub Mandra staff answered 4 years ago


Hello,

There is no such functionality implemented. You can add Buttons or links inside table.

{
name: "Tiger Nixon",
position: <Link to="/">Link</Link>,
office: "Edinburgh",
age: "61",
date: "2011/04/25",
salary: "$320"
},

FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No