diff --git a/projects/neuroglia/angular-ngrx-component-store-odata-table/src/lib/odata-table.store.spec.ts b/projects/neuroglia/angular-ngrx-component-store-odata-table/src/lib/odata-table.store.spec.ts
index 72ede78..e1c61cf 100644
--- a/projects/neuroglia/angular-ngrx-component-store-odata-table/src/lib/odata-table.store.spec.ts
+++ b/projects/neuroglia/angular-ngrx-component-store-odata-table/src/lib/odata-table.store.spec.ts
@@ -17,743 +17,20 @@ const config: ODataTableConfig = {
   columnDefinitions: [],
 };
 
-const expectedMetadata: Metadata = {
-  $Version: '4.0',
-  $EntityContainer: 'Default.Container',
-  'BlazorWasm7Mssql.Models.Sample': {
-    Order: {
-      $Kind: 'EntityType',
-      $Key: ['Id'],
-      Id: {
-        $Type: 'Edm.Int32',
-      },
-      UserName: {
-        $Nullable: true,
-      },
-      OrderDate: {
-        $Type: 'Edm.DateTimeOffset',
-        $Precision: 0,
-      },
-      OrderDetails: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Sample.OrderDetail',
-      },
-    },
-    OrderDetail: {
-      $Kind: 'EntityType',
-      $Key: ['Id'],
-      Id: {
-        $Type: 'Edm.Int32',
-      },
-      Quantity: {
-        $Type: 'Edm.Int32',
-      },
-      OrderId: {
-        $Type: 'Edm.Int32',
-        $Nullable: true,
-      },
-      ProductId: {
-        $Type: 'Edm.Int32',
-        $Nullable: true,
-      },
-      Order: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Sample.Order',
-        $ReferentialConstraint: {
-          OrderId: 'Id',
-        },
-      },
-      Product: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Sample.Product',
-        $ReferentialConstraint: {
-          ProductId: 'Id',
-        },
-      },
-    },
-    Product: {
-      $Kind: 'EntityType',
-      $Key: ['Id'],
-      Id: {
-        $Type: 'Edm.Int32',
-      },
-      ProductName: {
-        $Nullable: true,
-      },
-      ProductPrice: {
-        $Type: 'Edm.Decimal',
-      },
-      ProductPicture: {
-        $Nullable: true,
-      },
-      OrderDetails: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Sample.OrderDetail',
-      },
-    },
-  },
-  'BlazorWasm7Mssql.Models.Northwind': {
-    Category: {
-      $Kind: 'EntityType',
-      $Key: ['CategoryID'],
-      CategoryID: {
-        $Type: 'Edm.Int32',
-      },
-      CategoryName: {
-        $Nullable: true,
-      },
-      Description: {
-        $Nullable: true,
-      },
-      Picture: {
-        $Nullable: true,
-      },
-      NorthwindProducts: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindProduct',
-      },
-    },
-    Customer: {
-      $Kind: 'EntityType',
-      $Key: ['CustomerID'],
-      CustomerID: {},
-      CompanyName: {
-        $Nullable: true,
-      },
-      ContactName: {
-        $Nullable: true,
-      },
-      ContactTitle: {
-        $Nullable: true,
-      },
-      Address: {
-        $Nullable: true,
-      },
-      City: {
-        $Nullable: true,
-      },
-      Region: {
-        $Nullable: true,
-      },
-      PostalCode: {
-        $Nullable: true,
-      },
-      Country: {
-        $Nullable: true,
-      },
-      Phone: {
-        $Nullable: true,
-      },
-      Fax: {
-        $Nullable: true,
-      },
-      CustomerCustomerDemos: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.CustomerCustomerDemo',
-      },
-      NorthwindOrders: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrder',
-      },
-    },
-    CustomerCustomerDemo: {
-      $Kind: 'EntityType',
-      $Key: ['CustomerID', 'CustomerTypeID'],
-      CustomerID: {
-        $Nullable: true,
-      },
-      CustomerTypeID: {},
-      Customer: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Customer',
-        $ReferentialConstraint: {
-          CustomerID: 'CustomerID',
-        },
-      },
-      CustomerDemographic: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.CustomerDemographic',
-      },
-    },
-    CustomerDemographic: {
-      $Kind: 'EntityType',
-      $Key: ['CustomerTypeID'],
-      CustomerTypeID: {},
-      CustomerDesc: {
-        $Nullable: true,
-      },
-      CustomerCustomerDemos: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.CustomerCustomerDemo',
-      },
-    },
-    Employee: {
-      $Kind: 'EntityType',
-      $Key: ['EmployeeID'],
-      EmployeeID: {
-        $Type: 'Edm.Int32',
-        $Nullable: true,
-      },
-      LastName: {
-        $Nullable: true,
-      },
-      FirstName: {
-        $Nullable: true,
-      },
-      Title: {
-        $Nullable: true,
-      },
-      TitleOfCourtesy: {
-        $Nullable: true,
-      },
-      BirthDate: {
-        $Type: 'Edm.DateTimeOffset',
-        $Nullable: true,
-        $Precision: 0,
-      },
-      HireDate: {
-        $Type: 'Edm.DateTimeOffset',
-        $Nullable: true,
-        $Precision: 0,
-      },
-      Address: {
-        $Nullable: true,
-      },
-      City: {
-        $Nullable: true,
-      },
-      Region: {
-        $Nullable: true,
-      },
-      PostalCode: {
-        $Nullable: true,
-      },
-      Country: {
-        $Nullable: true,
-      },
-      HomePhone: {
-        $Nullable: true,
-      },
-      Extension: {
-        $Nullable: true,
-      },
-      Photo: {
-        $Nullable: true,
-      },
-      Notes: {
-        $Nullable: true,
-      },
-      ReportsTo: {
-        $Type: 'Edm.Int32',
-        $Nullable: true,
-      },
-      PhotoPath: {
-        $Nullable: true,
-      },
-      Employees1: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Employee',
-      },
-      EmployeeTerritories: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.EmployeeTerritory',
-      },
-      NorthwindOrders: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrder',
-      },
-      Employee1: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Employee',
-        $ReferentialConstraint: {
-          EmployeeID: 'EmployeeID',
-        },
-      },
-    },
-    EmployeeTerritory: {
-      $Kind: 'EntityType',
-      $Key: ['EmployeeID', 'TerritoryID'],
-      EmployeeID: {
-        $Type: 'Edm.Int32',
-        $Nullable: true,
-      },
-      TerritoryID: {
-        $Nullable: true,
-      },
-      Employee: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Employee',
-        $ReferentialConstraint: {
-          EmployeeID: 'EmployeeID',
-        },
-      },
-      Territory: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Territory',
-        $ReferentialConstraint: {
-          TerritoryID: 'TerritoryID',
-        },
-      },
-    },
-    NorthwindOrder: {
-      $Kind: 'EntityType',
-      $Key: ['OrderID'],
-      OrderID: {
-        $Type: 'Edm.Int32',
-      },
-      CustomerID: {
-        $Nullable: true,
-      },
-      EmployeeID: {
-        $Type: 'Edm.Int32',
-        $Nullable: true,
-      },
-      OrderDate: {
-        $Type: 'Edm.DateTimeOffset',
-        $Nullable: true,
-        $Precision: 0,
-      },
-      RequiredDate: {
-        $Type: 'Edm.DateTimeOffset',
-        $Nullable: true,
-        $Precision: 0,
-      },
-      ShippedDate: {
-        $Type: 'Edm.DateTimeOffset',
-        $Nullable: true,
-        $Precision: 0,
-      },
-      ShipVia: {
-        $Type: 'Edm.Int32',
-        $Nullable: true,
-      },
-      Freight: {
-        $Type: 'Edm.Decimal',
-        $Nullable: true,
-      },
-      ShipName: {
-        $Nullable: true,
-      },
-      ShipAddress: {
-        $Nullable: true,
-      },
-      ShipCity: {
-        $Nullable: true,
-      },
-      ShipRegion: {
-        $Nullable: true,
-      },
-      ShipPostalCode: {
-        $Nullable: true,
-      },
-      ShipCountry: {
-        $Nullable: true,
-      },
-      NorthwindOrderDetails: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrderDetail',
-      },
-      Customer: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Customer',
-        $ReferentialConstraint: {
-          CustomerID: 'CustomerID',
-        },
-      },
-      Employee: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Employee',
-        $ReferentialConstraint: {
-          EmployeeID: 'EmployeeID',
-        },
-      },
-      Shipper: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Shipper',
-      },
-    },
-    NorthwindOrderDetail: {
-      $Kind: 'EntityType',
-      $Key: ['OrderID', 'ProductID'],
-      OrderID: {
-        $Type: 'Edm.Int32',
-      },
-      ProductID: {
-        $Type: 'Edm.Int32',
-      },
-      UnitPrice: {
-        $Type: 'Edm.Double',
-      },
-      Quantity: {
-        $Type: 'Edm.Int16',
-      },
-      Discount: {
-        $Type: 'Edm.Single',
-      },
-      NorthwindOrder: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrder',
-      },
-      NorthwindProduct: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindProduct',
-      },
-    },
-    NorthwindProduct: {
-      $Kind: 'EntityType',
-      $Key: ['ProductID'],
-      ProductID: {
-        $Type: 'Edm.Int32',
-      },
-      ProductName: {
-        $Nullable: true,
-      },
-      SupplierID: {
-        $Type: 'Edm.Int32',
-        $Nullable: true,
-      },
-      CategoryID: {
-        $Type: 'Edm.Int32',
-        $Nullable: true,
-      },
-      QuantityPerUnit: {
-        $Nullable: true,
-      },
-      UnitPrice: {
-        $Type: 'Edm.Decimal',
-        $Nullable: true,
-      },
-      UnitsInStock: {
-        $Type: 'Edm.Int16',
-        $Nullable: true,
-      },
-      UnitsOnOrder: {
-        $Type: 'Edm.Int16',
-        $Nullable: true,
-      },
-      ReorderLevel: {
-        $Type: 'Edm.Int16',
-        $Nullable: true,
-      },
-      Discontinued: {
-        $Type: 'Edm.Boolean',
-      },
-      NorthwindOrderDetails: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrderDetail',
-      },
-      Supplier: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Supplier',
-        $ReferentialConstraint: {
-          SupplierID: 'SupplierID',
-        },
-      },
-      Category: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Category',
-        $ReferentialConstraint: {
-          CategoryID: 'CategoryID',
-        },
-      },
-    },
-    Region: {
-      $Kind: 'EntityType',
-      $Key: ['RegionID'],
-      RegionID: {
-        $Type: 'Edm.Int32',
-      },
-      RegionDescription: {
-        $Nullable: true,
-      },
-      Territories: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Territory',
-      },
-    },
-    Shipper: {
-      $Kind: 'EntityType',
-      $Key: ['ShipperID'],
-      ShipperID: {
-        $Type: 'Edm.Int32',
-      },
-      CompanyName: {
-        $Nullable: true,
-      },
-      Phone: {
-        $Nullable: true,
-      },
-      NorthwindOrders: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrder',
-      },
-    },
-    Supplier: {
-      $Kind: 'EntityType',
-      $Key: ['SupplierID'],
-      SupplierID: {
-        $Type: 'Edm.Int32',
-      },
-      CompanyName: {
-        $Nullable: true,
-      },
-      ContactName: {
-        $Nullable: true,
-      },
-      ContactTitle: {
-        $Nullable: true,
-      },
-      Address: {
-        $Nullable: true,
-      },
-      City: {
-        $Nullable: true,
-      },
-      Region: {
-        $Nullable: true,
-      },
-      PostalCode: {
-        $Nullable: true,
-      },
-      Country: {
-        $Nullable: true,
-      },
-      Phone: {
-        $Nullable: true,
-      },
-      Fax: {
-        $Nullable: true,
-      },
-      HomePage: {
-        $Nullable: true,
-      },
-      NorthwindProducts: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindProduct',
-      },
-    },
-    Territory: {
-      $Kind: 'EntityType',
-      $Key: ['TerritoryID'],
-      TerritoryID: {},
-      TerritoryDescription: {
-        $Nullable: true,
-      },
-      RegionID: {
-        $Type: 'Edm.Int32',
-        $Nullable: true,
-      },
-      EmployeeTerritories: {
-        $Kind: 'NavigationProperty',
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.EmployeeTerritory',
-      },
-      Region: {
-        $Kind: 'NavigationProperty',
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Region',
-        $ReferentialConstraint: {
-          RegionID: 'RegionID',
-        },
-      },
-    },
-    TestCustomers: {
-      $Kind: 'EntityType',
-      $Key: ['CustomerID'],
-      CustomerID: {},
-      CompanyName: {
-        $Nullable: true,
-      },
-      ContactName: {
-        $Nullable: true,
-      },
-      ContactTitle: {
-        $Nullable: true,
-      },
-      Address: {
-        $Nullable: true,
-      },
-      City: {
-        $Nullable: true,
-      },
-      Region: {
-        $Nullable: true,
-      },
-      PostalCode: {
-        $Nullable: true,
-      },
-      Country: {
-        $Nullable: true,
-      },
-      Phone: {
-        $Nullable: true,
-      },
-      Fax: {
-        $Nullable: true,
-      },
-    },
-  },
-  Default: {
-    Container: {
-      $Kind: 'EntityContainer',
-      Orders: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Sample.Order',
-        $NavigationPropertyBinding: {
-          OrderDetails: 'OrderDetails',
-        },
-      },
-      OrderDetails: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Sample.OrderDetail',
-        $NavigationPropertyBinding: {
-          Order: 'Orders',
-          Product: 'Products',
-        },
-      },
-      Products: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Sample.Product',
-        $NavigationPropertyBinding: {
-          OrderDetails: 'OrderDetails',
-        },
-      },
-      Categories: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Category',
-        $NavigationPropertyBinding: {
-          NorthwindProducts: 'NorthwindProducts',
-        },
-      },
-      Customers: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Customer',
-        $NavigationPropertyBinding: {
-          CustomerCustomerDemos: 'CustomerCustomerDemos',
-          NorthwindOrders: 'NorthwindOrders',
-        },
-      },
-      CustomerCustomerDemos: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.CustomerCustomerDemo',
-        $NavigationPropertyBinding: {
-          Customer: 'Customers',
-          CustomerDemographic: 'CustomerDemographics',
-        },
-      },
-      CustomerDemographics: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.CustomerDemographic',
-        $NavigationPropertyBinding: {
-          CustomerCustomerDemos: 'CustomerCustomerDemos',
-        },
-      },
-      Employees: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Employee',
-        $NavigationPropertyBinding: {
-          Employee1: 'Employees',
-          Employees1: 'Employees',
-          EmployeeTerritories: 'EmployeeTerritories',
-          NorthwindOrders: 'NorthwindOrders',
-        },
-      },
-      EmployeeTerritories: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.EmployeeTerritory',
-        $NavigationPropertyBinding: {
-          Employee: 'Employees',
-          Territory: 'Territories',
-        },
-      },
-      NorthwindOrders: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrder',
-        $NavigationPropertyBinding: {
-          Customer: 'Customers',
-          Employee: 'Employees',
-          NorthwindOrderDetails: 'NorthwindOrderDetails',
-          Shipper: 'Shippers',
-        },
-      },
-      NorthwindOrderDetails: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindOrderDetail',
-        $NavigationPropertyBinding: {
-          NorthwindOrder: 'NorthwindOrders',
-          NorthwindProduct: 'NorthwindProducts',
-        },
-      },
-      NorthwindProducts: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.NorthwindProduct',
-        $NavigationPropertyBinding: {
-          Category: 'Categories',
-          NorthwindOrderDetails: 'NorthwindOrderDetails',
-          Supplier: 'Suppliers',
-        },
-      },
-      Regions: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Region',
-        $NavigationPropertyBinding: {
-          Territories: 'Territories',
-        },
-      },
-      Shippers: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Shipper',
-        $NavigationPropertyBinding: {
-          NorthwindOrders: 'NorthwindOrders',
-        },
-      },
-      Suppliers: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Supplier',
-        $NavigationPropertyBinding: {
-          NorthwindProducts: 'NorthwindProducts',
-        },
-      },
-      Territories: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.Territory',
-        $NavigationPropertyBinding: {
-          EmployeeTerritories: 'EmployeeTerritories',
-          Region: 'Regions',
-        },
-      },
-      TestCustomers: {
-        $Collection: true,
-        $Type: 'BlazorWasm7Mssql.Models.Northwind.TestCustomers',
-      },
-    },
-  },
-};
-
 describe('OData Table Store', () => {
   let store: ODataTableStore;
+  let expectedMetadata: Metadata;
   let expectedProductsResponse: ODataQueryResultDto<unknown>;
   let expectedProductsWithSuppliersResponse: ODataQueryResultDto<unknown>;
 
   beforeAll((done) => {
     combineLatest([
+      from(fetch(testEndpoint + '$metadata?$format=json').then((res) => res.json())),
       from(fetch(testEndpoint + config.entityName + '?$count=true').then((res) => res.json())),
       from(fetch(testEndpoint + config.entityName + '?$count=true&expand=Supplier').then((res) => res.json())),
     ]).subscribe({
-      next: ([products, productsWithSuppliers]) => {
+      next: ([metadata, products, productsWithSuppliers]) => {
+        expectedMetadata = metadata;
         expectedProductsResponse = products;
         expectedProductsWithSuppliersResponse = productsWithSuppliers;
         done();
diff --git a/projects/neuroglia/angular-ui-material-odata-table/src/lib/angular-material-odata-table.component.spec.ts b/projects/neuroglia/angular-ui-material-odata-table/src/lib/angular-material-odata-table.component.spec.ts
index 26e386c..f2f7466 100644
--- a/projects/neuroglia/angular-ui-material-odata-table/src/lib/angular-material-odata-table.component.spec.ts
+++ b/projects/neuroglia/angular-ui-material-odata-table/src/lib/angular-material-odata-table.component.spec.ts
@@ -1,13 +1,113 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, ComponentFixtureAutoDetect, TestBed, fakeAsync } from '@angular/core/testing';
 
-import { NeurogliaNgMatDataTableComponent } from './angular-ui-material-odata-table.component';
+import { NeurogliaNgMatDataTableComponent } from './angular-material-odata-table.component';
+import { provideHttpClient } from '@angular/common/http';
+import { NamedLoggingServiceFactory } from '@neuroglia/angular-logging';
+import { HttpErrorObserverService, ODataQueryResultDto, UrlHelperService } from '@neuroglia/angular-rest-core';
+import { KeycloakService } from 'keycloak-angular';
+import { Metadata, ODataTableConfig, ODataTableStore } from '@neuroglia/angular-ngrx-component-store-odata-table';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { NeurogliaNgCommonModule } from '@neuroglia/angular-common';
+import { NeurogliaNgMatQueryableDataTableModule } from '@neuroglia/angular-ui-material-queryable-table';
+import { MatTableModule } from '@angular/material/table';
+import { MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { NeurogliaNgUiJsonPresenterModule } from '@neuroglia/angular-ui-json-presenter';
+import { combineLatest, filter, from, take } from 'rxjs';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  expandRowColumnDefinition,
+  selectRowColumnDefinition,
+} from '@neuroglia/angular-ngrx-component-store-queryable-table';
+import { humanCase } from '@neuroglia/common';
+
+const testEndpoint = 'https://services.radzen.com/odata/Northwind/';
+
+const config: ODataTableConfig = {
+  dataSourceType: 'odata',
+  serviceUrl: testEndpoint,
+  entityName: 'NorthwindProducts',
+  useMetadata: true,
+  columnDefinitions: [],
+};
 
 describe('NeurogliaNgMatDataTableComponent', () => {
-  let component: NeurogliaNgMatDataTableComponent;
+  let expectedMetadata: Metadata;
+  let expectedProductsResponse: ODataQueryResultDto<unknown>;
+  let expectedProductsWithSuppliersResponse: ODataQueryResultDto<unknown>;
   let fixture: ComponentFixture<NeurogliaNgMatDataTableComponent>;
+  let component: NeurogliaNgMatDataTableComponent;
+  let componentElement: HTMLElement;
+
+  beforeAll((done) => {
+    combineLatest([
+      from(fetch(testEndpoint + '$metadata?$format=json').then((res) => res.json())),
+      from(fetch(testEndpoint + config.entityName + '?$count=true').then((res) => res.json())),
+      from(fetch(testEndpoint + config.entityName + '?$count=true&expand=Supplier').then((res) => res.json())),
+    ]).subscribe({
+      next: ([metadata, products, productsWithSuppliers]) => {
+        expectedMetadata = metadata;
+        expectedProductsResponse = products;
+        expectedProductsWithSuppliersResponse = productsWithSuppliers;
+        done();
+      },
+      error: (err) => {
+        throw err;
+      },
+    });
+  });
 
   beforeEach(async () => {
+    jasmine.DEFAULT_TIMEOUT_INTERVAL = 60000;
     await TestBed.configureTestingModule({
+      providers: [
+        { provide: ComponentFixtureAutoDetect, useValue: true },
+        provideHttpClient(),
+        NamedLoggingServiceFactory,
+        HttpErrorObserverService,
+        UrlHelperService,
+        KeycloakService,
+        ODataTableStore,
+      ],
+      imports: [
+        NoopAnimationsModule,
+        FormsModule,
+        ReactiveFormsModule,
+        RouterModule,
+        NeurogliaNgCommonModule,
+        NeurogliaNgMatQueryableDataTableModule,
+
+        MatTableModule,
+        MatSortModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatDialogModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatButtonModule,
+        MatSelectModule,
+        MatCheckboxModule,
+        MatButtonToggleModule,
+        MatExpansionModule,
+        MatDatepickerModule,
+        DragDropModule,
+
+        NeurogliaNgUiJsonPresenterModule,
+      ],
       declarations: [NeurogliaNgMatDataTableComponent],
     }).compileComponents();
   });
@@ -15,10 +115,71 @@ describe('NeurogliaNgMatDataTableComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(NeurogliaNgMatDataTableComponent);
     component = fixture.componentInstance;
+    componentElement = fixture.nativeElement;
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should display the data table', async () => {
+    component.isLoading$
+      .pipe(
+        filter((isLoading) => !isLoading),
+        take(1),
+      )
+      .subscribe({
+        next: async () => {
+          fixture.detectChanges();
+        },
+      });
+    fixture.componentRef.setInput('configuration', config);
+    fixture.detectChanges();
+    return fixture.whenStable().then(() => {
+      let expectedColumns = Object.entries(expectedMetadata['BlazorWasm7Mssql.Models.Northwind'].NorthwindProduct)
+        .filter(
+          ([key, info]: [string, any]) =>
+            !key.startsWith('$') && !info.$Collection && info.$Kind !== 'NavigationProperty',
+        )
+        .map(([key]) => key);
+      if (config.enableSelection === true) {
+        expectedColumns = [selectRowColumnDefinition.name, ...expectedColumns];
+      }
+      if (config.enableRowExpansion === true) {
+        expectedColumns = [expandRowColumnDefinition.name, ...expectedColumns];
+      }
+      let expectedColumnsCount = expectedColumns.length;
+      const facade = componentElement.querySelector('neuroglia-mat-queryable-table-facade');
+      const progressBar = componentElement.querySelector('mat-progress-bar');
+      const queryableTableEntry = componentElement.querySelector('neuroglia-mat-queryable-table-table');
+      const responsiveTable = componentElement.querySelector('.responsive-table > table');
+      const thead = responsiveTable?.querySelector('thead');
+      const headers = Array.from(thead?.querySelectorAll('th') || []);
+      const tbody = responsiveTable?.querySelector('tbody');
+      const rows = Array.from(tbody?.querySelectorAll('tr') || []);
+      const tfoot = responsiveTable?.querySelector('tfoot');
+      const footer = componentElement.querySelector('.table-footer');
+      const enableColumnSettings = footer?.querySelector('.column-settings');
+      const paginator = footer?.querySelector('mat-paginator');
+
+      expect(component).withContext('component').toBeDefined();
+      expect(facade).withContext('facade').toBeDefined();
+      expect(progressBar).withContext('progressBar').toBeDefined();
+      expect(queryableTableEntry).withContext('queryableTableEntry').toBeDefined();
+      expect(responsiveTable).withContext('responsiveTable').toBeDefined();
+      expect(thead).withContext('thead').toBeDefined();
+      expect(tbody).withContext('tbody').toBeDefined();
+      expect(tfoot).withContext('tfoot').toBeDefined();
+      expect(footer).withContext('footer').toBeDefined();
+      if (config.enableColumnSettings === false) {
+        expect(enableColumnSettings).withContext('enableColumnSettings').toBeFalsy();
+      } else {
+        expect(enableColumnSettings).withContext('enableColumnSettings').toBeDefined();
+      }
+      expect(paginator).withContext('paginator').toBeDefined();
+      expect(headers.length).withContext('headers count').toBe(expectedColumnsCount);
+      expect(rows.length).withContext('rows count').toBe(20);
+      expectedColumns.forEach((column, index) => {
+        const humanColumn = humanCase(column, true);
+        expect(headers[index].textContent).withContext(`header '${humanColumn}'(#${index})`).toContain(humanColumn);
+      });
+    });
   });
 });
diff --git a/projects/neuroglia/angular-ui-material-odata-table/src/lib/material-odata-table.store.ts b/projects/neuroglia/angular-ui-material-odata-table/src/lib/material-odata-table.store.ts
index 65293f1..3c9eb51 100644
--- a/projects/neuroglia/angular-ui-material-odata-table/src/lib/material-odata-table.store.ts
+++ b/projects/neuroglia/angular-ui-material-odata-table/src/lib/material-odata-table.store.ts
@@ -30,7 +30,7 @@ export class MaterialODataTableStore<
   /**
    * Shows a filter's dialog and handles the return
    */
-  showFilterDialog(dialogType: Type<any>, columnDefinition: ColumnDefinition, filter: Filter | null) {
+  showFilterDialog(dialogType: Type<any>, columnDefinition: ColumnDefinition, filter: Filter | null): void {
     const config = new MatDialogConfig();
     config.data = { columnDefinition, filter } as FilterDialogData;
     const dialogRef = this.dialog.open(dialogType, config);
@@ -57,7 +57,7 @@ export class MaterialODataTableStore<
   /**
    * Shows the columns settings dialog and handles the return
    */
-  showColumnSettingsDialog() {
+  showColumnSettingsDialog(): void {
     const config = new MatDialogConfig();
     const columnDefinitions = this.get((state) => state.columnDefinitions)
       .sort((prev, next) => (prev.position || 9999) - (next.position || 9999))
diff --git a/projects/neuroglia/angular-ui-material-queryable-table/src/lib/angular-material-queryable-table-facade.component.html b/projects/neuroglia/angular-ui-material-queryable-table/src/lib/angular-material-queryable-table-facade.component.html
index 269f301..0804a29 100644
--- a/projects/neuroglia/angular-ui-material-queryable-table/src/lib/angular-material-queryable-table-facade.component.html
+++ b/projects/neuroglia/angular-ui-material-queryable-table/src/lib/angular-material-queryable-table-facade.component.html
@@ -44,38 +44,24 @@
     color="accent"
   ></mat-progress-bar>
   <neuroglia-mat-queryable-table-table
-    *ngIf="
-      viewModel.dataSourceType &&
-      viewModel.columnDefinitions &&
-      viewModel.displayedColumns &&
-      viewModel.count != null &&
-      viewModel.filters &&
-      viewModel.stickHeader &&
-      viewModel.serviceUrl &&
-      viewModel.entityName &&
-      viewModel.enableSelection != null &&
-      viewModel.selectedRows &&
-      viewModel.enableRowExpansion &&
-      viewModel.enableColumnSettings
-    "
     [table]="parent"
-    [dataSourceType]="viewModel.dataSourceType"
+    [dataSourceType]="viewModel.dataSourceType!"
     [dataSource]="viewModel.data"
-    [columnDefinitions]="viewModel.columnDefinitions"
-    [displayedColumns]="viewModel.displayedColumns"
+    [columnDefinitions]="viewModel.columnDefinitions!"
+    [displayedColumns]="viewModel.displayedColumns!"
     [pageSize]="viewModel.pageSize"
     [pageIndex]="viewModel.pageIndex"
-    [count]="viewModel.count"
+    [count]="viewModel.count!"
     [sort]="viewModel.sort"
-    [filters]="viewModel.filters"
-    [stickHeader]="viewModel.stickHeader"
-    [serviceUrl]="viewModel.serviceUrl"
-    [entityName]="viewModel.entityName"
-    [enableSelection]="viewModel.enableSelection"
-    [selectedRows]="viewModel.selectedRows"
-    [enableRowExpansion]="viewModel.enableRowExpansion"
+    [filters]="viewModel.filters!"
+    [stickHeader]="viewModel.stickHeader!"
+    [serviceUrl]="viewModel.serviceUrl!"
+    [entityName]="viewModel.entityName!"
+    [enableSelection]="viewModel.enableSelection!"
+    [selectedRows]="viewModel.selectedRows!"
+    [enableRowExpansion]="viewModel.enableRowExpansion!"
     [expandedRow]="viewModel.expandedRow"
-    [enableColumnSettings]="viewModel.enableColumnSettings"
+    [enableColumnSettings]="viewModel.enableColumnSettings!"
     (rowClicked)="parent.rowClicked.emit($event)"
     (rowExpanded)="parent.onExpandRow($event)"
     (selectionChange)="parent.onSelectionChange($event)"
diff --git a/projects/neuroglia/angular-ui-material-queryable-table/src/lib/components/table/table.component.html b/projects/neuroglia/angular-ui-material-queryable-table/src/lib/components/table/table.component.html
index c480da4..b710a23 100644
--- a/projects/neuroglia/angular-ui-material-queryable-table/src/lib/components/table/table.component.html
+++ b/projects/neuroglia/angular-ui-material-queryable-table/src/lib/components/table/table.component.html
@@ -83,7 +83,7 @@
   </table>
 </div>
 <div class="table-footer">
-  <button *ngIf="enableColumnSettings" mat-icon-button aria-label="Columns settings" (click)="showColumnSettings.emit()">
+  <button *ngIf="enableColumnSettings" class="column-settings" mat-icon-button aria-label="Columns settings" (click)="showColumnSettings.emit()">
     <mat-icon>settings</mat-icon>
   </button>    
   <mat-paginator