I'm trying to add a table in my Angular app from Angular Material@17.2.1 (as shown here).
I copy / pasted the code from the Angular Material official documentation but I still get the error:

Can't bind to 'dataSource' since it isn't a known property of 'table'

I tried the following:
Replacing table tag with mat-table, resulting in

mat-table is not a known element

Deleting the brackets in [dataSource]="dataSource" as dataSource="dataSource", resulting in (Webdeveloper console error this time, this could be the solution but I don't know how to fix it even after some searches)

Can't bind to 'matHeaderRowDef' since it isn't a known property of 'tr' (used in the '_UsersComponent' component template).

importing MatTableModule from '@angular/material' instead of '@angular/material/table' in app.module.ts, resulting in

@angular/material has no expôrted member MatTableModule

Add import {CdkTableModule} from '@angular/cdk/table'; and importing it, changing nothing.
The MatTableModule is declared and imported in app.module.ts, where the UsersComponent using it is also declared and imported.
Here are all versions used in the project:
@angular-devkit/architect       0.1702.2
@angular-devkit/build-angular   17.2.2
@angular-devkit/core            17.2.2
@angular-devkit/schematics      17.2.2
@angular/cdk                    17.2.1
@angular/cli                    17.2.2
@angular/material               17.2.1
@schematics/angular             17.2.2
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.4
Here is my app.module.ts file's content:
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';

import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';

import { AppComponent } from './app.component';
import { TopbarComponent } from './topbar/topbar.component';
import { LeftmenuComponent } from './leftmenu/leftmenu.component';
import { NavleftbarComponent } from './navleftbar/navleftbar.component';

import { MatIconModule } from '@angular/material/icon';
import {MatTableModule} from '@angular/material/table';
import { MatButtonModule } from '@angular/material/button';
import {CdkTableModule} from '@angular/cdk/table';

import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { UsersComponent } from './users/users.component';

@NgModule({
  declarations: [
    AppComponent,
    TopbarComponent,
    LeftmenuComponent,
    NavleftbarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,
    MatButtonModule,
    MatIconModule,
    MatTableModule,
    UsersComponent,
    CdkTableModule
  ],
  providers: [
    provideAnimationsAsync()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here's the users.component.ts's file content:
import { Component } from '@angular/core';
import { MatTableModule } from '@angular/material/table';

export interface UserElement {
  firstname: string;
  lastName: string;
  email: string;
  microsoftEmail: string;
  class: string;
}

const ELEMENT_DATA: UserElement[] = [{
  firstname: "Pierrick",
  lastName: "MARTELLIERE",
  email: "p.martelliere@gmail.com",
  microsoftEmail: "pierrick@coxidev.com",
  class: "GPME24"
}];

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrl: './users.component.css',
  standalone: true,
})

export class UsersComponent {
  displayedColumns: string[] = ['firstName', 'lastName', 'email', 'microsoftEmail', 'class'];
  dataSource = ELEMENT_DATA;
  clickedRows = new Set<UserElement>();
}

And the users.component.html:
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
  <ng-container matColumnDef="firstName">
    <th mat-header-cell *matHeaderCellDef> Prénom </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <ng-container matColumnDef="lastName">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef> Email </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <ng-container matColumnDef="microsoftEmail">
    <th mat-header-cell *matHeaderCellDef> Compte Microsoft </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <ng-container matColumnDef="class">
    <th mat-header-cell *matHeaderCellDef> Classe </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>



<!-- Copyright 2024 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at https://angular.io/license -->

I really don't see what I am missing, some help would be welcome.