Angular Datatable not being responsive for small screens

Question

I am using Angular 14 with the angular datatables package and trying to make the table responsive to smaller screens.

This is the table in desktop size - 3 columns

This is the table in smaller (mobile) size - just over 1 column shown (username and a little bit of email)

So I checked the documentation for responsive design and installed both the required packages

# JS file
npm install datatables.net-responsive --save
# CSS file
npm install datatables.net-responsive-dt --save

and added the responsive: true to my dtOptions

the table still looks fine in large screen, but in small screen it now looks like this with everything with a massive indent with column 1 shown. Column 2 is actually there but way over to the right where it needs scrolling for. And clicking the row actually shows column 3 but again over on the right under the where column 2 is. This solution cannot work anyway as I have a row click event to open a page, which supersedes the expansion of the row. (I had to comment out the row click to find out about the expansion).

This is my code:

Component:

this.dtOptions = {
  lengthChange:false,
  ajax: (dataTablesParameters: any, callback) => {
    this.userService.getUsers().subscribe(resp => {
        callback({
          data: resp
        });
      });
  },
  columns: [{
    title: 'Username',
    data: 'name'
  }, {
    title: 'Email',
    data: 'email'
  }, {
    title: 'Phone Number',
    data: 'phoneNumber'
  }],
  rowCallback: (row: Node, data: any[] | Object, index: number) => {
    $('td', row).on('click', () => {
      const temp = JSON.stringify(data);
      this.router.navigateByUrl(`/userdetails?user=${JSON.parse(temp).id}`);
    });
    return row;
  },
  responsive: true
};

Template:

<table datatable 
       [dtOptions]="dtOptions" 
       class="table table-striped table-hover" 
       style="cursor: pointer;">
</table>