Customize each search panes to use multi or single

Customize each search panes to use multi or single

nazenaze Posts: 18Questions: 4Answers: 0

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/

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • nazenaze Posts: 18Questions: 4Answers: 0

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

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Answer ✓

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

    Allan

  • nazenaze Posts: 18Questions: 4Answers: 0
    edited June 2022

    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.

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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

  • nazenaze Posts: 18Questions: 4Answers: 0

    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>
      );
    }
    
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Answer ✓

    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

  • nazenaze Posts: 18Questions: 4Answers: 0

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

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Answer ✓

    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

Sign In or Register to comment.