[DataGrid] List View #14393

cherniavskii · 2024-08-30T07:22:41Z

Preview: https://deploy-preview-14393--material-ui-x.netlify.app/x/react-data-grid/list-view/

Based on https://www.notion.so/mui-org/x-grid-Mobile-view-for-Data-Grid-b6228123c8a64352ba2c355c46e4e4ff

Also fixes #14922

TODO

Not doing

~~Row reordering~~
~~Checkbox selection~~
~~Should Export have a special treatment in mobileView?~~
~~Master detail~~

Follow up issues

mui-bot · 2024-08-30T07:26:29Z

Deploy preview: https://deploy-preview-14393--material-ui-x.netlify.app/

Updated pages:

docs/data/data-grid/list-view/list-view.md

Generated by 🚫 dangerJS against 2dd1294

michelengelen

Love that approach ... definitely worth exploring this a bit more IMO. 💙

packages/x-data-grid-generator/src/columns/employees.columns.tsx

github-actions · 2024-09-20T01:54:36Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

packages/x-data-grid/src/components/containers/GridRootStyles.ts

github-actions · 2024-10-09T14:03:43Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

Signed-off-by: Kenan Yusuf <[email protected]>

packages/x-data-grid/src/hooks/features/listView/useGridListView.tsx

packages/x-data-grid/src/models/colDef/gridColDef.ts

packages/x-data-grid/src/hooks/features/listView/useGridListView.tsx

cherniavskii · 2024-10-16T15:41:58Z

packages/x-data-grid/src/hooks/features/listView/useGridListView.tsx

What was the motivation behind having the list view column definition in the state?
I'm not saying it's wrong, but I'm curious if there are any benefits to it compared to consuming it from the prop.

In a few places, e.g. useGridVirtualScroller and useGridScroll, we need all of the visible columns. In some of those places it is expecting the visible columns to have a computedWidth property, which doesn't exist on the list column definition by itself. Before we were just calculating this at the point of rendering the cell (in GridRow.tsx), but it made sense to me that we calculate it once and store it in state so that every time we need the list of visible columns, it has the computedWidth. Perhaps there is another way to satisfy this that I didn't consider...

Co-authored-by: Andrew Cherniavskii <[email protected]> Signed-off-by: Kenan Yusuf <[email protected]>

docs/data/data-grid/list-view/list-view.md

docs/data/data-grid/list-view/ListViewAdvanced.tsx

arminmeh · 2024-10-16T19:57:08Z

docs/data/data-grid/list-view/data.ts

why not having this as a new data set in the generator?

arminmeh · 2024-10-16T20:07:24Z

docs/data/data-grid/list-view/ListView.tsx

+    return [
+      ...data.columns,
+      {
+        type: 'actions',


it is strange that using list view and list column you get actions still from the regular columns

@cherniavskii thoughts on this? I wonder if listColumn should become listColumns, and we require users to specify actions for list view and regular view separately.

I thought about this too. It totally makes sense for the actions column use case, especially for the ListViewAdvanced demo.
But should we limit the number of items in listColumns to 2? And how do we distribute the width between them? Any ideas?

We decided not to persist the actions column, and make actions part of the list view cell instead.
This way, the list view cell always takes 100% of the width.
Done in 034c355 (#14393)

arminmeh · 2024-10-16T20:22:32Z

packages/x-data-grid/src/models/colDef/gridColDef.ts

+ */
+export type GridListColDef<R extends GridValidRowModel = any, V = any, F = V> = Pick<
+  GridBaseColDef<R, V, F>,
+  'field' | 'renderCell' | 'align' | 'cellClassName' | 'display'


is there a reason why these are being picked up.
in the example only field and renderCell are being used.
is there plan to support this in a more out-of-box way where you might not need custom renderer for simple use cases?

romgrk · 2024-10-16T23:13:37Z

packages/x-data-grid/src/hooks/features/listView/useGridListView.tsx

+    });
+  };
+
+  const prevInnerWidth = React.useRef<number | null>(null);


Is it possible to initialize the ref with a number value instead? It makes the typing more simple, and keeps code paths that use this value monomorphic. -1 seems like it could be a good candidate. If this value is sometimes a float, then NaN can also be a good initial value.

packages/x-data-grid/src/hooks/features/listView/useGridListView.tsx

add mobile view demo

27a430a

cherniavskii added the component: data grid This is the name of the generic UI component, not the React module! label Aug 30, 2024

cherniavskii added 2 commits August 30, 2024 09:29

reset horizontal scroll when mobile view is enabled

ae9ecb6

row pinning

96c5230

michelengelen reviewed Sep 2, 2024

View reviewed changes

packages/x-data-grid-generator/src/columns/employees.columns.tsx Show resolved Hide resolved

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 20, 2024

