4

I'm using the react-data-table-component.

I have these columns:

const columns = [
        {
            name: 'ID',
            selector: 'id',
            sortable: true,
        },
        {
            name: 'Place',
            selector: 'place',
            sortable: true,
        },
        {
            name: 'Created at',
            sortable: true,
            selector: 'created_at',
            cell: row => new Date(row.created_at).toLocaleDateString()
        },
        {
            name: '',
            sortable: false,
            cell: () => <Button variant="danger" data-tag="allowRowEvents" data-action="delete"><FontAwesomeIcon icon={faTrash} /></Button>,
        }
    ]

And in Datatable component:

const handleRowClicked = ({id}, e) => {
        e.stopPropagation()
        const action = e.target.getAttribute('data-action')
        switch (action) {
            case 'show':
                props.openModalDetail(id);
            break;
            case 'delete':
                props.delete(id)
            break
            default:
                return
        }
        return
    }

The event is listend on click on button (every pixel of red square) but not on icon itself.

enter image description here

I did try to add the data-tag="allowRowEvents" on icon itself, without success.

I did try to add a listener to e.currentTarget, without success.

sineverba
  • 5,059
  • 7
  • 39
  • 84

1 Answers1

0

Documentation has information about that React data-table-component: onClick on button doesn't work on inner icon On onRowClicked section they say that:

Note: If you are using custom cells (column[].cell), you will need to apply the data-tag="allowRowEvents" to the innermost element or on the elements you want to propagate the onRowClicked event to.

Important part is apply the data-tag="allowRowEvents" to the innermost element. So I think you must add this element to the * FontAwesomeIcon* component too.

jeromelebaron
  • 26
  • 2