QuickGridColumnResizer 1.0.4

There is a newer version of this package available.
See the version list below for details.
dotnet add package QuickGridColumnResizer --version 1.0.4                
NuGet\Install-Package QuickGridColumnResizer -Version 1.0.4                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="QuickGridColumnResizer" Version="1.0.4" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add QuickGridColumnResizer --version 1.0.4                
#r "nuget: QuickGridColumnResizer, 1.0.4"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install QuickGridColumnResizer as a Cake Addin
#addin nuget:?package=QuickGridColumnResizer&version=1.0.4

// Install QuickGridColumnResizer as a Cake Tool
#tool nuget:?package=QuickGridColumnResizer&version=1.0.4                

https://github.com/BieleckiLtd/QuickGrid-Column-Resizer/assets/57046415/e31b2441-f585-406b-b907-e9e1bc4d978c

Features

  1. Does not behave erratically with virtualised content.
  2. Double-click to auto-adjust column width.
  3. Middle-click to set initial width.

Setup

  1. Add reference to the package: dotnet add package QuickGridColumnResizer
  2. In index.html file (Blazor WebAssembly App) or App.razor file (Blazor Web App) add following lines:
<link rel="stylesheet" href="_content/QuickGridColumnResizer/style.css" />

<script src="_content/QuickGridColumnResizer/script.js"></script>

For example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>My Blazor Project</title>
    <base href="/" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="css/bootstrap-icons/bootstrap-icons.min.css" />
    <link rel="stylesheet" href="_content/QuickGridColumnResizer/style.css" /> 
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" href="MyBlazorProject.styles.css" />
</head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/QuickGridColumnResizer/script.js"></script> 
</body>

</html>

Custom styling

You can override default styles.

  1. If you use global style sheet:
table.quickgrid .column-resizer {
    cursor: ew-resize;
    border: none;
    background: transparent;
}
    table.quickgrid .column-resizer::before {
        content: "|";
    }
  1. If you use isolated style sheet
::deep table.quickgrid .column-resizer {
    cursor: ew-resize;
    border: none;
    background: transparent;
}
    ::deep table.quickgrid .column-resizer::before {
        content: "|";
    }

Package icon

Resize Horizontal icon by Icons8

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
  • net8.0

    • No dependencies.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on QuickGridColumnResizer:

Package Downloads
MDriven.Components.WebAssembly

Package Description

GitHub repositories

This package is not used by any popular GitHub repositories.