Checkbox is on the plus sign area

jtlivio

Hi, I have a Checkbox defined in my Datatable, the problem is, isn't in a new column, it's just beside the plus sign. So when I click the checkbox the row is expanded.

Does anyone know how to put the checkbox in a new column?
Thanks

var table = $('#example').DataTable({
      processing: true,
      responsive: true,
      //ajax: JSON.parse(this.state.tableItems),
      data: this.state.tableItems,
      columnDefs: [{
        "defaultContent": "-",
        "targets": "_all"
      }],
      columns: [

        {
          className: styles['details-control'],
          orderable: false,
          data: null,
          defaultContent: ''
        },
        {
          data: "PrtStatus",
          render: function (data, type, row) {
            if (type === 'display') {
              if (data == 1) {
                return '<input type="checkbox" checked>';
              } else {
                return '<input type="checkbox">';
              }
            }
            return data;
          },
          className: "dt-body-center"
        },
        { data: "ID" },
        { data: "Participant.Id" },
        { data: "CalculatedCertificateNumber" },
        { data: "Participant.FirstName" },
        { data: "Participant.LastName" },
        {
          data: "Date1", render: function (data, type, row) {
            if (type === "sort" || type === "type") {
              return data;
            }
            return moment(data).format("l");
          }
        },
        {
          data: "Validto", render: function (data, type, row) {
            if (type === "sort" || type === "type") {
              return data;
            }
            return moment(data).format("l");
          },
        },
        {
          data: "IsPrinted", render: function (IsPrinted, type, full, meta) {
            if (IsPrinted) {
              return 'Yes';
            } else {
              return 'No';
            }
          }
        },
        { data: "Level.Title" },
        // { data: "Workshop.eTestUniqueNumber"},
        // { data: "Workshop.Title"},
        // { data: "Discipline.Title"},
      ],
    });

colin

You would create an additional column for the Responsive + sign as shown in the example here. The key is to give that column the class dtr-control,

Colin

jtlivio

Hi @colin

Didn't work, same behavior, or I'm missing something?

var table = $('#example').DataTable({
      processing: true,
      responsive: true,
      //ajax: JSON.parse(this.state.tableItems),
      data: this.state.tableItems,
      // responsive: {
      //   details: {
      //       type: 'column'
      //   }
      //},
      columnDefs: [
        {
          "defaultContent": "-",
          "targets": "_all"
        },
        {
          className: 'dtr-control',
          orderable: false,
          targets: 0
        }
      ],
      order: [1, 'asc'],
      columns: [
        {
          className: styles['details-control'],
          orderable: false,
          data: null,
          defaultContent: ''
        },
        {
          data: "PrtStatus",
          render: function (data, type, row) {
            if (type === 'display') {
              if (data == 1) {
                return '<input type="checkbox" checked>';
              } else {
                return '<input type="checkbox">';
              }
            }
            return data;
          },
          className: "dt-body-center"
        },
        { data: "ID" },
        { data: "Participant.Id" },
        { data: "CalculatedCertificateNumber" },
        { data: "Participant.FirstName" },
        { data: "Participant.LastName" },
        {
          data: "Date1", render: function (data, type, row) {
            if (type === "sort" || type === "type") {
              return data;
            }
            return moment(data).format("l");
          }
        },
        {
          data: "Validto", render: function (data, type, row) {
            if (type === "sort" || type === "type") {
              return data;
            }
            return moment(data).format("l");
          },
        },
        {
          data: "IsPrinted", render: function (IsPrinted, type, full, meta) {
            if (IsPrinted) {
              return 'Yes';
            } else {
              return 'No';
            }
          }
        },
        { data: "Level.Title" },
        // { data: "Workshop.eTestUniqueNumber"},
        // { data: "Workshop.Title"},
        // { data: "Discipline.Title"},
      ],
    });

HTML

<table className="table table-striped table-bordered table-sm row-border hover mb-5" style={{ "width": "100%" }} cellPadding={0} id='example'>
                          <thead>
                            <tr>
                              <th className="none"></th>
                              <th></th>
                              <th></th>
                              <th>ID</th>
                              <th>PID</th>
                              <th>Certificate</th>
                              <th>First Name</th>
                              <th>Last Name</th>
                              <th>Date</th>
                              <th>Valid To</th>
                              <th>Printed</th>
                              <th>Level</th>
                              {/* <th className="none">Workshop Id</th>
                    <th className="none">Workshop Name</th>
                    <th className="none">Discipline</th> */}
                            </tr>
                          </thead>
                        </table>

kthorngren

The columns option applies to all columns in order. The details-control in line 25 is is being applied to column 0 not 1. Do something like this:

      columns: [
        {
          className: 'dtr-control',
          orderable: false,
        },
        {
          className: styles['details-control'],
          orderable: false,
          data: null,
          defaultContent: ''
        },
        {
...

Remove the columnDefs definition you have in lines 16-20.

Kevin