Select row in datatable (mui-datatables)

Question

I am trying to use the tables from mui-datatable. It works fine but when I try to select the row outside de checkbox it doesn't work. I need it working like the tables from material-design.

I saw that they have a function to select the row, and it works on console mode, so... I need the code to put inside it and add the row to the selected rows.

const columns = ["Id","Description"];
const options = {
  filterType: 'checkbox',
  responsive: 'scroll',
  onRowClick: (rowData, rowState) => {

    //What can I add here?
    console.log(rowData, rowState);
  },
};

class PersonList extends React.Component{
    state = {
        persons: [],
        data: [],
    }; 
    componentDidMount() {

        axios.get(`my url`)
          .then(res => {
            const persons = res.data;
            const data = [];
            persons.map(x => data.push({ 'Id': x.id, 'Description' : x.Description}));           
            this.setState({ data });

          })
      }
render(){
    return(
        <Container>
            <Page pagetitle="Exemplo" history={this.props.history}>

            <MUIDataTable
                title={"My Table"}
                data={this.state.data}
                columns={columns}
                options={options}
            />
            </Page>
        </Container>
    )
}}
export default(PersonList);

Gabriel · Accepted Answer · 2019-06-12 06:19:55Z

4

This is now possible with the primary table options in version 2.4.0.

const options = {
  selectableRows: true,
  selectableRowsOnClick: true
};

Adding selectableRowsOnClick: true to the table options will allow a click anywhere on the row to register as a select action, just as it would if the checkbox were selected.

answered Jun 12, 2019 at 6:19

Gabriel

4644 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Khabir · Accepted Answer · 2020-04-03 15:16:36Z

2

selectableRows:true is deprecated. Please use selectableRows: multiple | single | none

const options = {
  selectableRows:'multiple',
  selectableRowsOnClick: true
};

edited Apr 3, 2020 at 15:16

answered Mar 30, 2020 at 18:30

Khabir

5,8781 gold badge26 silver badges38 bronze badges

Collectives™ on Stack Overflow

Select row in datatable (mui-datatables)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related