[Feature Request]: DataSpreadsheets needs more functionality support

[AustinGitHub]

The problem

The issue is for design we are going to be expected to do various things with the data spreadsheets and right now I am not seeing a good way to implement some actionable cases in where it would be helpful if the data spreadsheets added support for this.

• Drag/drop of columns when there is overflow doesn't work Data Spreadsheet: Can't drag and drop column when there is overflow on the table #5222
• Click out of table doesn't persist cell info [DataSpreadsheet]: Clicking out of data spreadsheet table doesn't save #5370
• Issue with selection area callback [DataSpreadsheet]: SelectionAreaChange does not capture every event + Selection mouse move gets stuck when remove onclick #5262
• Need custom element addition to the index cells so we can add a dropdown selection for something like delete row [Feature Request]: DataSpreadsheets: Add way to add custom actions to row index cell  #5253
• Hitting enter on a cell does a new line instead of same line edit mode [DataSpreadsheet]: Hitting enter on a cell does new line instead of entering edit mode on same line #5330
• Being able to disable the swapping of columns/rows
• Being able to call functions like setActiveCellCoordinates, activeCellInsideSelectionArea, and more.
• Allow resizable columns/Rows
• Allow onDataUpdate be functional in a way that we don't have to use useState and allow it to be like
  onDataUpdate={(data) => computeNewData(data)}

I was able to figure this out. I needed to do something like this

Component callback
  onDataUpdate={newData}


Function 
   const newData = (newData) => {
        const newRowData = newData(rowData);

        console.log(newRowData);
    }

• When updating a data set, if the column is removed the selection cell shouldn't crash the table. In my code I had to do this to avoid a crash since the selected cell didn't exist anymore.

 if (document.getElementById("c4p--data-spreadsheet__cell--0--0")) {
     document.getElementById("c4p--data-spreadsheet__cell--0--0").click();
 }

I tried to use ref on the component but this won't work.

Marking this issue as high priority because there is a lot of features that would be very helpful to have right now but currently I have to manipulate in certain areas in order to get specific use cases to work or to fit the design.

Thanks!

The solution

Implement the suggestions above to make dev usability smoother with this component.

Design link

No response

Links to other materials

No response

Owner/main maintainer(s)

IBM

Second/backup maintainer(s)

No response

Product/offering

No response

Business priority

High Priority = pressing release

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[AustinGitHub]

Hi @matthewgallo do you know when some of these can be started on and fixed? I opened another issue and added to this epic in relation to the selection area callback having some issues. Do you know what the process is for carbon team to begin taking a look at them? Thanks!