FluentUI Data Grid improvement

[AJ1000]

Firstly, I am a backend developer with minor skills in the frontend. However when trying out the quickgrid control itself, I managed to get the horizontal scrollbar to automatically work, using just CSS. I was unable to do the same with fluentgrid, and am not sure why but I came up with the classic alternative where the width is specified and the horizontal scrollbar appears as expected.

This discussion is about me wanting to give back to the project, and if you can use the strategy in fluentgrid to make it better than that is beneficial to everyone. If not, then that is fine as well. The new css is .table-wrapper and .table-wrapper2.

Or perhaps a css expert can make it work with fluentgrid like I have it working with quickgrid?

Here is the quickgrid code:

<div class="table-wrapper">
    <div class="table-wrapper2">
        <QuickGrid Items="@AddressesQuery" Pagination="@pagination" Theme="fancy-table">
            <PropertyColumn Title="Suite No" Property="@(c => c!.SuiteNo)" Align="Align.Start" Sortable="true" IsDefaultSortColumn="true"></PropertyColumn>
            <PropertyColumn Title="First Name" Property="@(c => c!.FirstName)" Align="Align.Center" Sortable="true" />
            <PropertyColumn Title="Last Name" Property="@(c => c!.LastName)" Align="Align.Center" Sortable="true" />
            <PropertyColumn Title="Company Name" Property="@(c => c!.CompanyName)" Align="Align.End" Sortable="true" />
        </QuickGrid>
        <Paginator State="@pagination" />
    </div>
</div>

Here is the css code:

.col-options-button {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="black" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>')
}

.col-options {
    color: gray;
}

.search-box {
    border: solid 1px #0a58ca;
    border-radius: 5px;
    padding: 5px;
    width: 20rem;
}

.detail-search {
    outline: none;
    border: none;
    width: 17rem;
}

input:focus .detail-search {
    outline: none;
}

.table-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.table-wrapper2 {
    display: table-cell;
    overflow-x: auto;
    width: 100%;
}

::deep .quickgrid[theme=fancy-table] {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

    ::deep .quickgrid[theme=fancy-table] .sort-indicator {
        margin: 0px 4px 0px 4px;
        background-image: url('data:image/svg+xml;utf8,<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>');
    }

    ::deep .quickgrid[theme=fancy-table] thead tr {
        background-color: #009879;
        color: #ffffff;
        text-align: left;
    }

    ::deep .quickgrid[theme=fancy-table] th,
    ::deep .quickgrid[theme=fancy-table] td {
        padding: 12px 15px;
    }

    ::deep .quickgrid[theme=fancy-table] tbody tr {
        border-bottom: 1px solid #dddddd;
    }

        ::deep .quickgrid[theme=fancy-table] tbody tr:nth-of-type(even) {
            background-color: #f3f3f3;
        }

        ::deep .quickgrid[theme=fancy-table] tbody tr:last-of-type {
            border-bottom: 2px solid #009879;
        }

        ::deep .quickgrid[theme=fancy-table] tbody tr.active-row {
            font-weight: bold;
            color: #009879;
        }

::deep .go-first {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="black" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" /> </svg>'); 
    margin-left: 2px;
}

::deep .go-first:focus {
    outline-style: solid;    
    outline-color: #9ca3af;
}

::deep .go-previous {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="black" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /> </svg>')
}

::deep .go-previous:focus {
    outline-style: solid;
    outline-color: #9ca3af;
}

::deep .go-next {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="black" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /> </svg>');    
}

::deep .go-next:focus {
    outline-style: solid;
    outline-color: #9ca3af;
}

::deep .go-last {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="black" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" /> </svg>'); 
    margin-right: 2px;
}

::deep .go-last:focus {
    outline-style: solid;
    outline-color: #9ca3af;
}

[vnbaaij]

Hi,

Getting the DataGrid to scoll is definitely possible here as well. Just resize your browser window and you can see that happening with the paramer/events documentation (which are displayed with DataGrids):

We will certainly leave your tip here for others to find, but it is not something we are planning to include in the library itself at the moment as it can be solved in your regular app/site css.

[AJ1000]

I solved it for fluentgrid, so it only adds the horizontal scrollbar if needed, but I will need to test it more ... this information is for anyone interested:

  <div style="display: table; table-layout: fixed; width: 100%;">
       <div style="overflow-x: auto;">
           <FluentDataGrid Style="min-width: max-content;" Id="weathergrid" ResizableColumns="true" Items="@forecasts" GridTemplateColumns="1fr 1fr 1fr 1fr" TGridItem="WeatherForecast">
               <PropertyColumn Title="Date" Property="@(c => c!.Date)" Align="Align.Start" Sortable="true" IsDefaultSortColumn="true" />
               <PropertyColumn Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Align="Align.Center" Sortable="true" />
               <PropertyColumn Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Align="Align.Center" Sortable="true" />
               <PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Align="Align.End" Sortable="true" Class="multiline-text" />
           </FluentDataGrid>
       </div>
   </div>

[MarvinKlein1508]

@AJ1000 is there also a way to reduce the spacing between the items? You see I have a lot of unneccessary whitespace here:

[MarvinKlein1508]

nevermind, I've missed min-width: max-content;. Thanks for sharing! :)

[MarvinKlein1508]

@vnbaaij it would be great if this can be added to the docs as in my option this is a very common use-case.

[vnbaaij]

Sure. Maybe you can come up with a PR for where and what you'd like to see added exactly?

[coderdnewbie]

Sorry for not responding sooner, (I am also AJ1000, when I am using my home PC, and coderdnewbie when using the work PC), I have just been made redundant and am still in shock. I have tested the solution for a few weeks, and it is robust but if you find any problems, let me know.

Like I said in my original post, I have only minor css skills, so there maybe more efficient ways of solving this problem, but my solution seems ideal.

In the documentation, this would be something like 'Adding a responsive horizontal scrollbar to the FluentDataGrid'. Hope this helps.

[vnbaaij]

So sorry to hear that. Hope you land in good place eventually.

[coderdnewbie]

Thanks, I am sure something will turn up.