CODEWITHSUNDEEP
reactjsmaterial-designmui-datatable
Geórgia Cavalcanti
Geórgia Cavalcanti

Reputation: 63

Select row in datatable (mui-datatable)

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);

Upvotes: 3

Views: 9159

Answers (2)

Khabir
Khabir

Reputation: 5854

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

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

Upvotes: 2

Gabriel
Gabriel

Reputation: 464

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.

Upvotes: 4

Related Questions