I am working with DataTables version 2.1.8 and have encountered a challenge.

brijesh_lakhani

I am working with DataTables version 2.1.8 and have encountered a challenge. After fetching data via an API and reloading the table, I want to utilize the table.columns.adjust() feature to ensure proper column adjustments. However, I’m unsure of the best way to implement this in the latest version.

Here’s what I’m trying to achieve:

Fetch data from an API and update the DataTable.
Automatically adjust the columns to fit the new data using table.columns.adjust().
Could you please guide me on the correct approach to achieve this in DataTables 2.1.8? Any examples or documentation links would be greatly appreciated.

Thank you in advance for your help!

allan

Assuming you are Ajax loading the data (ajax) then use:

table.ajax.reload( () => table.columns.adjust() );

If you aren't using Ajax and just loading the data using clear() and rows.add():

table.clear().rows.add(data).draw().columns.adjust();

Allan

brijesh_lakhani

  datatableSettings() {
    this.dtOptions = {
      scrollCollapse: true,
      pagingType: 'full_numbers',
      responsive: false,
      ordering: false,
      processing: true,
      pageLength: 10,
      paging: true,
      serverSide: true,
      searching: true,
      // scrollY: "100vh",
      fixedHeader: {
        header: true,
        footer: true,
        headerOffset: 55 ,
      },
      scrollX: true,
      fixedColumns: {
        leftColumns: 1,
        rightColumns: 1
      },
      language: {
        paginate: {
          first: 'First',
          previous: 'Previous',
          next: 'Next',
          last: 'Last'
        }
      },
      drawCallback: function (setting) {
        const totalPages = this.api().page.info().pages;
        if (totalPages <= 1) {
          document.querySelector('.dt-paging').classList.add('d-none');
        } else {
          document.querySelector('.dt-paging').classList.remove('d-none');
        }
      },
      ajax: (dataTablesParameters: any, callback) => {
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api<any>) => {
          this.datatableInstance = dtInstance;
          this.ajaxCallback = callback;
          const pageLength = dataTablesParameters.length;
          const pageNumber = (dataTablesParameters.start / pageLength);
          (this.datatableInstance as any).page.len(pageLength);
          const searchBox = $('div.dataTables_filter input');
          searchBox.off('keyup.DT input.DT');
          searchBox.on('keyup', () => {
            const search: any = searchBox.val();
            clearTimeout(this.searchDelay);
            this.searchDelay = setTimeout(() => {
              if (search != null) {
                (this.datatableInstance as any).search(search).draw();
              }
            }, 1000);
          });
          this.loadAllUsers(pageNumber, pageLength, dataTablesParameters.search.value);
        });
      },
      columns: [
        {data: null}, {data: null}, {data: null}, {data: null}, {data: null}, {data: null},
        {data: null}, {data: null}, {data: null}, {data: null}
      ]
    };
  }

load user function

  private loadAllUsers(page = 0, perPage = 10, search = '') {
    this.userStore.dispatch(UsersListPaginated({
      params: {
        options: JSON.stringify({include_client: true, includePagination: true}),
        page: page + 1,
        ...(this.selectedClient !== 'All' ? {client_id: this.selectedClient} : {}),
        perPage,
        search
      }
    }));


    this.userStore.pipe(select(getUsersPaginated))
      .pipe(takeUntil(this.unsubscriber))
      .subscribe((paginatedUsers: any) => {
          if (paginatedUsers) {
            this.users = paginatedUsers.list;
            if (this.ajaxCallback) {
              this.ajaxCallback({
                recordsTotal: paginatedUsers.paging.total,
                recordsFiltered: paginatedUsers.paging.total,
                data: []
              });
              setTimeout(() => {
                (this.datatableInstance as any).columns.adjust();
              }, 500);
            }
          }
        }
      );

I'm encountering an alignment issue between the column widths of the header and the body in the table. The header columns and body columns are not aligning properly, which affects the table's visual consistency and usability.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Could you try the nightly build of DataTables please? There is an error when using server-side processing and column alignment in 2.1.8.

Allan

brijesh_lakhani

I’m currently using DataTables v1 with Angular 18 and Bootstrap 5, and it’s working perfectly. However, I’m encountering challenges while migrating to DataTables v2. Could you recommend the best compatible version for Angular 18 and Bootstrap 5? Additionally, any examples or documentation to assist with the migration would be greatly appreciated

brijesh_lakhani

The nightbuild theme is not suitable for my project (need a light theme). Right now I tried to migrate Datatable V2.1.8 with Angular 18 and Bootstartp 5. Api is working fine here; the issue is that after the api response, the cloumn size is not adjustable properly and the fixed header and fixedcloumns extension is not working correctly.

allan

Upgrade notes for v2 are available here. I don't provide an official Angular integration for DataTables I'm afraid - I can't really help you on that front.

Perhaps if you link to a test case showing the issue I might be able to identify a problem.

Allan