oliviertassinari added mobile Targets mobile platform plan: Pro Impact at least one Pro user labels Sep 26, 2024

Merge branch 'master' into mobile-view

ac4b86e

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 1, 2024

KenanYusuf changed the title ~~[DataGrid] PoC: mobile view~~ [DataGrid] \ Oct 1, 2024

KenanYusuf changed the title ~~[DataGrid] \~~ [DataGrid] Single-Column View Oct 1, 2024

KenanYusuf changed the title ~~[DataGrid] Single-Column View~~ [DataGrid] List View Oct 3, 2024

KenanYusuf added 3 commits October 3, 2024 16:29

rename feature from mobile view to list view

5108e9c

fix cell shrinking

7cb3f6c

fix header height on listView

d15925c

KenanYusuf reviewed Oct 9, 2024

View reviewed changes

packages/x-data-grid/src/components/containers/GridRootStyles.ts Show resolved Hide resolved

update list view doc and demo

0436ddb

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 9, 2024

KenanYusuf added 3 commits October 9, 2024 15:18

fix demo

0f81c6a

make list view a pro feature

7538f12

demo updates

436e90a

KenanYusuf self-assigned this Oct 10, 2024

Merge branch 'master' into mobile-view

ecf00c9

Signed-off-by: Kenan Yusuf <[email protected]>

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 10, 2024

KenanYusuf added 2 commits October 11, 2024 08:56

fix type casting for listView prop

9b76034

fix type

fefd4ba

This was referenced Oct 16, 2024

[DataGrid] Experimental toolbar #14610

Closed

[DataGrid] Experimental toolbar #14611

Draft

fix test

483a8df

cherniavskii commented Oct 16, 2024

View reviewed changes

KenanYusuf and others added 5 commits October 16, 2024 16:47

Update packages/x-data-grid/src/models/colDef/gridColDef.ts

e323503

Co-authored-by: Andrew Cherniavskii <[email protected]> Signed-off-by: Kenan Yusuf <[email protected]>

simplify getListColumn method

70009be

avoid type casting

1d23f2f

prefix list view methods with unstable_

2646f6b

Merge remote-tracking branch 'mui/master' into mobile-view

4c88fa9

cherniavskii commented Oct 16, 2024

View reviewed changes

docs/data/data-grid/list-view/list-view.md Outdated Show resolved Hide resolved

cherniavskii commented Oct 16, 2024

View reviewed changes

docs/data/data-grid/list-view/ListViewAdvanced.tsx Outdated Show resolved Hide resolved

minor type improvements

abbebcc

arminmeh reviewed Oct 16, 2024

View reviewed changes

romgrk reviewed Oct 16, 2024

View reviewed changes

packages/x-data-grid/src/hooks/features/listView/useGridListView.tsx Outdated Show resolved Hide resolved

KenanYusuf and others added 8 commits October 17, 2024 09:03

simplify state

7cf1bf9

show advanced demo in an iframe

72a0a81

do not persist actions column in list view

034c355

Merge branch 'master' into mobile-view

4eec286

update demos

9e5f8b3

do not select row on action button click

512c70b

trigger ci

b3d1341

set maxWidth constraint

2dd1294

KenanYusuf merged commit fc6cc5f into mui:master Oct 17, 2024
18 checks passed

cherniavskii deleted the mobile-view branch October 17, 2024 13:50

k-rajat19 mentioned this pull request Oct 19, 2024

[DataGrid] Add new List view selector #15024

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] List View #14393

[DataGrid] List View #14393

cherniavskii commented Aug 30, 2024 •

edited by KenanYusuf

Loading

mui-bot commented Aug 30, 2024 •

edited

Loading

michelengelen left a comment

github-actions bot commented Sep 20, 2024

github-actions bot commented Oct 9, 2024

cherniavskii Oct 16, 2024

KenanYusuf Oct 17, 2024

arminmeh Oct 16, 2024

arminmeh Oct 16, 2024

KenanYusuf Oct 17, 2024

cherniavskii Oct 17, 2024

cherniavskii Oct 17, 2024

arminmeh Oct 16, 2024

romgrk Oct 16, 2024 •

edited

Loading

[DataGrid] List View #14393

[DataGrid] List View #14393

Conversation

cherniavskii commented Aug 30, 2024 • edited by KenanYusuf Loading

TODO

Not doing

Follow up issues

mui-bot commented Aug 30, 2024 • edited Loading

michelengelen left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 20, 2024

github-actions bot commented Oct 9, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romgrk Oct 16, 2024 • edited Loading

Choose a reason for hiding this comment

cherniavskii commented Aug 30, 2024 •

edited by KenanYusuf

Loading

mui-bot commented Aug 30, 2024 •

edited

Loading

romgrk Oct 16, 2024 •

edited

Loading