Copy Table Column Data to Clipboard

Recently, we got a requirement from customer to copy the table column data as we do in ALV report.

The Copy option should be provided to all the columns of the table individually.

In responsive table we have an option to export the whole table data in an excel but there is no option to copy individual column data.

To achieve I have written the below custom logic to copy the whole column data and it works when the data is filtered or sorted as well.

I have created a custom ui5 project by using Northwind OData service to display the product details in a responsive table.

And in table columns I have add a button icon for copy the data with an action “onCopy”.

View:

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="table.controller.View1" displayBlock="true">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="{i18n>title}">
                    <content>
                        <FlexBox direction="Column" class="sapUiLargeMargin">
                            <SearchField liveChange=".onSearch" width="50%"/>
                            <Table id="__Table" items="{path: 'oNWModel>/Products'}" growing="true" growingThreshold="10" enableBusyIndicator="true" class="sapUiSmallMarginTopBottom" >
                                <columns>
                                    <Column hAlign="Center">
                                        <FlexBox alignItems="Center">
                                            <Text text="Id"/>
                                            <Button icon="sap-icon://copy" press="onCopy" tooltip="Copy Data" type="Transparent" class="sapUiTinyMarginBegin" />
                                        </FlexBox>
                                    </Column>
                                    <Column >
                                        <FlexBox alignItems="Center">
                                            <Text text="Name"/>
                                            <Button icon="sap-icon://copy" press="onCopy" tooltip="Copy Data" type="Transparent" class="sapUiTinyMarginBegin"/>
                                        </FlexBox>
                                    </Column>
                                    <Column hAlign="Center">
                                        <FlexBox alignItems="Center">
                                            <Text text="Price"/>
                                            <Button icon="sap-icon://copy" press="onCopy" tooltip="Copy Data" type="Transparent" class="sapUiTinyMarginBegin"/>
                                        </FlexBox>
                                    </Column>
                                </columns>
                                <items>
                                    <ColumnListItem vAlign="Middle">
                                        <cells>
                                            <Text text="{oNWModel>ProductID}"/>
                                            <Text text="{oNWModel>ProductName}"/>
                                            <Text text="{oNWModel>UnitPrice}"/>
                                        </cells>
                                    </ColumnListItem>
                                </items>
                            </Table>
                        </FlexBox>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

Controller function for onCopy:

Based on the triggered event I have fetched the column properties, as my copy button is embedded inside a flexbox I have used getParent() method twice to fetch the column property.

Used ‘/n’ line breaks for a new row. Pasting text like this in an Excel, OpenOffice / LibreOffice Calc spreadsheet, it will detect it as multiple cells. It also works with Google Docs.

navigator.clipboard is used to access the system clipboard in order to write the contents of the clipboard

 onCopy: function (oEvent) {
                //Fetch the Column from where the event is triggered
                var oCol = oEvent.getSource().getParent().getParent();
                // Fetch the Table properties
                var oTable = oCol.getTable();
                //Get the items of the table
                var oItems = oTable.getItems();
                //You need the index of the column to get the exact cell of the item
                var iIndex = oCol.getIndex() - 1;
                //Column separtor to seggregate the data in table
                var colSeparator = '\n';
                var sCopy = "";
                oItems.forEach(oItem => {
                    var oCell = oItem.getCells()[iIndex];
                    var sText = oCell.getText();
                    sCopy += sText + colSeparator;
                });

                //Copy the data to the clipboard
                navigator.clipboard.writeText(sCopy).then(function () {
                    MessageToast.show("Column Copied");
                }, function (err) {
                    console.error('Async: Could not copy text: ', err);
                });
            }

UI Screen:

Pasting in Excel:

Wrap Up :

In this blog post we went through a simple example of copy column text from a responsive table. However, you can use it to make much more elaborate changes to your applications.

I would love to hear from you! Please leave your feedback below.