TS ColumnDefs searchPanes not exists

TS ColumnDefs searchPanes not exists

kilo415kilo415 Posts: 15Questions: 3Answers: 1

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";

Answers

  • kilo415kilo415 Posts: 15Questions: 3Answers: 1

    And no filter by name :(

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • kilo415kilo415 Posts: 15Questions: 3Answers: 1

    Problem solved,thanks :smile:
    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;
        };
    }
    
Sign In or Register to comment.