By default long text in table or data-grid will expand, showing all text in single line, that may not be very useful.
Columns will get expanded and few columns which we want to show will be hidden.
<oj-table class="custom-table"
id="employeetable"
scroll-policy="loadMoreOnScroll"
class="oj-flex-item oj-sm-12 oj-md-12"
data="[[ employeeListADP ]]"
columns='[
{"headerText":"Id","field":"id"},
{"headerText":"Employee Number","field":"empNumber"},
{"headerText":"Employee Name","field":"empName"},
{"headerText":"Department Name","field":"departmentNumber"},
{"headerText":"Address","field":"address"},
{"headerText":"Address line","field":"addressLine2"}
]'>
</oj-table>We can set for the column, so that it doesn’t expand.
e.g.: In this for Address we can give max-width as 200px
This will show the text up to 200px and later it is show as … This is similar to text-overflow: ellipsis; css code
<oj-table class="custom-table"
id="employeetable"
scroll-policy="loadMoreOnScroll"
class="oj-flex-item oj-sm-12 oj-md-12"
data="[[ employeeListADP ]]"
columns='[
{"headerText":"Id","field":"id"},
{"headerText":"Employee Number","field":"empNumber"},
{"headerText":"Employee Name","field":"empName"},
{"headerText":"Department Name","field":"departmentNumber"},
{"headerText":"Address","field":"address","style": "max-width:200px"},
{"headerText":"Address line","field":"addressLine2"}
]'>
</oj-table>We can try to wrap the text using oj-helper-overflow-wrap-anywhere oj-helper-white-space-normal classes
<h5>Table with added width to Address column</h5>
<oj-table class="custom-table"
id="employeetable"
scroll-policy="loadMoreOnScroll"
class="oj-flex-item oj-sm-12 oj-md-12"
data="[[ employeeListADP ]]"
columns='[
{"headerText":"Id","field":"id"},
{"headerText":"Employee Number","field":"empNumber"},
{"headerText":"Employee Name","field":"empName"},
{"headerText":"Department Name","field":"departmentNumber"},
{
"headerText":"Address",
"field":"address",
"className": "oj-helper-overflow-wrap-anywhere oj-helper-white-space-normal"
},
{"headerText":"Address line","field":"addressLine2"}
]'>
</oj-table>
Link to live application – https://khalil232.com/apps/ojet-apps/?ojr=table-long-text
Link for text-overflow: ellipsis – https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
Link for oradocs for content wrap – https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=table&demo=columnContentWrapping
