How can I wrap the text inside the GWT CellTable cell?

Question

I need to wrap the text of the column. My column size is small. So if i set column width some of the letters are not visible. Since the length of the text is bigger than the column size. If there is a space in the text then it wraps itself. So I need to wrap the text.

For example, emailColumn it's value is xxxxxxxxxxxxx@XXXXXXX.com.

I expect the result as xxxxxxxxxxx@x in the first line and xxxx.xom in the next line.

Is it possible?

Answer 1

I tried wrap text inside cell table, we can achieve this by creating custom column.

Create one abstract cell column for cell table,append html contant in that cell and add column to cell table like this.

1. Add this code in your main java file, which contains cell table and paste below code in neccessary place.

       WrappedColumn<T> textDetail = new WrappedColumn<T>() {
           // This is method in wrapped details column java file.
   
           public WrapDetails getValue(T object) {
               return new WrapDetails( T.<your method1 for wrap text>(), T.<your method2 for wrap text>());
           }
       };    
       <your cell table>.addColumn(textDetail);
   

2. Create new java file named like 'WrapDetails.java' for render dynamic data and paste below code.

   public class WrapDetails extends Composite {    
       String mail_id;
       String website;
   
       public WrapDetails(String id, String site) {
           this.mail_id = id;
           this.website = site;
       }   
   }
   

3. Create new java file for wrap text column with named 'WrappedColumn.java' and paste below code.

   public abstract class WrappedColumn<T> extends Column<T, WrapDetails> {
   
       public WrappedColumn() {
           super(new WrapDetailsColumnCell());
       }
   
       /**      
        * Return the passed-in object. 
        * @param object The value to get
        */    
      @Override    
      public WrapDetails getValue(T object) {   
          return null;         
      }    
   }
   

4. Create new java file named as 'WrapDetailsColumnCell.java' and paste below code.

   public class WrapDetailsColumnCell extends AbstractCell<WrapDetails> implements Cell<WrapDetails>{      
       String mail_id, website;
   
       /**
        * Add this constructor, if you want click event for this column.
        */
       public WrapDetailsColumnCell() {
           super("click", "keydown");      
       }
   
       /**
        * This method provides style for your wrap data
        * 
        */
       @Override
       public void render(Context context, WrapDetails value, SafeHtmlBuilder sb) {
   
           sb.appendHtmlConstant("<div><table width='100%'>");
           sb.appendHtmlConstant("<tr><td><div style='your style here'>"+mail_id+"</div></td></tr>");
           sb.appendHtmlConstant("<tr><td><div style='your style here'>"+website+"</div></td></tr>");
           sb.appendHtmlConstant("</table></div>");
       }
   
       /**
        * This method update cell value on click event.
        * 
        */
       @Override
       public void onBrowserEvent(Context context, Element parent,WrapDetails value, NativeEvent event,  ValueUpdater<FaxDetails> valueUpdater) {
           super.onBrowserEvent(context, parent, value, event, valueUpdater);
           setValue(context, parent, value); 
           valueUpdater.update(value);
       }
   }
   

It is working for me well. After tried this, let me know any issue if you get. Have a fun.