Table style

[AlseinX]

The demo/documents website uses a beautiful style of table made of pure HTML tags with CSS, but the table component is very ugly. Can we use the style of the demo project instead of the black line one?

[enkodellc]

@AlseinX Please be more specific which documents / demo are you referring to. The table is pure html so you can style it anyway you want. If you have some better styling I suggest submit a PR or BlazorFiddle.

[AlseinX]

The demo/documents means https://www.matblazor.com/ with pure html table to describe the properties, which is beautiful.

But, the MatTable component does not use that style.

[enkodellc]

@AlseinX Here is the CSS to customize the table. @SamProf we could change the css for the MatTable to this. There is one issue I see. I had to put !important on some of the css since I think the MatBlazor CSS is being loaded after the user stylesheets, which is taking precedent. Mmaybe there is a a way to load the MatBlazor css before user stylesheets or some other solution? I ran into this several times when doing BlazorBoilerplate.

/* MatTable */
.mdc-table {
    border-collapse: collapse;
    border-spacing: 0;
    display: inline-block;
    overflow-x: auto;
    margin: 8px 0 32px;
    max-width: 100%;
    border: 1px solid #eee;
    width: 100%

}

    .mdc-table th {
        font-family: Roboto, sans-serif;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-size: 1rem;
        line-height: 1.75rem;
        font-weight: 400;
        letter-spacing: .04em;
        text-decoration: inherit;
        text-transform: inherit;
        background-color: whitesmoke !important;
        border-top: none;
        font-size: 1.143rem;
        color: #202124;
        text-align: left;
        border: 1px solid #eee;
        padding: 12px 12px 12px 24px !important;
    }

    .mdc-table td {
        border: 1px solid #eee;
        padding: 12px 12px 12px 24px !important;
        background-color:white;
    }

        .mdc-table td:first-child {
            border-left: none;
        }

        .mdc-table td:last-child {
            border-right: none;
            width: 100%;
        }

[enkodellc]

@AlseinX I just added RowClass and HeaderClass Checkout my fork until SamProf returns from vaction: https://github.com/enkodellc/matblazor

[SamProf]

For my opinion mat-table should have styles from the previous version, like in https://material.angular.io/components/table/overview

Also should be possible to customize standard styles.

[enkodellc]

I have no problems reverting to a basic style like angular material. Would be good then to have some documentation / examples on some other styles. I will be doing more MatTable work in the next few weeks as that is a BIG part of my clients project so I will try and get that done.

[SamProf]

@enkodellc , wow, You have client, that's already use Blazor in production for real project?

[enkodellc]

I am closing as this issue has style options for @AlseinX