Search code examples
reactjsmaterial-designmui-datatable

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

Solution

  • 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.