javascripticonstabular

Tabulator lucide icon change for tree structure not working

This code is not working in tabulator structure tree icon changing via data-lucide icon. The 'dataTreeCollapseElement' and 'dataTreeExpandElement' icon change didn't work for expanding the column. No javascript error shown.There is no change when I try to click on the icon.enter image description here

    let tableContent = new Tabulator("#interviewTableId", {
        dataTree:true,
        dataTreeCollapseElement:"<i data-lucide='minus' class='w-4 h-4'></i>",
        dataTreeExpandElement:"<i  data-lucide='plus' class='w-4 h-4'></i>",
        ajaxURL: route("interviewlist.list"),
        ajaxParams: { querystr: querystr, status: status },
        ajaxFiltering: true,
        ajaxSorting: true,
        printAsHtml: true,
        printStyled: true,
        pagination: "remote",
        paginationSize: 10,
        paginationSizeSelector: [5, 10, 20, 30, 40],
        layout: "fitColumns",
        responsiveLayout: "collapse",
        placeholder: "No matching records found",
        columns: [
            {
                title: "",
                width: "180",
            },
            {
                title: "#ID",
                field: "id",
                width: "180",
            },
            {
                title: "Task Name",
                field: "taskname",
                headerHozAlign: "left",
            },
            {
                title: "Applicant Name",
                field: "applicant_id",
                headerHozAlign: "left",
            },
        ],
        renderComplete() {
            createIcons({
                icons,
                "stroke-width": 1.5,
                nameAttr: "data-lucide",
            });
        },
    });
Solution

  • Since Lucide icons are created after the Tabulator table is rendered, the click event listeners on the <i> elements set in dataTreeCollapseElement and dataTreeExpandElement get removed when converted to <svg> by Lucide. So I suggest you use the createElement method of Lucide to create the icons first and then assign them to Tabulator. Here is an example:

    const tableDataNested = [
  {
    name: 'Oli Bob',
    location: 'United Kingdom',
    gender: 'male',
    col: 'red',
    dob: '14/04/1984',
    _children: [
      { name: 'Mary May', location: 'Germany', gender: 'female', col: 'blue', dob: '14/05/1982' },
      { name: 'Christine Lobowski', location: 'France', gender: 'female', col: 'green', dob: '22/05/1982' },
      {
        name: 'Brendon Philips',
        location: 'USA',
        gender: 'male',
        col: 'orange',
        dob: '01/08/1980',
        _children: [
          { name: 'Margret Marmajuke', location: 'Canada', gender: 'female', col: 'yellow', dob: '31/01/1999' },
          { name: 'Frank Harbours', location: 'Russia', gender: 'male', col: 'red', dob: '12/05/1966' }
        ]
      }
    ]
  },
  { name: 'Jamie Newhart', location: 'India', gender: 'male', col: 'green', dob: '14/05/1985' },
  { name: 'Gemma Jane', location: 'China', gender: 'female', col: 'red', dob: '22/05/1982', _children: [{ name: 'Emily Sykes', location: 'South Korea', gender: 'female', col: 'maroon', dob: '11/11/1970' }] },
  { name: 'James Newman', location: 'Japan', gender: 'male', col: 'red', dob: '22/03/1998' }
]

const minusIcon = lucide.createElement(lucide.Minus)
minusIcon.setAttribute('stroke-width', '1.5')

const plusIcon = lucide.createElement(lucide.Plus)
plusIcon.setAttribute('stroke-width', '1.5')

const table = new Tabulator('#table', {
  height: '311px',
  data: tableDataNested,
  dataTree: true,
  dataTreeCollapseElement: minusIcon,
  dataTreeExpandElement: plusIcon,
  columns: [
    { title: 'Name', field: 'name', width: 200 },
    { title: 'Location', field: 'location', width: 150 },
    { title: 'Gender', field: 'gender', width: 150, responsive: 2 },
    { title: 'Favourite Color', field: 'col', width: 150 },
    { title: 'Date Of Birth', field: 'dob', hozAlign: 'center', sorter: 'date', width: 150 }
  ]
})
    <link href="https://unpkg.com/tabulator-tables@5.5.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.0/dist/js/tabulator.min.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>

<div id="table"></div>

    And in case you are working with ESM, here is an example on CodeSandbox: https://codesandbox.io/s/tabulator-forked-qksmpu?file=/src/index.js