Mui-datatables: How to hide row checkboxes.

[susmita-vps]

Each row, renders a checkbox to select item for deletion. I don't want the check boxes, since row click is used for something else. Is there any way to hide the checkboxes. fileType: dropDown, doesn't seem to be working :-(

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

1.
2.
3.
4.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | |
| MUI-datatables | |
| React | |
| browser | |
| etc | |

[DTupalov]

See documentation - property selectableRows in options:

<MUIDataTable
  title={"Employee List"}
  data={data}
  columns={columns}
  options={{
    selectableRows: false // <===== will turn off checkboxes in rows
  }}
/>

[gregnb]

@susmita-vps yes @DTupalov is correct that is exactly how you do it

[svendeckers]

It doesn't say so in the docs, it says the options are 'multiple', 'single' or 'none', and 'none' is not working. Passing the boolean value false does work.

[gabrielliwerant]

@svendeckers 'none' should have the same effect as false and works for me on 2.2.0. Can you open a codesandbox showing that it does not work?

[meneman]

It seems as if there is no way to let MUIDatatable attach the selected attribute to its rows, without the checkboxes. Is this intentionell?
I would like to implement my own selection visiuals, using this handy styling method:

let theme = createMuiTheme({
    overrides: {
        MuiTableRow: {
            root: {
                '&$selected': {
                    backgroundColor: green[100]
                  }
            }
        },
    }
  })

But it selectableRows: 'none' does not only get rid of the checkboxes but of all selection behaviours.

[gabrielliwerant]

@meneman That's correct, it eliminates all selection behaviors. If you want to keep selection on click but not with select boxes, you need to use

selectableRows: 'single' || 'multiple'
selectableRowsOnClick: true

and then hide the checkboxes via style overrides.

[meneman]

@gabrielliwerant Thanks, i wasn't familiar with style overrides in mui.
For future reference, here is what i did to have a.) colored selected rows, b.) no checkboxes at the start of each row c.) no "1 row(s) selected" showing:

let theme = createMuiTheme({
    overrides: {
        MuiTableRow: {
            root: {
                '&$selected': {
                    backgroundColor: green[300]
                }
            }
        },
        MUIDataTableSelectCell: {
            root: {
                display: 'none'
            }
        },
        MUIDataTableToolbarSelect: {
            title: {
                display: 'none'
            }
        }
    }
});
....
    return (
        <MuiThemeProvider theme={theme}>
            <MUIDataTable title={'title'} data={data} columns={columns} options={options} />
        </MuiThemeProvider>
    );

[opandey007]

@susmita-vps yes @DTupalov is correct that is exactly how you do it

sir i want to hide checkbox but also i want row data when i click on rows ...is there any option