Material Table React – Apply To All and Apply To Group BY

I want to Apply, “Apply To All” and “Apply to GroupBy” for the rows I’m using with the use of Material UI.

  1. I want to create a button “Apply to All”. When the user Edit on a row and update all the columns and when we click on “Apply to All” it should apply to all the rows (ex: In the below code, I have two rows, it should update all the 2 rows)

  2. I want to create a button “Apply to Group”. When the user drag a column and get the grouped value (ex: I grouped by Name and it has only one row. When I click on Apply to Groupby it should update only one row)

I want to show one button at a time. If the user start drag, it should show only “Apply to Group” or by default it should show “Apply to All”

function ConditionalActions() {
  return (
    <MaterialTable
      title="Conditional Actions Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
       options={{
        grouping: true
      }}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
      ]}
      actions={[
        {
          icon: 'save',
          tooltip: 'Save User',
          onClick: (event, rowData) => alert("You saved " + rowData.name)
        },
        
        rowData => ({
          icon: 'delete',
          tooltip: 'Delete User',
          onClick: (event, rowData) => confirm("You want to delete " + rowData.name),
          disabled: rowData.birthYear < 2000
        })
      ]}
    />
  )
}