MatTable

[rogeralsing]

What do I use to control cell and table width on the MatTable?
This is the standard fetch weather data from Blazor examples converted to MatBlazor.

The table is so big that it gets a horizontal scrollbar.
And cells are cramped together.

Are there any settings Im missing, or am I just supposed to use normal styles?

[rogeralsing]

Also, is there any way to use MatTable w/o databinding just as a plain table, for look and feel consistency?

[milenpav]

i fix it this on MainLayout <MatDrawerContainer Style="width: 98vw; height: 99vh;">

[dannyaguilerar]

Newbie here: Its not much, but you could choose one of the columns you prefer and set the style as such:

<th style="width:100%;">Details</th>

This way Details column will always get the rest of the available width in the column. It also fixes the column header when its empty. Hope it helps.

[GitSheva]

is this issue was fixed? I can't make it work. I'm adding width % to each column

<MatTable Items="@cars" class="mat-elevation-z5" Striped="true">
    <MatTableHeader>
        <th style="width:50%;">Name</th>
        <th style="width:25%;">Price</th>
        <th style="width:25%;">Horsepower</th>
    </MatTableHeader>
    <MatTableRow>
        <td style="width:50%;">@context.Name</td>
        <td style="width:25%;">@String.Format("${0:f2}", @context.Price)</td>
        <td style="width:25%;">@context.Horsepower</td>
    </MatTableRow>
</MatTable>

not too much to ask right? any thoughts?

[GitSheva]

partially fixed this with min-width, thanks.

[fededim]

Is this issue still being watched ? Putting min-width in style (for both th and td bleah!) only resizes them when mattable has no data, when it is filled the columns go back to standard size. Sizing of the columns of the table should be managed in some way otherwise this component becomes unusable!

<MatTable @ref="_reliabilityTable" Items="@Reliabilities" class="mat-elevation-z5" PageSize="100">
    <MatTableHeader>
        <th>@strings.Id</th>
        <th style="min-width:20%">@strings.Name</th>
        <th style="min-width:50%">@strings.ReferenceCountSessions</th>
        <th>@strings.Reliability</th>
    </MatTableHeader>
    <MatTableRow>
        <td>@context.Id</td>
        <td style="min-width:20%">@context.Name</td>
        <td style="min-width:50%">@context.ReferenceCountSessions</td>
        <td>@context.Reliability</td>
    </MatTableRow>
</MatTable>

[daveoakley]

I have spent hours fiddling with this with no success. I can't find a way to limit the overall size of the matTable and the individual columns dont want to resize. There needs to be a way to at least make the last column fill the table space otherwise this control is extremely limited as to when you can actually use it.

[daveoakley]

Actually, i think i've solved it. By setting width:100% on the 2nd column, it seems to place the last column where i need it to be:

        <MatTableHeader>
            <MatSortHeaderRow SortChanged="@SortData">
                <th></th>      
                <MatSortHeader SortId="description"><span >Description</span></MatSortHeader>
                <MatSortHeader SortId="enabled"><span>Enabled</span></MatSortHeader>
            </MatSortHeaderRow>

        </MatTableHeader>
        <MatTableRow>
            <MatIconButton Icon="construction" OnClick="@(() => OpenEditDialog(@context.CompanyID))" ></MatIconButton>
            <td style="width:100%">@context.Description</td>
            <MatCheckbox Disabled="true" @bind-Value=@context.Enabled></MatCheckbox>
        </MatTableRow>

[HClausing]

By searching how to solve this problem, I found this option on default html table:

<table>
                <colgroup>
                    <col span="1" style="width: 15%;">
                    <col span="1" style="width: 15%;">
                    <col span="1" style="width: 70%;">
                    <col span="1" style="width: 15%;">
                </colgroup>
</table>

But, unfortunatelly, it's not possible to declare on MatTable directly.

[HClausing]

I've created a PR #749 with this proposal for MatTable.

[fededim]

By searching how to solve this problem, I found this option on default html table:

<table>
                <colgroup>
                    <col span="1" style="width: 15%;">
                    <col span="1" style="width: 15%;">
                    <col span="1" style="width: 70%;">
                    <col span="1" style="width: 15%;">
                </colgroup>
</table>

But, unfortunatelly, it's not possible to declare on MatTable directly.

Html tables do support width in th tags, please see this HTMLFiddle...the problem is that for some reason they are not displayed right with MatBlazor (probably due to a CSS).

[daveoakley]

