fast
fast copied to clipboard
microsoft
add sort feature to data-grid component
🙋 Feature Request
data-grid component should have and support sort feature per column.
This should be achievable now by authors hooking up handlers to a header element that sorts the rowsData array they provide to the data-grid component.
I think there are a number of cool base grid features like this one, re-ordering columns, resizing columns, etc... that should be conveniently packaged up but I'm not sure if they are best implemented in the foundation classes or left to classes derived from it or some form of helper. So far I've thought of the foundation classes as the base rendering/templating engine and I think we should be deliberate about how many features we add at the base.
That we don't require row data objects to have unique id's may also add some complexity to the api.
Great topic, we should make it easy for devs to get this functionality, needs more deliberation on how best to approach.
Hello, any progress on this? the whole premises was > Microsoft Fluent UI web components > (using FAST) implement in Blazor. this is reference - https://github.com/microsoft/fast-blazor/issues/47 they say, this sorting and filtering should be implemented first here..
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
![stale[bot] avatar](https://avatars.githubusercontent.com/in/1724?v=4 "Published by a pub.dev verified publisher"){kind=small}
Can you please update status on this? This should use this component ? https://react.fluentui.dev/?path=/docs/preview-components-table--default
@hkusulja Just to clarify: FAST is the foundation for the FluentUI Web Components so FAST wouldn't use the Fluent data table. Rather, the Fluent Data Table would use FAST's foundational data table capability.
Right now I don't believe there is anyone actively working on the data table component for FAST. Most of the effort is going into the next set of releases, which include a general Fluent UI updated as well. I pinged Chris in the other issue, so he can give you more specifics. He leads the component work.
so, if using Fluent UI , (which relies on FAST), then sort feature is based on Fluent UI, since it is not implemented in FAST ? So, when looking the react / fluent ui https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist or: https://react.fluentui.dev/?path=/docs/preview-components-table--default i do not see any connection with FAST also, heh :/ now completely confused..
@hkusulja I definitely understand if it's confusing. Let me back up a bit and explain all the various pieces.
First, we have "Fluent". Fluent itself is a design language. It describes a look and feel, completely independent of any implementation or platform.
Next, there is "Fluent UI" which is a collection of implementations of the "Fluent" design language. There is a native implementation for Windows. There is an implementation for iOS, an implementation for Android, etc. There are two Web implementations. One is based on React (Fluent UI React) and the other is based on Web Components and FAST (Fluent UI Web Components).
To complicated matters, there are multiple versions of "Fluent" since the design language itself has evolved over multiple years. And that means there are multiple versions of each of the implementations, to match the design language versions.
One of the big problems is obviously that this isn't being communicated clearly. I have given feedback repeatedly to all sorts of folks within Microsoft that this needs to be improved. I can't fix it myself because I don't own any of the official communication channels. But I keep talking to people who do and asking them to address these issues.
An example of this communication breakdown is that your first link on developer.microsoft.com is actually referencing an old version of Fluent UI React which used an old version of the Fluent design language. None of that is current anymore. Your second link is referencing the new React implementations of the components which match the new version of the Fluent design system. However, the component you are linking to is in "preview" which means either the design or the implementation are not finished yet. So, technically, that is not yet an official component of Fluent.
Confused yet? Here's a bit more. Not every implementation shipped for every version. For example, the Fluent UI React components never shipped an implementation that aligned with the Windows 11 update to Fluent. They skipped right over that and went to the next version. However, the Fluent UI Web Components did ship an implementation of the Windows 11 version, which is why the Fluent UI Web Components look different than the old Fluent UI React (version prior to Win11) and also look different than the new Fluent UI React (version after Win11). The Fluent UI Web Components are in progress on an update to the new Fluent, but that's not ready yet. Each implementation progresses at its own pace toward alignment goals.
All that is to say, I apologize for how confusing this is and for how poorly it has been communicated. Unfortunately, I can't fix this set of problems myself but your feedback does greatly help me in communicating to leadership that customers are confused and dissatisfied with how Fluent has been handled both in terms of communication and alignment. So, thank you both for voicing your concerns and also for your patience while we try to solve these challenges.
@EisenbergEffect thank you for detailed information and response. I am trying to decide what to use for our new / future projects (web based). Our goal is to have a modern interface, which uses the latest version (can be in preview) , supported by teams, office applications and having the latest win11 look. Whatever is newer and more modern.
Our projects / banked is in .net 6 (moving to .net 7 now) , using Web Api and seperate frontend. Currently using Blazor WebAsembly (with Fluent UI nuget official). Having small list of components and working bad.
So for, I am looking option, should we move to (newer?) React version instead Blazor WASM - https://react.fluentui.dev/?path=/docs/preview-components-table--default
Or some third option, inside Microsoft official part and skin/styling/theming, to be aligned with sharepoint, teams and modern business applications..
and related to this github issue, should sort on grid table be implemented here in FAST or in separate FluentUI / which one then?
One of the challenges in all this is that many things are currently in a transitional state. This includes shifts from earlier versions of the Fluent design language to newer versions as well as shifts from older React technology to newer Web Components technology.
If you need a set of components for the Web Platform that are Win11-aligned today, then the only option is the current Fluent UI Web Components.
I am interested in those that are transitioning, which are new / preview, can you confirm via link that you think that this is it - about https://react.fluentui.dev/?path=/docs/preview-components-table--default ?
here is confusing image (3 options, one is above)
The link you have provided is to an unstable/preview implementation for a new Fluent Table component, implemented in React.
The image you are showing is from the Fluent documentation, some of which is out of date. If you choose Web Components, that will take you to the docs on the Web Components that are aligned with what is currently shipped. If you click on React that will take you to old documentation that is not aligned with the new React components announced in the banner (that documentation is elsewhere, in the storybook you linked). Furthermore, that React documentation on the site you have imaged is a version behind the design system represented by the Web Components, so you can think of that as being two versions old.
The Web Components (like most implementations) are currently working on updating to the new version of Fluent. Outside of the new React components, that work isn't released on any other platform I believe.
@EisenbergEffect it would be good to ask the fluent UI team or FAST team, to have a new blog post, explaining about current status, of each repo / package, just to have resime of everything on one place.
in that, whole story, it is not clear for me, then where it falls the - https://github.com/microsoft/fast-blazor , this is NuGet package for ASP.NET - Blazor, supporting FAST, but components are called fluent-ui .., is this, new, old, or what is source of it. And if something is missing, which repo is correct to open an github issue..
I'll definitely let folks know that there needs to be an official communication in a central location. That has to be done by the Fluent team.
Regarding fast-blazor, that is a Blazor library that makes the Fluent UI Web Components easier to use in Blazor apps. These are the components described above. They are aligned with the Windows 11 version of Fluent UI currently. There is work to update them to the new Fluent version that is in progress.