TS ColumnDefs searchPanes not exists

kilo415

TS: columnDefs: [ { .. searchPanes} <- not exists field ] (
How use searchPanes in columnDefs with TS ? Please help me

        const table_skill = new DataTable(refTable?.current,
            {
                responsive: true,
                data: skills,
                columns: [
                    {
                        data: "id",
                    },
                    {
                        data: "name",
                        render: function (data: unknown, type: string)
                        {
                            if (type !== "display")
                                return data;

                            // return `<a href="skill?skill=${ data }"\
                            //     > ` + data + `</ > `;
                            return "<a href='#!''>" + data + "</a >";
                        },
                        

                    },
                    {
                        data: "description",
                        render: function (data: unknown, type: string)
                        {
                            if (type !== "display")
                                return data;
                            return "<p\
                            style='text-overflow: ellipsis;    white-space: nowrap;     overflow: hidden;     width: 400px;'\
                            > " + data + "</p > ";
                        },
                    },
                    { data: "minLevel" },
                    { data: "maxLevel" }
                ],
                searchPanes:
                {
                    viewCount: true,
                    collapse: true,
                    initCollapsed: true,
                    layout: "columns-2",

                },
                columnDefs: [
                    {
                        searchable: true,
                        className: css.highlight_standart,
                        targets: [1, 4],

                    },
                    {
                        searchable: false,
                        targets: [0, 2, 3]
                    }
                ],
                layout: {
                    topStart: "pageLength",
                    topEnd: "search",
                    bottomStart: "info",
                    bottomEnd: "paging",

                },
                deferRender: false,
                dom: "P<\"d-flex justify-content-between wrap mb-2\"lf>rt<\"d-flex justify-content-between wrap mt-2\"ip>",
                scrollY: "400px",

            });

  <link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css" />
  <!-- Addtional for datatables.net -->
  <link rel="stylesheet" href="https://cdn.datatables.net/searchpanes/2.3.0/css/searchPanes.dataTables.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/select/2.0.0/css/select.dataTables.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/responsive/3.0.0/css/responsive.bootstrap.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/responsive/3.0.0/css/responsive.dataTables.min.css">

import DataTable from "datatables.net";
import "datatables.net-searchpanes";
import "datatables.net-select";

kilo415

And no filter by name

allan

I don't see searchPanes in your column definitions there, but you could potentially add "as any" after the object until the issue can be resolved properly.

It would be really useful if you could create a test case showing the issue of Stackblitz or a minimal Git repo.

Allan

kilo415

Problem solved,thanks
You need to create your own interface, which will contain all the necessary properties with the same types, for example, I solved it like this:

interface IColumnsDatatables
{
    data: string,
    searchable?: boolean,
    className?: string,
    render?: (data: string,type: string) => unknown,
    searchPanes?:
    {
        show: boolean;
    };
}