Copy/Paste functionality in ItwinUI like Excell

[sahil726433]

Is there any way in ITwinUI provided components, where I can have functionality of copy paste like excel.
Either in ITwiUi table or some other package like react-spreadsheet.

Requirements :-

1. Coping some cells with Win + C from excell.
2. Pasting that data (like excell) in ItwinApp table or in some grid with Win + V

[mert-batu]

Hi @sahil726433! This is a great question. Building spreadsheet-like interactions in web applications can be tricky.

Currently, the native iTwinUI Table component is heavily optimized for data presentation, filtering, and selection, but it does not have built-in support for complex, multi-cell Excel-like clipboard operations (Ctrl+C / Win+C and Win+V across a grid).

To achieve exactly what you need, here is the standard approach:

1. Use a Dedicated Spreadsheet/Grid Library:
   For genuine Excel-like behavior (copying ranges, pasting raw TSV/CSV data into cells), you should use a library specifically built for this purpose rather than the standard iTwinUI Table. Excellent choices include:

react-data-grid

ag-Grid (Community or Enterprise)

handsontable

2. Handle the Clipboard API manually (If sticking to iTwinUI):
   If you absolutely must use the iTwinUI Table or a custom grid, you will have to capture the clipboard events globally or on the container wrapper and parse the data yourself:

// Concept for catching paste events
const handlePaste = (event) => {
const clipboardData = event.clipboardData || window.clipboardData;
const pastedText = clipboardData.getData('Text');

// Excel data is typically tab-separated (\t) and newline-separated (\n)
const rows = pastedText.split('\n').map(row => row.split('\t'));

// Now map 'rows' to your state that feeds the iTwinUI Table data prop
console.log(rows);
};
Recommendation: If the core requirement is truly "Excel-like data entry," wrap an ag-Grid or react-data-grid instance inside an iTwinUI container, applying iTwin CSS variables to match the styling!

(PS: If this solves your issue, please consider marking this as the Answer so it can help others in the future! 🚀)

[sahil726433]

Thanks @mert-batu !

[GerardasB]

Please use https://github.com/iTwin/iTwinUI repository for questions related to https://itwinui.bentley.com/docs/table