Заголовок с данными и тело не выровнены

Question

Я создал таблицу данных с использованием jquery datatable в проекте Angular 6.В моем случае столбцы могут переключаться пользователем с помощью формы во всплывающем окне.

Ниже приведено всплывающее окно:

Когда пользователь выбирает / отменяет выбор соответствующих заголовков столбцов и сохраняет их, я делаю следующие шаги;

1. Отфильтруйте массив, чтобы получить только заголовки, которые должны быть показаны
2. Уничтожьте данные, используя

$(".data-table").DataTable().destroy();

3.Повторно инициализируйте данные, используя:

var table = $(".data-table").DataTable({
    dom:
      "<'row'<'#tblnoitfy'>><'row'<'col-sm-4'l><'col-sm-8'p>>" +
      "<'row'<'col-sm-12'tr>>",
    fixedHeader: {
      header: true,
      footer: true
    },
    scrollY: "calc(100vh - 154px)",
    paging: false,
    scrollX: true,
    scrollCollapse: true,
    searching: false,
    bDestroy: true,
    bAutoWidth: true,
    bDeferRender: true,
    info: false,
    aaSorting: [],
    language: {
      emptyTable: " "
    }
  });

  $(".dataTables_empty").append(this.noDataHtml());
});

После того, как я это сделаю, все мои заголовки и их данные будут смещены.Эффект виден, когда мы прокручиваем таблицу данных по горизонтали.

Как я могу решить эту проблему.!