When using custom HTML templates or toolbars in Layui Table, the default text overflow and ellipsis hiding feature does not apply to those cells. The native table cell overflow handling only works for plain text or built-in Layui components.

How Layui Handles Overflow

1. The cell's text content is set to white-space: nowrap to prevent line wrapping.
2. A script calculates if the scroll width exceeds the container width. If so, it dynamically appends a dropdown icon element: <div class="layui-table-grid-down" lay-event="more"><i class="layui-icon layui-icon-down"></i></div>.
3. An event listener is attahced to this button to trigger the display of the full content.

Key Events and Methods

Cell Tool Event

Bind to clicks or double-clicks on elements with a lay-event attribute within a table cell.

table.on('tool(filterName)', function(obj) {
  const rowData = obj.data;
  const eventType = obj.event;
  const cellElement = obj.tr;
  // Execute logic based on eventType
});

Layer Tips Popup

Use layer.tips() to create a transient popup that displays additinoal content.

layer.tips('Popup Content', '#targetElement', {
  tips: 1, // Position: 1 (top), 2 (right), 3 (bottom), 4 (left)
  time: 3000 // Auto-close after 3 seconds
});

Implemantation Example

Define a table column that uses a custom toolbar template.

cols: [[
  { title: 'Keywords', field: 'keywords', toolbar: '#keywordTemplate' }
]]

After the table renders, iterate through the target column's cells. Append a dropdown button if the content height exceeds the container.

done: function() {
  const selector = '#myTable .layui-table-body [data-field="keywords"] .cell-content';
  $(selector).each(function() {
    if ($(this).outerHeight() > $(this).parent().outerHeight()) {
      $(this).after('<div class="layui-table-grid-down" lay-event="showMore"><i class="layui-icon layui-icon-down"></i></div>');
    }
  });
}

Handle the click event on the dropdown button to display the full content in a popup.

table.on('tool(myTable)', function(obj) {
  if (obj.event === 'showMore') {
    const keywordList = obj.data.keywords.split(',');
    let popupHtml = '<ul style="display: flex; flex-wrap: wrap;">';
    keywordList.forEach(function(word) {
      popupHtml += `<li style="margin: 2px; padding: 5px 10px; background: #f0f0f0; border-radius: 3px;">${word}</li>`;
    });
    popupHtml += '</ul><i class="layui-icon layui-icon-close close-popup"></i>';

    const tipInstance = layer.tips(popupHtml, this, {
      tips: [2, '#fff'],
      time: 0,
      area: ['auto', 'auto']
    });

    $(document).on('click', '.close-popup', function() {
      layer.close(tipInstance);
    });
  }
});

Supporting CSS Styles

Limit the cell height and control the visibility of the dropdown button.

#myTable .layui-table-cell {
  max-height: 80px;
  overflow: hidden;
}

#myTable .layui-table-body [data-field="keywords"] .layui-table-grid-down {
  display: none;
}

#myTable .layui-table-body .layui-table-hover [data-field="keywords"] .layui-table-grid-down {
  display: block;
}