Skip to Content
Technical Articles
Author's profile photo Thajunniza M A

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.

 

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Bilen Cekic
      Bilen Cekic

      how about invisible rows on UI table ? I think this can only work on sap.m.table. We had a  similar requirements where we bind thousands of rows to table (but UI table shows 100 at once and rest is not rendered in DOM). I think accessing the model here can be easier.

      Author's profile photo Thajunniza M A
      Thajunniza M A
      Blog Post Author

      Hi Bilen,

      Yes this will copy only the data which has been loaded/viewed in the table.If you want the whole data we can get it from the model.

      Our case is to copy the data which is visible in the table and it also supports if any filter or sort is applied.

       

      Regards,

      Thaj

      Author's profile photo Shai Sinai
      Shai Sinai

      You may also implicitly load all the data with the following "trick":

      var threshold = oTable.getGrowingThreshold();
      oTable.setGrowingThreshold(oTable.getMaxItemsCount());
      oTable.getBinding("items").filter(oTable.getBinding("items").aFilters);
      oTable.setGrowingThreshold(threshold);
      Author's profile photo Bilen Cekic
      Bilen Cekic

      after 5-6 columns and 300-400 lines, sap.m.table gives terrible performance and page start hanging. So only option here is sap.ui.table where we can load 50k lines without any issue. Problem of sap.ui.table is scrolling is not smooth, it is not like virtual tables implemented in react but nothing to do, still acceptable. Actually ALV report also work in same way, if client really wants ALV functionality, it also includes all the rows in table.