C# Blazor: Splitting a razor file

I have a Blazor component which stores data that should be displayed in two tables.The related razor file contains HTML markup for the two tables which show same data in different ways:

DataComponent.razor.cs contains Components code:

public sealed partial class DataComponent : ComponentBase {...}

DataComponent.razor contains HTML markup for two tables

@if (_showTableA){<Table>A...</Table>}else{<Table>B...</Table>}

The HTML markup (it uses MudBlazor library) for the tables access public and private members of the component and is rather long and complex.

Now I want to move the markup to two separate razor files, one for table A and second for table B, so that DataComponent.razor just includes them, something like:

@if (_showTableA){<TableA/>}else{<TableB/>}

I tried two new components and included them with this code in DataComponent.razor:

<CascadingValue Value="this"><TableA/></CascadingValue>

But it seems that new components cannot access private members of DataComponent with this approach.

I also read about Blazor RenderFragments, but examples like thesehttps://learn.microsoft.com/en-us/aspnet/core/blazor/components/templated-components?view=aspnetcore-9.0orHow do we create a reusable RenderFragment in a separate code file?show HTML markup and code in one file whereas I need two markup files that access same component.

So my question is: How could I split my markup into two razor files which can be included in main razor file DataComponent.razor and access my DataComponent? Or is there a better approach for separating the markup?