{"id":953,"date":"2026-03-06T11:05:39","date_gmt":"2026-03-06T02:05:39","guid":{"rendered":"https:\/\/sumomo.ohwaki.jp\/wordpress\/?p=953"},"modified":"2026-03-06T11:05:39","modified_gmt":"2026-03-06T02:05:39","slug":"blazor-quickgrid%e3%81%ae%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e6%8c%87%e5%ae%9a","status":"publish","type":"post","link":"https:\/\/sumomo.ohwaki.jp\/wordpress\/?p=953","title":{"rendered":"Blazor QuickGrid\u306e\u30b9\u30bf\u30a4\u30eb\u6307\u5b9a"},"content":{"rendered":"\n

Blazor\u306eQuickGrid\u306e\u30b9\u30bf\u30a4\u30eb\u6307\u5b9a\u306b\u306f\u8272\u3005\u306a\u65b9\u6cd5\u304c\u3042\u308b\u3088\u3046\u3060\u304c\u3001\u3068\u308a\u3042\u3048\u305a\u3001MS\u306e\u30de\u30cb\u30e5\u30a2\u30eb\u306b\u8f09\u3063\u3066\u3044\u308b\u65b9\u6cd5\u3067\u8a66\u3057\u3066\u307f\u305f\u3002<\/p>\n\n\n\n

\u4ee5\u4e0b\u306e\u3088\u3046\u306aGrid\u304c\u3042\u308b\u5834\u5408\u3001<\/p>\n\n\n\n

@page "\/"\n@rendermode InteractiveServer\n@using Microsoft.AspNetCore.Components.QuickGrid\n@using qgridtest.Db\n@inject PersonContext Db\n\n<PageTitle>Quick Grid Test<\/PageTitle>\n\n<h1>Quick Grid Test<\/h1>\n\n<div class="GridContainer"> <!-- QuickGrid\u306e\u30b3\u30f3\u30c6\u30ca -->\n    <QuickGrid Items="people" Pagination="paginationState">\n        <PropertyColumn Title="\u6c0f\u540d" Property="@(p => p.Name)" Sortable="true" \/>\n        <PropertyColumn Title="\u751f\u5e74\u6708\u65e5" Property="@(p => p.Birthdate)" Format="yyyy\/MM\/dd" Sortable="true" \/>\n        <PropertyColumn Title="\u5e74\u9f62" Property="@(p => p.Age)" \/>\n    <\/QuickGrid>\n    <Paginator State="paginationState" \/>\n<\/div>\n@code {\n    IQueryable<Person>? people;\n    PaginationState paginationState = new PaginationState { ItemsPerPage = 5 };\n    protected override void OnInitialized()\n    {\n        people = Db.People.AsQueryable();\n    }\n}<\/code><\/pre><\/div>\n\n\n\n
\u307e\u305a\u3001QuickGrid\u306e\u30b3\u30f3\u30c6\u30ca\u3068\u306a\u308bdiv\u30bf\u30b0\u3067\u62ec\u308a\u3001\u305d\u306eCSS\u30af\u30e9\u30b9\u3092\u4f7f\u7528\u3057\u3066\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306aCSS\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001QuickGrid\u306e\u5404\u8981\u7d20\u306b\u30b9\u30bf\u30a4\u30eb\u3092\u9069\u7528\u3067\u304d\u308b\u3002<\/p>\n\n\n\n
\/* QuickGrid\u306e\u30b3\u30f3\u30c6\u30ca *\/\n.GridContainer {\n    padding-left:3em;\n    padding-right: 3em;\n}\n\/* QuickGrid\u306e\u30d8\u30c3\u30c0 *\/\n.GridContainer ::deep th {\n    background-color: teal;\n}\n\/* QuickGrid\u306e\u884c(\u30dc\u30fc\u30c0\u30fc) *\/\n.GridContainer ::deep tr {\n    border-width: 1px;\n    border-color:lightgray;\n    border-style: solid;\n}\n\/* QuickGrid\u306e\u884c\u306e\u5076\u6570\u884c\u80cc\u666f\u8272 *\/\n.GridContainer ::deep tr:nth-child(even) {\n    background-color: lightgreen;\n}\n\/* QuickGrid\u306e1\u5217\u76ee\u306e\u5e45 *\/\n.GridContainer ::deep td:nth-child(1) {\n    width: 200px;\n}\n\/* QuickGrid\u7a7a\u30bb\u30eb\u306f\u975e\u8868\u793a *\/\n.GridContainer ::deep td:empty {\n    display: none;\n}<\/code><\/pre><\/div>\n\n\n\n
\u2193\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u8868\u793a\u3055\u308c\u308b\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u307b\u304b\u306e\u65b9\u6cd5\u3082\u3042\u308b\u3088\u3046\u3060\u304c\u3001\u7d50\u5c40 ::deep\u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u304c\u4e00\u822c\u7684\u307f\u305f\u3044\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Blazor\u306eQuickGrid\u306e\u30b9\u30bf\u30a4\u30eb\u6307\u5b9a\u306b\u306f\u8272\u3005\u306a\u65b9\u6cd5\u304c\u3042\u308b\u3088\u3046\u3060\u304c\u3001\u3068\u308a … \u7d9a\u304d\u3092\u8aad\u3080 →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,12,10,9,4],"tags":[],"class_list":["post-953","post","type-post","status-publish","format-standard","hentry","category-net","category-asp-net-core","category-blazor","category-c","category-4"],"_links":{"self":[{"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=953"}],"version-history":[{"count":3,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/953\/revisions"}],"predecessor-version":[{"id":960,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/953\/revisions\/960"}],"wp:attachment":[{"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}