Datatables: adding individual column search inputs

Question

I have a project using pure JS simple-datatables instead of jQuery DataTables, with datatables initialized like this:

  const datatables = select('.datatable', true)
  datatables.forEach(datatable => {
    new simpleDatatables.DataTable(datatable, {
      perPageSelect: [10, 25, 50, 100, ["All", -1]],
      columns: [{
          select: 2,
          sortSequence: ["desc", "asc"]
        },
        {
          select: 3,
          sortSequence: ["desc"]
        },
        {
          select: 4,
          cellClass: "green",
          headerClass: "red"
        }
      ]
    });
  })

How can I add search inputs to individual columns? I've looked into the documentation and tried the examples there, but none of these works with the code above: https://datatables.net/examples/api/multi_filter.html

Answer 1

The simple-datatables API is different from the DataTables API, so some examples from DataTables could not work as it in simple-datatables.

However, the feature exists in simple-datatables as well.

This code should work.

  const datatables = select('.datatable', true)
  datatables.forEach(datatable => {
    new simpleDatatables.DataTable(datatable, {
        perPageSelect: [10, 25, 50, 100, ["All", -1]],
        columns: [{
          select: 2,
          sortSequence: ["desc", "asc"]
        },
        {
          select: 3,
          sortSequence: ["desc"]
        },
        {
          select: 4,
          cellClass: "green",
          headerClass: "red"
        }
        ],
        tableRender: (_data, table, type) => {
            if (type === "print") {
                return table
            }
            const tHead = table.childNodes[0]
            const filterHeaders = {
                nodeName: "TR",
                childNodes: tHead.childNodes[0].childNodes.map(
                    (_th, index) => ({nodeName: "TH",
                        childNodes: [
                            {
                                nodeName: "INPUT",
                                attributes: {
                                    class: "datatable-input",
                                    type: "search",
                                    "data-columns": `[${index}]`
                                }
                            }
                        ]})
                )
            }
            tHead.childNodes.push(filterHeaders)
            return table
        }
    });
  })