Customize each search panes to use multi or single

naze

I want the user to be able to select multiple options in the first search pane, but only one options at a time in the second search pane.

This is a link to a test case:
https://vn4goh.sse.codesandbox.io/

naze

https://codesandbox.io/s/create-and-use-environment-variable-in-nextjs-forked-vn4goh?file=/components/table/myTable.js:928-956

colin

Yep, that's possible. The SearchPanes just use DataTables for each pane, so you can use the select.style to control the behaviour for each pane individually, something like this:

    columnDefs: [
      {
        targets: 2,
        searchPanes: {
          dtOpts: {
            select: {
              style: 'single'
            }
          }
        }
      }
    ]

Colin

naze

I see I can target the columns directly, what if the target is a custom search pane like the example in the sandbox?

allan

Still the same technique although you use the searchPanes.panes.dtOpts object in your custom pane.

Allan

naze

Hi Allan,
This is answering my question, but I am not sure why it is not working in practice. When I give different select configuration, the table grabs the select: single configuration and not the multi. You can look at the example posted. I defined the columns in columns.js that is being used in the panes. and the other options are in options variable.

allan

Is there a way I can view and edit the source code in that example? I get the page (although oddly it doesn't render at all in Firefox), but the code is all compressed and not easy to read.

Thanks,
Allan

naze

You should be able to. Maybe another browser might work, either safari or chrome.
The columns are defined in the columns.js file

export const columns = [
  {
    // column 0
    title: "Post ID",
    data: "postId",
    targets: [0],
    sort: true,
    className: "id",
    visible: true,
    render(data, type, full, meta) {
      return data;
    }
  },
  {
    // column 1
    title: "ID",
    data: "id",
    targets: [1],
    sort: true,
    className: "published",
    visible: true,
    render(data, type, full, meta) {
      return data;
    }
  },
  {
    // column 2
    title: "Name",
    data: "name",
    targets: [2],
    sort: true,
    className: "name",
    visible: true,
    render(data, type, full, meta) {
      return data;
    }
  },
  {
    // column 3
    title: "Email",
    data: "email",
    targets: [3],
    sort: true,
    className: "email",
    visible: true,
    render(data, type, full, meta) {
      return data;
    }
  },
  {
    // column 4
    title: "Comment",
    data: "body",
    targets: [4],
    sort: true,
    className: "body",
    visible: true,
    render(data, type, full, meta) {
      return data;
    }
  }
];

export const panes = [
  {
    header: "Filter By Date",
    options: [
      {
        label: "filter by ID",
        value: function (rowData, rowIdx) {
          return rowData.id > 50;
        }
      },
      {
        label: "filter by post ID",
        value: function (rowData, rowIdx) {
          return rowData.postId < 4;
        }
      },
      {
        label: "filter by post ID",
        value: function (rowData, rowIdx) {
          return rowData.postId < 100;
        }
      }
    ],
    dtOpts: {
      select: {
        style: "multi"
        // toggleable: true
      },
      // scrollY: 265,
      scrollCollapse: true,
      order: false
    }
  },
  {
    header: "2nd filter",
    options: [
      {
        label: "filter by ID",
        value: function (rowData, rowIdx) {
          return rowData.id > 100;
        }
      },
      {
        label: "filter by post ID",
        value: function (rowData, rowIdx) {
          return rowData.postId < 50;
        }
      }
    ],
    dtOpts: {
      select: {
        style: "single"
        // toggleable: true
      },
      // scrollY: 265,
      scrollCollapse: true,
      order: false
    }
  }
];

then the configurations are used inside the table component:

export default function Table({ columns, data, panes }) {
  useEffect(() => {
    $(window).on("load", function () {
      let table = $.fn.dataTable.Buttons.jszip(JSZip);
      $("#example").DataTable({
        dom: "PBlfrtip",
        data: data,
        columns: columns,
        searchPanes: {
          panes: panes,
          controls: false,
          orderable: false
        }
      });
    });
  }, []);

  return (
    <div>
      <table
        id="example"
        className="table table-striped table-bordered"
      ></table>
    </div>
  );
}

naze

Are you able to see the source code in this link: https://codesandbox.io/s/create-and-use-environment-variable-in-nextjs-forked-vn4goh?file=/components/table/myTable.js:928-956

allan

I've got it this time - thanks. I've committed a fix for this error and it will be in the nightly soon. If you could let me know how you get on with it, that would be really useful.

Allan

naze

When will it be released? and when will be added to the actual library?

allan

Its in the library now and you can use it via the nightly builds. I'll be issuing a release probably the week of the 11th June. It might happen next week if I get a bit of a gap to do it. It is currently the only change from 2.0.2.

Allan