Можно ли изменить форматер для отдельной ячейки в табуляторе?

Question

У меня есть таблица, которая имеет один столбец, который имеет тенденцию быть длинным, пользователь хочет, чтобы это отображалось нормально (то есть как текст и обрезалось ли оно с помощью elipsis) при первой загрузке таблицы. Если они нажмут на эту ячейку заметок, они захотят, чтобы она развернулась и показала все содержимое поля. У меня это работает, удалив столбец и добавив "новый" с тем же определением, просто добавив спецификацию formatter: 'textarea' на новом столбце. Это почти делает то, что я хочу, единственное, с чем я сталкиваюсь, это то, что это заставляет все строки расширяться, что я действительно хочу, это только тот, на который они нажали. Можно ли это сделать с помощью табулятора, если да, то как?

Вот фрагмент кода, не уверенный, нужен он здесь или нет:

    ctrl.activities = [
  {
    "Completed": false,
    "Notes": "Pork loin strip steak andouille, kevin cow porchetta spare ribs rump. Leberkas capicola jerky cow. Shank pork loin bacon fatback boudin t-bone flank. Porchetta filet mignon brisket, pork loin boudin short loin burgdoggen chuck beef short ribs fatback ham chicken prosciutto biltong. Shoulder buffalo pork andouille, doner ground round sausage porchetta chicken beef ribs spare ribs. Prosciutto bresaola doner ham bacon drumstick ground round shankle kielbasa. 1"
  },
  {
    "Completed": false,
    "Notes": "followup future"
  },
  {
    "Completed": false,
    "Notes": "dac"
  },
  {
    "Completed": false,
    "Notes": "dac"
  },
  {
    "Completed": false,
    "Notes": "Spare ribs cupim turducken pastrami. Alcatra ground round venison jowl chuck meatball turducken hamburger shoulder fatback frankfurter tenderloin ham. Short ribs spare ribs pig flank, frankfurter turkey biltong pork chop hamburger alcatra ball tip. Turkey filet mignon cupim shankle sirloin kielbasa brisket pork fatback ham pig turducken jerky bacon."
  }
];

    el.tabulator({
        layout: 'fitColumns'
        , responsiveLayout: 'hide'
        , placeholder: 'No activities'
        , data: ctrl.activities
        , columns: [{{
                title: 'Notes'
                , field: 'Notes'
                , minWidth: 100
                , cellDblTap: notesClick
                , cellClick: notesClick
            }, {
                title: 'Toggle'
                , headerSort: false
                , field: 'Completed'
            }]

    function notesClick(e, cell) {
        $log.debug({type: 'tabulator cell click', e, cell});
        tabActivities.tabulator('deleteColumn', 'Notes');
        tabActivities.tabulator('addColumn', {
            title: 'Notes'
            , field: 'Notes'
            , formatter: 'textarea'
            , variableHeight: true
            , cellDblTap: expandedNotesClick
            , cellTap: expandedNotesClick
            , cellClick: expandedNotesClick
        }, true, 'Completed');
    }

    function expandedNotesClick(e, cell) {
        $log.debug({type: 'tabulator cell click', e, cell});
        tabActivities.tabulator('deleteColumn', 'Notes');
        tabActivities.tabulator('addColumn', {
            title: 'Notes'
            , field: 'Notes'
            , minWidth: 100
            , cellDblTap: notesClick
            , cellTap: notesClick
            , cellClick: notesClick
        }, true, 'Completed');
    }

Answer 1

Единственное различие между обычным форматером текста и форматером текстовой области, встроенным в табулятор, заключается в том, что форматировщик текстовой области устанавливает значение пробела css для предварительной переноса.

так что на самом деле вам вообще не нужно менять форматер, вам просто нужно переключить свойство пробелов в ячейках между pre-wrap и normal, а затем вызвать функцию normalizeHeight для компонента строки, чтобы сбросить высоту этой строки,

cellClick(e, cell){
    var el = cell.getElement();

    el.css("white-space",  el.css("white-space") === "pre-wrap" ? "normal" : "pre-wrap");
    cell.getRow().normalizeHeight();
}

---

Вот что я закончил с тем, что сделал свое дело:

    if(el.css('white-space') === 'pre-wrap') {
        el.css('white-space', 'nowrap');
        cell.getRow().reformat();
    } else {
        el.css('white-space', 'pre-wrap');
        cell.getRow().normalizeHeight();
    }