Technical Articles
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.
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.
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
You may also implicitly load all the data with the following "trick":
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.