Make a MDBDataTable row clickable

Topic: Make a MDBDataTable row clickable

robnewton pro asked 5 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.

Add comment

dtremblay.grt premium answered 4 years ago

2 0 Best answer

Please insert min. 20 characters.

@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 4 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 4 years ago

Hi [@dtremblay.grt],

Your comment solved my problem thanks for that.

sushant free commented 4 years ago

but what if the data coming from server

Konrad Stępień staff commented 4 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 4 years ago

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

rh xie free commented 3 years ago

How can I pass the row detail back?

Piotr Glejzer staff commented 3 years ago

did you try this clickable option?

Ricardo Miguel free commented 3 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

Add comment

Jakub Mandra staff answered 5 years ago

0 1 Best answer

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.

Add comment

robnewton pro answered 5 years ago

1 0 Best answer

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

Add comment

Jakub Mandra staff answered 5 years ago

0 1 Best answer

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"
},

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: 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

robnewton

Pro User 36Support score
4Questions 1Answers 0Snippets