Reactive table: word (text) wrap possible?

help
1

hi,

I loaded a big json file into a cell of the reactive table . Issue is that the text just disappears on the right side of the screen, I already tried to include the autowidth and responsive without luck


Template.APILogs.helpers({
    RESTCallSettings: function() {
        return {
            collection: APILogs,
            rowsPerPage: 10,
            responsive: true,
            autoWidth: true,
            showFilter: true,
            showColumnToggles: true,
            fields: [
                { key: 'action', label: 'Action' },
                { key: 'request', label: 'Request' }, {
                    key: 'response',
                    label: 'Response',
                    fn: function(value) {
                        return new Spacebars.SafeString('<pre id="json">' + JSON.stringify(value, undefined, 2) + '</pre>')
                    }
                },
                { key: 'createDate', label: 'Date' },
                { key: 'createdBy', label: 'Created by' },
            ]
        };
    }
})

1920×773 63.5 KB

thank you

2

This should probably be solved by css – do you want the text to wrap, go to ellipses, etc?

3

thanks you suggestion already points me to some direction…

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

So a real word wrap (like in MS word), that does not cut my sentence or … but goes to the next line is not available?

thank you

4

Try setting a width on your th for that column. Then you can start to look at word wrap, etc.

5

Thank you, like they do here?

I don’t see the option for the TH, here I am already in the TD/TR space?

Cell CSS Class

To set the css class for the table cells in a column, add the cellClass key to the field settings. This attribute can be a String or a Function. The function arguments will be the value for this key, and the full row object.

{ fields: [
  { key: 'name', label: 'Name' , cellClass: 'col-md-4'},  // as String
  { key: 'location', label: 'Location',
    cellClass: function (value, object) {
     var css = 'col-md2';
     '/*do some logic here */
     return css;}  // as Function
  },
  { key: 'year', label: 'Year' }
] }