{"id":23316874,"url":"https://github.com/pyrox18/pyrox.blazorcomponents.datagrid","last_synced_at":"2026-04-15T06:32:36.331Z","repository":{"id":89632289,"uuid":"212045261","full_name":"pyrox18/Pyrox.BlazorComponents.DataGrid","owner":"pyrox18","description":"An opinionated Blazor data grid component built on top of BlazorStrap","archived":false,"fork":false,"pushed_at":"2019-11-01T07:33:56.000Z","size":255,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T03:52:51.198Z","etag":null,"topics":["asp-net-core","blazor","blazor-server","data-grid","dotnet-core"],"latest_commit_sha":null,"homepage":null,"language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pyrox18.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"https://buymeacoff.ee/pyrox18"}},"created_at":"2019-10-01T08:18:36.000Z","updated_at":"2022-03-09T03:06:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"0c5a13f4-6381-49e4-95da-802fa56ffecc","html_url":"https://github.com/pyrox18/Pyrox.BlazorComponents.DataGrid","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyrox18%2FPyrox.BlazorComponents.DataGrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyrox18%2FPyrox.BlazorComponents.DataGrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyrox18%2FPyrox.BlazorComponents.DataGrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyrox18%2FPyrox.BlazorComponents.DataGrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pyrox18","download_url":"https://codeload.github.com/pyrox18/Pyrox.BlazorComponents.DataGrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247589834,"owners_count":20963022,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["asp-net-core","blazor","blazor-server","data-grid","dotnet-core"],"created_at":"2024-12-20T16:16:50.664Z","updated_at":"2026-04-15T06:32:36.280Z","avatar_url":"https://github.com/pyrox18.png","language":"C#","funding_links":["https://buymeacoff.ee/pyrox18"],"categories":[],"sub_categories":[],"readme":"# Pyrox.BlazorComponents.DataGrid\n\n[![](https://img.shields.io/nuget/v/Pyrox.BlazorComponents.DataGrid.svg?style=flat)](https://www.nuget.org/packages/Pyrox.BlazorComponents.DataGrid/)\n\nAn opinionated Blazor data grid component built on top of BlazorStrap.\n\n## Installation\n\nDownload and install this package from NuGet using the Package Manager Console, .NET CLI or Visual Studio's NuGet Package Manager.\n\n```bash\nPM\u003e Install-Package Pyrox.BlazorComponents.DataGrid\n# OR\n$ dotnet add package Pyrox.BlazorComponents.DataGrid\n```\n\n## Usage\n\n**NOTE:** This component is built and tested with Blazor Server only. This component is not guaranteed to work with other versions of Blazor, such as Blazor WebAssembly.\n\n### General usage (with example)\n\nThe instructions here are based on the weather forecast service provided in the default Blazor Server template. The code can be found in `tests/Pyrox.BlazorComponents.DataGrid.E2ETests`.\n\nAssuming we have the following `WeatherForecast` entity:\n\n```cs\npublic class WeatherForecast\n{\n    public DateTime Date { get; set; }\n    public int TemperatureC { get; set; }\n    public int TemperatureF =\u003e 32 + (int)(TemperatureC / 0.5556);\n    public string Summary { get; set; }\n}\n```\n\nImplement the `IDataGridService\u003cTItem\u003e` interface, where `TItem` is the type of the data item (in this case, `WeatherForecast`). You may need to import the `Pyrox.BlazorComponents.DataGrid.Interfaces` namespace for this.\n\n```cs\npublic class WeatherForecastService : IDataGridService\u003cWeatherForecast\u003e\n{\n    // This should be replaced with your actual data source\n    private readonly List\u003cWeatherForecast\u003e Data = new List\u003cWeatherForecast\u003e();\n\n    public async Task\u003cDataGridResult\u003cWeatherForecast\u003e\u003e GetItemsAsync(\n        int pageNumber,\n        int pageSize,\n        SortInformation\u003cWeatherForecast\u003e sortInfo = null,\n        string searchQuery = null,\n        object parameters = null)\n    {\n        var query = Data.AsQueryable();\n\n        if (!(sortInfo is null))\n        {\n            // Add logic for sorting here\n        }\n\n        if (!(searchQuery is null))\n        {\n            // Add logic for search queries here\n        }\n\n        if (!(parameters is null))\n        {\n            // Add logic for parameter handling here\r\n        }\n\n        // Get total item count before performing pagination\n        var totalItems = (uint)query.Count();\n\n        // Logic for pagination\n        var items = query.Skip((pageNumber - 1) * pageSize)\n            .Take(pageSize)\n            .ToList();\n\n        return new DataGridResult\u003cWeatherForecast\u003e(items, totalItems);\n    }\n}\n```\n\n`SortInformation\u003cTItem\u003e` is a class that contains:\n- a `Key` property of type `string` that indicates the name of the property to sort the items by, and\n- a `Type` property, which is a `SortType` enumeration that has two possible values: `Ascending` and `Descending`.\n\nUse these values to determine the sort order for your fetched items and apply those accordingly in your service's logic.\n\nFinally, use the `DataGrid` component in your Razor pages.\n\n```razor\n@page \"/\"\n\n\u003ch1\u003eWeather Forecast\u003c/h1\u003e\n\n\u003cDataGrid TItem=\"WeatherForecast\"\n          DefaultSort=\"SortInformation\u003cWeatherForecast\u003e.SortAscending(f =\u003e f.Date)\"\n          Parameters=\"parameters\"\u003e\n    \u003cGridHeader\u003e\n        \u003cth\u003eDate\u003c/th\u003e\n        \u003cth\u003eTemperature (C)\u003c/th\u003e\n        \u003cth\u003eTemperature (F)\u003c/th\u003e\n        \u003cth\u003eSummary\u003c/th\u003e\n    \u003c/GridHeader\u003e\n    \u003cGridRow\u003e\n        \u003ctd\u003e@context.Date\u003c/td\u003e\n        \u003ctd\u003e@context.TemperatureC\u003c/td\u003e\n        \u003ctd\u003e@context.TemperatureF\u003c/td\u003e\n        \u003ctd\u003e@context.Summary\u003c/td\u003e\n    \u003c/GridRow\u003e\n\u003c/DataGrid\u003e\n\n@code {\n    private object parameters = new\r\n    {\r\n        Summary = \"Balmy\"\r\n    }\r\n}\n```\n\nSupply the `TItem` type parameter when declaring the component. \n\nThe following parameters are optional:\n- `DefaultSort`: Determines the default sort order for the fetched items. Use the `SortInformation\u003cTItem\u003e.SortAscending` or `SortInformation\u003cTItem\u003e.SortDescending` static methods to quickly get the `SortInformation\u003cTItem\u003e` instance that you want.\n- `Parameters`: Parameters that you want to filter the results by. For example, supply an `OrderId` as a parameter and only fetch order items related to that `OrderId`. You are responsible for handling the presence/absence of these parameters in your `IDataGridService` implementation.\n\n### Customise sort key display name\n\nBy default, the sort dropdown gets its key names from the property names of `TItem` and converts them into title case. If you would like to provide your own sort key display name, you can use the `SortKeyDisplayName` attribute on your `TItem` class properties.\n\n```cs\npublic class WeatherForecast\n{\n    public DateTime Date { get; set; }\r\n\r\n    [SortKeyDisplayName(\"Temperature (C)\")]\r\n    public int TemperatureC { get; set; }\r\n\r\n    [SortKeyDisplayName(\"Temperature (F)\")]\r\n    public int TemperatureF =\u003e 32 + (int)(TemperatureC / 0.5556);\r\n\r\n    public string Summary { get; set; }\r\n}\n```\n\n# Contributing\n\nRefer to the CONTRIBUTING.md file for more information on how to contribute to this project.\n\n# License\n\nThis library is licensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpyrox18%2Fpyrox.blazorcomponents.datagrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpyrox18%2Fpyrox.blazorcomponents.datagrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpyrox18%2Fpyrox.blazorcomponents.datagrid/lists"}