No I don’t think its possible with MatTable. I did manage to get a fixed size to work on the MatSelect buy overriding this CSS : /*override this stop set select box widths*/ .mdc-select__anchor { min-width:350px !important } So it’s likely there will a CSS for the table, but I don’t see how you could set the width on a column by column basis using CSS, as obviously columns are dynami. I hope they fix this otherwise I’ll have to find a better table component. From: Federico Di Marco <notifications@github.com> Sent: 11 October 2020 10:49 To: SamProf/MatBlazor <MatBlazor@noreply.github.com> Cc: Dave Oakley <oakleydave@hotmail.com>; Comment <comment@noreply.github.com> Subject: Re: [SamProf/MatBlazor] MatTable (#277) By searching how to solve this problem, I found this option on default html table: <table> <colgroup> <col span="1" style="width: 15%;"> <col span="1" style="width: 15%;"> <col span="1" style="width: 70%;"> <col span="1" style="width: 15%;"> </colgroup> </table> But, unfortunatelly, it's not possible to declare on MatTable directly. Html tables do support width in th tags, please see this HTMLFiddle<https://jsfiddle.net/0zkjbv4w/>...the problem is that for some reason they are not displayed right with MatBlazor (probably due to a CSS). — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#277 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ANHJKJWDSQZUMLKB7LWDUSTSKF5PLANCNFSM4I4SZQWA>.

[HClausing]

No I don’t think its possible with MatTable. I did manage to get a fixed size to work on the MatSelect buy overriding this CSS : /override this stop set select box widths/ .mdc-select__anchor { min-width:350px !important } So it’s likely there will a CSS for the table, but I don’t see how you could set the width on a column by column basis using CSS, as obviously columns are dynami. I hope they fix this otherwise I’ll have to find a better table component. From: Federico Di Marco notifications@github.com Sent: 11 October 2020 10:49 To: SamProf/MatBlazor MatBlazor@noreply.github.com Cc: Dave Oakley oakleydave@hotmail.com; Comment comment@noreply.github.com Subject: Re: [SamProf/MatBlazor] MatTable (#277) By searching how to solve this problem, I found this option on default html table:

But, unfortunatelly, it's not possible to declare on MatTable directly. Html tables do support width in th tags, please see this HTMLFiddlehttps://jsfiddle.net/0zkjbv4w/...the problem is that for some reason they are not displayed right with MatBlazor (probably due to a CSS). — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#277 (comment)>, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANHJKJWDSQZUMLKB7LWDUSTSKF5PLANCNFSM4I4SZQWA.

Hi,

Well, on private tests here with the PR #749 , it appears to be one possibility to resolve.

[daveoakley]

I might be using an older version of matTable as it does not recognise <MatColGroup> as a valid child component? From: Henrique Clausing <notifications@github.com> Sent: 11 October 2020 22:20 To: SamProf/MatBlazor <MatBlazor@noreply.github.com> Cc: Dave Oakley <oakleydave@hotmail.com>; Comment <comment@noreply.github.com> Subject: Re: [SamProf/MatBlazor] MatTable (#277) No I don’t think its possible with MatTable. I did manage to get a fixed size to work on the MatSelect buy overriding this CSS : /override this stop set select box widths/ .mdc-select__anchor { min-width:350px !important } So it’s likely there will a CSS for the table, but I don’t see how you could set the width on a column by column basis using CSS, as obviously columns are dynami. I hope they fix this otherwise I’ll have to find a better table component. From: Federico Di Marco notifications@github.com<mailto:notifications@github.com> Sent: 11 October 2020 10:49 To: SamProf/MatBlazor MatBlazor@noreply.github.com<mailto:MatBlazor@noreply.github.com> Cc: Dave Oakley oakleydave@hotmail.com<mailto:oakleydave@hotmail.com>; Comment comment@noreply.github.com<mailto:comment@noreply.github.com> Subject: Re: [SamProf/MatBlazor] MatTable (#277<#277>) By searching how to solve this problem, I found this option on default html table: But, unfortunatelly, it's not possible to declare on MatTable directly. Html tables do support width in th tags, please see this HTMLFiddlehttps://jsfiddle.net/0zkjbv4w/...the problem is that for some reason they are not displayed right with MatBlazor (probably due to a CSS). — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#277 (comment)<#277 (comment)>>, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANHJKJWDSQZUMLKB7LWDUSTSKF5PLANCNFSM4I4SZQWA. Hi, Well, on private tests here with the PR #749<#749> , it appears to be one possibility to resolve. — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#277 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ANHJKJVA3FO27UNGNBCL25DSKIORFANCNFSM4I4SZQWA>.

[HClausing]

I might be using an older version of matTable as it does not recognise as a valid child component? From: Henrique Clausing notifications@github.com Sent: 11 October 2020 22:20 To: SamProf/MatBlazor MatBlazor@noreply.github.com Cc: Dave Oakley oakleydave@hotmail.com; Comment comment@noreply.github.com Subject: Re: [SamProf/MatBlazor] MatTable (#277) No I don’t think its possible with MatTable. I did manage to get a fixed size to work on the MatSelect buy overriding this CSS : /override this stop set select box widths/ .mdc-select__anchor { min-width:350px !important } So it’s likely there will a CSS for the table, but I don’t see how you could set the width on a column by column basis using CSS, as obviously columns are dynami. I hope they fix this otherwise I’ll have to find a better table component. From: Federico Di Marco notifications@github.commailto:notifications@github.com Sent: 11 October 2020 10:49 To: SamProf/MatBlazor MatBlazor@noreply.github.commailto:MatBlazor@noreply.github.com Cc: Dave Oakley oakleydave@hotmail.commailto:oakleydave@hotmail.com; Comment comment@noreply.github.commailto:comment@noreply.github.com Subject: Re: [SamProf/MatBlazor] MatTable (#277<#277>) By searching how to solve this problem, I found this option on default html table: But, unfortunatelly, it's not possible to declare on MatTable directly. Html tables do support width in th tags, please see this HTMLFiddlehttps://jsfiddle.net/0zkjbv4w/...the problem is that for some reason they are not displayed right with MatBlazor (probably due to a CSS). — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#277 (comment)<#277 (comment)>>, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANHJKJWDSQZUMLKB7LWDUSTSKF5PLANCNFSM4I4SZQWA. Hi, Well, on private tests here with the PR #749<#749> , it appears to be one possibility to resolve. — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#277 (comment)>, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANHJKJVA3FO27UNGNBCL25DSKIORFANCNFSM4I4SZQWA.

Hi @daveoakley ,

The Pull Request for this feature isn't approved by admin yet. It's not available for all. I have only on my fork of this repository here.