MatTable #277

rogeralsing · 2019-10-02T07:28:36Z

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 · 2019-10-02T07:40:34Z

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

milenpav · 2019-10-03T10:44:55Z

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

dannyaguilerar · 2019-10-08T21:42:16Z

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 · 2020-07-23T15:50:07Z

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 · 2020-07-23T21:41:42Z

partially fixed this with min-width, thanks.

fededim · 2020-09-03T15:25:06Z

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 · 2020-09-28T20:17:55Z

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 · 2020-09-28T20:28:02Z

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" @[email protected]></MatCheckbox>
        </MatTableRow>

HClausing · 2020-10-09T19:48:03Z

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 · 2020-10-10T18:19:46Z

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

fededim · 2020-10-11T09:48:24Z

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 · 2020-10-11T18:04:03Z

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 <[email protected]> Sent: 11 October 2020 10:49 To: SamProf/MatBlazor <[email protected]> Cc: Dave Oakley <[email protected]>; Comment <[email protected]> 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 · 2020-10-11T21:20:05Z

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 [email protected] Sent: 11 October 2020 10:49 To: SamProf/MatBlazor [email protected] Cc: Dave Oakley [email protected]; Comment [email protected] 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 · 2020-10-12T08:46:49Z

I might be using an older version of matTable as it does not recognise <MatColGroup> as a valid child component? From: Henrique Clausing <[email protected]> Sent: 11 October 2020 22:20 To: SamProf/MatBlazor <[email protected]> Cc: Dave Oakley <[email protected]>; Comment <[email protected]> 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 [email protected]<mailto:[email protected]> Sent: 11 October 2020 10:49 To: SamProf/MatBlazor [email protected]<mailto:[email protected]> Cc: Dave Oakley [email protected]<mailto:[email protected]>; Comment [email protected]<mailto:[email protected]> 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 · 2020-10-12T11:12:08Z

I might be using an older version of matTable as it does not recognise as a valid child component? From: Henrique Clausing [email protected] Sent: 11 October 2020 22:20 To: SamProf/MatBlazor [email protected] Cc: Dave Oakley [email protected]; Comment [email protected] 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 [email protected]mailto:[email protected] Sent: 11 October 2020 10:49 To: SamProf/MatBlazor [email protected]mailto:[email protected] Cc: Dave Oakley [email protected]mailto:[email protected]; Comment [email protected]mailto:[email protected] 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.

dorana · 2020-10-26T07:58:43Z

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

pfeds · 2020-11-09T01:10:40Z

Same issue.

tiajean · 2020-11-27T16:02:30Z

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.

ldcroberts · 2021-01-12T21:02:03Z

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

ldcroberts · 2021-01-14T02:20:18Z

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

BobLangdown · 2021-03-01T02:59:10Z

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.

rogeralsing closed this as completed Oct 26, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MatTable #277

MatTable #277

rogeralsing commented Oct 2, 2019

rogeralsing commented Oct 2, 2019

milenpav commented Oct 3, 2019 •

edited

Loading

dannyaguilerar commented Oct 8, 2019

GitSheva commented Jul 23, 2020 •

edited

Loading

GitSheva commented Jul 23, 2020

fededim commented Sep 3, 2020 •

edited

Loading

daveoakley commented Sep 28, 2020

daveoakley commented Sep 28, 2020 •

edited

Loading

HClausing commented Oct 9, 2020

HClausing commented Oct 10, 2020

fededim commented Oct 11, 2020

daveoakley commented Oct 11, 2020 via email

HClausing commented Oct 11, 2020

daveoakley commented Oct 12, 2020 via email

HClausing commented Oct 12, 2020

dorana commented Oct 26, 2020

pfeds commented Nov 9, 2020

tiajean commented Nov 27, 2020

ldcroberts commented Jan 12, 2021

ldcroberts commented Jan 14, 2021

BobLangdown commented Mar 1, 2021

MatTable #277

MatTable #277

Comments

rogeralsing commented Oct 2, 2019

rogeralsing commented Oct 2, 2019

milenpav commented Oct 3, 2019 • edited Loading

dannyaguilerar commented Oct 8, 2019

GitSheva commented Jul 23, 2020 • edited Loading

GitSheva commented Jul 23, 2020

fededim commented Sep 3, 2020 • edited Loading

daveoakley commented Sep 28, 2020

daveoakley commented Sep 28, 2020 • edited Loading

HClausing commented Oct 9, 2020

HClausing commented Oct 10, 2020

fededim commented Oct 11, 2020

daveoakley commented Oct 11, 2020 via email

HClausing commented Oct 11, 2020

daveoakley commented Oct 12, 2020 via email

HClausing commented Oct 12, 2020

dorana commented Oct 26, 2020

pfeds commented Nov 9, 2020

tiajean commented Nov 27, 2020

ldcroberts commented Jan 12, 2021

ldcroberts commented Jan 14, 2021

BobLangdown commented Mar 1, 2021

milenpav commented Oct 3, 2019 •

edited

Loading

GitSheva commented Jul 23, 2020 •

edited

Loading

fededim commented Sep 3, 2020 •

edited

Loading

daveoakley commented Sep 28, 2020 •

edited

Loading