function createDataTable()

in src/Explorer/Tables/DataTable/DataTableBindingManager.ts [67:161]
81 lines of code
8 McCabe index (conditional complexity)

function createDataTable(
  startIndex: number,
  tableEntityListViewModel: TableEntityListViewModel,
  queryTablesTab: QueryTablesTab,
  destroy: boolean = false,
  columnsFilter: boolean[] = null,
): void {
  var $dataTable = tableEntityListViewModelMap[queryTablesTab.tabId].$dataTable;
  if (destroy) {
    // Find currently displayed columns.
    var currentColumns: string[] = tableEntityListViewModel.headers;

    // Calculate how many more columns need to added to the current table.
    var columnsToAdd: number = _.difference(tableEntityListViewModel.headers, currentColumns).length;

    // This is needed as current solution of adding column is more like a workaround
    // The official support for dynamically add column is not yet there
    // Please track github issue https://github.com/DataTables/DataTables/issues/273 for its offical support
    for (var i = 0; i < columnsToAdd; i++) {
      $(".dataTables_scrollHead table thead tr th").eq(0).after("<th></th>");
    }
    tableEntityListViewModel.table.destroy();
    $dataTable.empty();
  }

  var jsonColTable = [];

  for (var i = 0; i < tableEntityListViewModel.headers.length; i++) {
    jsonColTable.push({
      sTitle: tableEntityListViewModel.headers[i],
      data: tableEntityListViewModel.headers[i],
      aTargets: [i],
      mRender: bindColumn,
      visible: !!columnsFilter ? columnsFilter[i] : true,
    });
  }

  tableEntityListViewModel.table = DataTableBuilder.createDataTable($dataTable, <DataTable.Config>{
    // WARNING!!! SECURITY: If you add new columns, make sure you encode them if they are user strings from Azure (see encodeText)
    // so that they don't get interpreted as HTML in our page.
    colReorder: true,
    aoColumnDefs: jsonColTable,
    stateSave: false,
    dom: "RZlfrtip",
    oColReorder: {
      iFixedColumns: 1,
    },
    displayStart: startIndex,
    bPaginate: true,
    pagingType: "full_numbers",
    bProcessing: true,
    oLanguage: {
      sInfo: "Results _START_ - _END_ of _TOTAL_",
      oPaginate: {
        sFirst: "<<",
        sNext: ">",
        sPrevious: "<",
        sLast: ">>",
      },
      sProcessing: `<img style="width: 28px; height: 6px; " src="${loadingIndicator3Squares}">`,
      oAria: {
        sSortAscending: "",
        sSortDescending: "",
      },
    },
    destroy: destroy,
    bInfo: true,
    bLength: false,
    bLengthChange: false,
    scrollX: true,
    scrollCollapse: true,
    iDisplayLength: 100,
    serverSide: true,
    ajax: queryTablesTab.tabId, // Using this settings to make sure for getServerData we update the table based on the appropriate tab
    fnServerData: getServerData,
    fnRowCallback: bindClientId,
    fnInitComplete: initializeTable,
    fnDrawCallback: updateSelectionStatus,
  });

  (tableEntityListViewModel.table.table(0).container() as Element)
    .querySelectorAll(Constants.htmlSelectors.dataTableHeaderTableSelector)
    .forEach((table) => {
      table.setAttribute(
        "summary",
        `Header for sorting results for container ${tableEntityListViewModel.queryTablesTab.collection.id()}`,
      );
    });

  (tableEntityListViewModel.table.table(0).container() as Element)
    .querySelectorAll(Constants.htmlSelectors.dataTableBodyTableSelector)
    .forEach((table) => {
      table.setAttribute("summary", `Results for container ${tableEntityListViewModel.queryTablesTab.collection.id()}`);
    });
}