Enable Text Selection in a Table

To enable users to select and copy text in a table, add the user-select:text style to a row or cell template.

Note: If you enable text selection, you cannot also enable drag-and-drop functionality for the table.

1. In the Page Designer, select the table and switch to Code view.

2. Add the user-select:text style to a row or cell template. To select text in an entire row, add user-select:text to the <tr> element, for example:

   <template slot="rowTemplate">
     <tr style="user-select:text">  data-oj-as="row"
        <td>    
           <oj-bind-text value="[[row.data.EmployeeId]]"></oj-bind-text>               
        </td>
        ... 
     </tr>
   </template>

   Note: Inline styles are not recommended and might be flagged in audits. If possible, implement this styling as a custom class in your application’s CSS file.

   To select text in individual cells, add the user-select:text style to the cell template. If your cell template uses an <oj-bind-text> element, wrap that binding with a <span> element and add the style class to that span, for example:

   <template slot="departmentCellTemplate4">
     <span style="user-select:text"> 
         <oj-bind-text value="[[ $current.data.items[0] ? $current.data.items[0].department : undefined ]]"></oj-bind-text>
     </span>
   </template>

   You can now select text in the table to copy it.