MatTable

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?

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

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

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.

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?

partially fixed this with min-width, thanks.

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>

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.

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>

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.

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

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).

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>.

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.

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>.

@daveoakley

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.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 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.

Having the same issue, really hoping the PR gets approved, merged a new new NuGet gets released ^_^

Same issue.

Same issue.

What is your issue? Can you post your code? I just started using MatBlazor but do not have this issue with my tables.

Same issue.

What is your issue? Can you post your code? I just started using MatBlazor but do not have this issue with my tables.

https://blazorfiddle.com/s/60ed0fn6

for anyone with the same issue as Gitsheva above, I found a workaround. Just put a bunch of non-breaking spaces after your column header name until its as wide as you want and you don't get the weird white-space bug

I think this product has been abandoned, I don't see any replies for a long time.
Shame because it had some good features but can't be responsive if you can't use %age ColumnWidth.

Navigation Menu

Repository navigation

MatTable #277

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

MatTable #277

Description

Activity

rogeralsing commented on Oct 2, 2019

milenpav commented on Oct 3, 2019

dannyaguilerar commented on Oct 8, 2019

GitSheva commented on Jul 23, 2020

GitSheva commented on Jul 23, 2020

fededim commented on Sep 3, 2020

daveoakley commented on Sep 28, 2020

daveoakley commented on Sep 28, 2020

HClausing commented on Oct 9, 2020

HClausing commented on Oct 10, 2020

fededim commented on Oct 11, 2020

daveoakley commented on Oct 11, 2020

HClausing commented on Oct 11, 2020

daveoakley commented on Oct 12, 2020

HClausing commented on Oct 12, 2020

dorana commented on Oct 26, 2020

pfeds commented on Nov 9, 2020

tiajean commented on Nov 27, 2020

ldcroberts commented on Jan 12, 2021

ldcroberts commented on Jan 14, 2021

BobLangdown commented on Mar 1, 2021

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions