Material-ui: [TableBody][Checkbox] Disable the selected-while-click thing of the Table component and make the CheckBox on the left do the job

Created on 24 Feb 2016 · 9Comments · Source: mui-org/material-ui

Hi guys,
I'm having this problem with

component,
I want to build a table which can be selected, and after some test I find that when I put a selectable={true} for my table, a table row will automatically been selected when I click anywhere of that row (thanks for that), But currently I don't want this feature, I only want to select it when I click the _checkbox_ on the left. Unfortunately, I found no documents about how to turn this feature off.
Plus, this feature brings another issue: it makes it impossible to select text on the table row by the cursor.

Any ideas how to solve this?
Thanks.

Table

Source

louis-she

👍21

Most helpful comment

Having this same issue.

avnunn on 29 Mar 2016

👍11

All 9 comments

Well, I dig into the source code and find that the on the right of the row is just a decoration. Click the checkbox fires the 's click event.
I thinks it's better to make the checkbox functional and be seperated from the table row. : )

louis-she on 24 Feb 2016

Having this same issue.

avnunn on 29 Mar 2016

👍11

Facing the same issue.

anlesk on 28 Jun 2016

Running into this same issue.

cody-lettau on 30 Jun 2016

Dirty workaround

// component
<TableRowColumn className='prevent-cell-click'>
    <div className='prevent-cell-click-wrapper' onClick={e => e.stopPropagation()}>
        // your content
    </div>
</TableRowColumn>

// styles
.prevent-cell-click {
  position: relative
}

.prevent-cell-click-wrapper:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

NeXTs on 2 Aug 2016

👍5

Sorry for spamming guys :stuck_out_tongue_winking_eye:

drets on 27 Jan 2017

Same issue on my side, It would be nice to have a prop 😄 Thanks @NeXTs for the workaround.

DonovanCharpin on 24 Apr 2017

It would be nice to have this as a prop, the workaround is of no use if you have a link inside your table cell

saraileon on 1 May 2017

👍2

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.