How to select the rows of a material table programmatically on onclick event of button -React js

Question

I am Working with Material-Table . I need to select multiple rows on clicking a button based on some condition .the condition is written inside the code below. Can anyone guide me on how to select multiple rows based on some condition?

 <MaterialTable
                            icons={tableIcons}title=""

                            columns={[
                                { title: 'Project Name', field: 'Project_Name', render: rowData => <Link to='/projectdetails'>{rowData.Project_Name}</Link> },
                                { title: 'Methods Covered', field: 'Methods_Covered', type: 'numeric' },
                                { title: 'Methods not Covered', field: 'Methods_not_Covered', type: 'numeric' },
                                { title: 'Total Methods', field: 'Total_Methods', type: 'numeric' },

                                    ]}

                            data={this.state.results}


                            components={{
                                Toolbar: props => (
                                    <div>
                                        <MTableToolbar {...props} />
                                        <div className="Mtable">

                                       
                                            <div>
                                                <Button color="primary" onClick={rowData => 
                                                 (rowData.Methods_Covered ? 
                                                  rowData.tableData.checked = true : 
                                                  rowData.tableData.checked = false)}>
                                                 select Highlighted</Button>
                                            </div>
                                            
                                        </div>
                                      
                                    </div>
                                ),
                            }}
                            onSelectionChange={this.handleSelect}
                            onRowClick={this.handleRowClick}
                            options={{
                                sorting: true,
                                selection: true,
                                search: true,
                                searchAutoFocus: true,
                                searchFieldAlignment: 'right',
                                searchFieldStyle: {
                                    border: 'solid black 2px',
                                },
                              }}
  />

score 1 · Answer 1 · answered Dec 08 '21 at 20:05

<MaterialTable
    // here other params of table component      
    options={{
        selection: true,
        selectionProps: (rowData: any) => ({
            color: "primary",
            checked: agentGroups?.includes(rowData.value) ? true: false,
            onClick: (() => {
                let index = agentGroups.findIndex((group:string)=>group==rowData.value);
                index > -1 ? agentGroups.splice(index , 1) : agentGroups.push(rowData.value);
            }),
        }),
    }}
/>

The key is to modify(push or splice) the array in onClick function which you have used in checked key of selectionProps

Remove if already present in array, it will unselect the row
Push if not already present in array, it will select the row

score 0 · Answer 2 · answered Dec 15 '20 at 03:33

I haven't tried the code of the OP, but someone having this problem can check the selectionProps properties of the options props of the MaterialTable:

options={{
  sorting: true,
  selection: true,
  search: true,
  searchAutoFocus: true,
  searchFieldAlignment: 'right',
  searchFieldStyle: {
      border: 'solid black 2px',
  },
  selectionProps: ({ tableData: { checked } }) => ({
    checked
  }),
}}

Please check the last example here: https://material-table.com/#/docs/features/selection

And the docs for options here: https://material-table.com/#/docs/all-props

How to select the rows of a material table programmatically on onclick event of button -React js

2 Answers2