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)
-
-
-
- QuickGrid |
- FluentDataGrid |
-
-
- Items |
- RowsData |
-
-
- ItemsProvider |
- RowsDataProvider |
-
-
- ItemSize |
- RowsDataSize |
-
-
- ItemKey |
- RowsDataKey |
-
-
- |
- |
-
-
+ 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;
}
}