Custom row and column header in AG-Grid?

Hello, I have to add a custom row above all the data. Some pre-determined columns will have the "Edit" option. Upon clicking on "Edit", a modal has to open which will alter the values of all rows in the same column if they satisfy a condition.

Also I have to provide a custom column header similar to one in the photo and upon clicking the top-down arrows all rows which satisfy a certain property must move up, ie similar to a partition. Currently the column header looks this -

I am using React and Typescript for this project.

    <AgGridReact
            onGridReady={() => this.onGridReady}
            defaultColDef={{
              cellRenderer: "valueRenderer",
              cellStyle: { border: "1px solid #EDEDED" }
            }}
            frameworkComponents={{ valueRenderer: ValueRenderer }}
            columnDefs={columnDefs}
            rowData={rowData}
          ></AgGridReact>

Please help how I can I go about doing this. Happy to provide any more details if needed.

I haven't been figure out how to implement the above two features. I think the answer is in the GridAPI, ColumnAPI and ICellRendererParams but I can't narrow it down.