Expandable on Row Click

[emin-karadag]

Hello there, Let me first mention the versions I use.

React: ^16.13.1 react-data-table-component: ^6.7.1

My problem is with expandable lines. If there is only text in a cell and you click on it, row expansion works. However, the row expansion does not work when there is a picture or an ordinary div and not a text.

When I click on the area marked in red in the image below, row expansion does not work. However, it works when I click on the area I marked in blue.

The codes I use for this process are as follows.

`import React, { Component } from 'react'; import DataTable from 'react-data-table-component';

const data = [{ id: 1, title: 'Conan the Barbarian', year: '1982' }]; const columns = [ { name: 'Title', selector: 'title', sortable: true, cell: row =>

{row.title}

}, { name: 'Year', selector: 'year', sortable: true, right: true, }, ];

const ExpanableComponent = ({ data }) =>

{data.title}

;

class App extends Component { render() { return (

} />

)

} }

export default App;`

[jbetancur]

This seems to happen with any custom cell. The reason is that there is a wrapper div that is used for native cells to propagate events. But when using custom cells is where it is not working.

As a workaround, you can try adding the following to your custom cell component data-tag="___react-data-table-allow-propagation___" and see if that works.

I'll see about getting a long term fix in for this.

[jbetancur]

This was fixed some time ago for a duplicate issue. See https://github.com/jbetancur/react-data-table-component#61-columns and the cell section.

TL;DR

if you are using properties such as: onRowClicked, onRowDoubleClicked, expandOnRowClicked or expandOnRowDoubleClicked then those click events will be ignored when clicking on your custom cell. To allow RowClicked events you can add data-tag="allowRowEvents" to your custom cell component elements.