[SOLVED] Material Table React - Apply To All and Apply To Group BY

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.

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)
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
        })
      ]}
    />
  )
}

Solution

I want this functionality to be done while Editing. Using Material editable function, I'm getting 'tableData' using that am able to filter out only grouped data using es6.

Please find the below snippet. It might be useful for someone who is looking for similar kind of implementation.

const data = tableRef.current.dataManager.groupedData

const filterDataWithEditingUpdate = (data) => {
     return data.filter(item => {
        const hasEditingUpdate = item.data.some(dataItem => dataItem.tableData && dataItem.tableData.editing === 'update');
        return hasEditingUpdate;
        });
    };

 const filterGroupedResult = filterDataWithEditingUpdate(data);