diff --git a/Directory.Build.props b/Directory.Build.props index e27736be7e..2e1b859c09 100644 --- a/Directory.Build.props +++ b/Directory.Build.props @@ -12,8 +12,8 @@ $(MSBuildThisFileDirectory) true - 4.0.0 - 4.0.0 + 4.1.0 + 4.1.0 $(VersionFile) $(VersionFile) diff --git a/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor b/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor index 3f64f2b6d9..91269ee993 100644 --- a/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor +++ b/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor @@ -11,36 +11,11 @@

<FluentDataGrid> wraps the <fluent-data-grid> element, a web component implementation - of a data grid leveraging the Fluent UI design system. Internally <FluentDataGrid> is using the code from - QuickGrid with a few adjustments to parameter names to stay in-line - with the fluent-data-grid web component (see table below) - - - - - - - - - - - - - - - - - - - - - - - - - - -
QuickGridFluentDataGrid
ItemsRowsData
ItemsProviderRowsDataProvider
ItemSizeRowsDataSize
ItemKeyRowsDataKey
+ of a data grid leveraging the Fluent UI design system. Besides this we also provide wrappers for the <fluent-data-grid-row> and + <fluent-data-grid-cell> + web components. Internally <FluentDataGrid> is using the QuickGrid + code where all the rendering is replaced with the web components. We also added some extras like column resizing and row/column specific styling. +

Examples

diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css index 2e9dd9c9f0..f567d0bdb7 100644 --- a/examples/Demo/Shared/wwwroot/css/site.css +++ b/examples/Demo/Shared/wwwroot/css/site.css @@ -419,6 +419,7 @@ code { padding: 1.5em 0.75em 1em 0.75em; margin-inline-start: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)); /* hinge width */ margin-inline-end: calc(100% - env(viewport-segment-left 1 0)); + width: auto; } article { @@ -426,6 +427,7 @@ code { padding-top: 0px; margin-inline-start: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)); /* hinge width */ margin-inline-end: calc(100% - env(viewport-segment-left 1 0)); + width: auto; } }