DataTables / DataTablesSrc

DataTables source repository
https://datatables.net
MIT License
587 stars 422 forks source link

Feature request: support showing / hiding nested row detail columns. #219

Closed JoshuaRobertson closed 1 year ago

JoshuaRobertson commented 1 year ago

Hi :wave:

I'm using the latest version of the library and have just added the Show / hide columns dynamically feature to my table.

My table utilises Row details where I can expand a row.

I'd like a feature whereby when hiding columns it also hides the row detail columns too, right now I see that childRows of the table.state() after opening a row is giving me an undefined error.

function visuallyHideColumns () {
    console.log(table.state())

    for (const [index, column] of table.state().columns.entries()) {
      if (!document.querySelector(`[data-column="${index}"]`)) {
        continue
      }

      document.querySelector(`[data-column="${index}"]`).style.opacity = 1

      if (column.visible) {
        continue
      }

      document.querySelector(`[data-column="${index}"]`).style.opacity = .2
    }
  }

  var table = $('#commissions-table').DataTable({
    stateSave: true,
    paging: false,
    info: false,
    searching: false,
    data: report.report.commission.users,
    createdRow: function (row, data, dataIndex) {
      $(row).addClass('js__highlight-row table-light');
    }
  }

  visuallyHideColumns()

  $('a.toggle-vis').on('click', function (e) {
    e.preventDefault();

    // get the column API object
    const column = table.column($(this).attr('data-column'));

    // toggle the visibility
    column.visible(!column.visible());
    visuallyHideColumns()
  });

I was thinking that this potential feature could work with nested rows, is this currently supported or only supported for non-nested rows as the example doesn't seem to have any other examples?

AllanJard commented 1 year ago

You mean if you hide a column, then it should be hidden in the child row as well? Because DataTables doesn't controller the content of the child row, that would be up to whatever rendering function you are using to create the content of the child row. You can use [column().visible()](https://datatables.net/reference/api/column().visible()) in your function to determine if the column is hidden or not.

JoshuaRobertson commented 1 year ago

@AllanJard yes that's correct, I'd like to hide the child row if the parent is hidden. Thanks for the suggestion, I'll look at using column().visible().