DataGrid in real life

[blendsdk]

Hi,

Are there any (Microsoft) applications using the v9 DataGrid? I have been experimenting with the DataGrid extensively and found significant differences between the v8 DetailsList and v9 DataGrid. I was wondering if we can see this component used in other applications. So far my findings:

• DataGrid does not support the onItemInvoked. This is maybe intentional!

• DataGrid rows react on click (only css changes) even if the selection mode of the rows are set to none.

• Drag and Drop is not supported by default but surprisingly easy to implement due to the solid underlying component architecture.

• Virtualization seems to the cumbersome. Most of the times we have a couple of 100 records at max and we want to scroll through. For this the virtualization solution from the examples site seems to be an overkill. I was able to achieve this by patching DataGrid's css styles.

[ling1726]

I know teams from Teams/Azure/Office that are all using DataGrid

DataGrid does not support the onItemInvoked. This is maybe intentional!

Definitely intentional - although if you see a reason to support it that we might have overlooked, let us know

DataGrid rows react on click (only css changes) even if the selection mode of the rows are set to none.

Sorry I didn't quite get this one, do you mind sharing a screenshot/gif so I can udnerstand better?

Drag and Drop is not supported by default but surprisingly easy to implement due to the solid underlying component architecture.

Yeah nothing but kudos from me on this one 👍. I don't think we've attempted with DataGrid on our end. Do you mind sharing some code? We'd be happy to show it off 😀

Virtualization seems to the cumbersome. Most of the times we have a couple of 100 records at max and we want to scroll through. For this the virtualization solution from the examples site seems to be an overkill. I was able to achieve this by patching DataGrid's css styles.

I think this is just a difference in understanding of what Virtualization is for us. In your case, it's perfectly valid to use CSS to create a scrolling container for your grid. However, virtualization for us very specifically refers to only mounting the visible rows in DOM .

[chenxinyanc]

In your case, it's perfectly valid to use CSS to create a scrolling container for your grid.

Thanks for the explanation here. I'm searching with "DataGrid scroll" and bump into this thread. In my case, I also have a small number of files needing to be rendered in the <DataGrid>. Does this also mean I'll either need to

• switch to react-data-grid-react-window and enable virtualization,
• or use CSS to enable scrolling the table vertically?

I'm asking because there seems to be some corner-cases involved if I'm going with approach 2. For example, I'll need to make the whole <DataGrid> in to a flex container, and make <DataGridBody> scrollable. This is not sufficient. As you can see, when there is a scroll bar, the column headers and cells are not aligned horizontally. (See https://stackblitz.com/edit/psq9tx?file=src%2Fexample.tsx )

I'd be appreciate it if, assuming you are not supporting non-virtualized scrolling from the beginning, you can share us some guidance on how to make the <DataGrid> vertically scrollable.

[blendsdk]

Sure, please give a couple of days to extract and make a demonstrable SandBox

[hamzamaimi]

Hi, did you extract the code? I would like to understand how did you implement the drag and drop functionality on the DataGridRow component

[alton-browsing]

@blendsdk just wondering did you ever end up posting this demonstration code anywhere?