[DataGridPro] Add data source interface and basic documentation #10543

MBilalShafi · 2023-10-02T11:16:23Z

I have followed (at least) the PR section of the contributing guide.

Part of #8179

mui-bot · 2023-10-02T11:20:49Z

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

Updated pages:

Generated by 🚫 dangerJS against 7d3413b

MBilalShafi · 2023-10-02T15:38:25Z

docs/data/data-grid/server-side/datasource.md

+
+By default, the data grid will use the tanstack react-query library to cache the data. A `QueryClient` is created internally and used with the data source. You can also pass your own instance of `QueryClient` in order to have access to the cached data outside the data grid. You can also use this client to invalidate the cache when you need to.
+
+In order to access the current keys for the `QueryClient`, you can wrap the application into the `DataSourceProvider`.


Example: https://codesandbox.io/s/datagridpro-basic-forked-49zpsy?file=/src/App.tsx

Nice, do you think you could use the quick filtering in this demo instead?

I think yes, by listening to the onFilterModelUpdate and catching the filterModel.quickFilterValues in the handler.

Just for reference, even if we don't use tanstack query or some other external library, cache sharing should be possible with our internal cache too with the same basic principle. Instead of the cache available in the user's scope, the cache could be made accessible by apiRef. (like apiRef.current.serverCache for example)

cherniavskii

Looks like a good start! 👍🏻

docs/data/data-grid/server-side-data/index.md

packages/grid/x-data-grid-pro/src/models/dataSource.ts

docs/data/data-grid/server-side-data/index.md

MBilalShafi

Some final refinements

docs/data/data-grid/server-side-data/index.md

Signed-off-by: Bilal Shafi <[email protected]>

oliviertassinari

Great to see this page.

A quick round of review

oliviertassinari · 2023-11-15T17:34:16Z

docs/data/data-grid/server-side-data/aggregation.md

@@ -0,0 +1,15 @@
+---
+title: React Server-side row grouping


Suggested change

title: React Server-side row grouping

title: React Server-side row aggregation

oliviertassinari · 2023-11-15T17:34:39Z

docs/data/data-grid/server-side-data/index.md

+
+# Data Grid - Server-side data
+
+<p class="description">The data grid server-side data</p>


Suggested change

The data grid server-side data

The data grid server-side data.

oliviertassinari · 2023-11-15T17:43:38Z

docs/data/data-grid/server-side-data/index.md

+    - `updateRow` is optional
+
+    `getRows` will be used by the grid to fetch data for the current page or children for the current parent group
+    It may return a `rowCount` to update the total count of rows in the grid


Suggested change

It may return a `rowCount` to update the total count of rows in the grid

It may return a `rowCount` to update the total count of rows in the grid.

oliviertassinari · 2023-11-15T17:43:55Z

docs/data/data-grid/server-side-data/index.md

+  sortModel: GridSortModel;
+  filterModel: GridFilterModel;
+  /**
+   * Alternate to `start` and `end`, maps to `GridPaginationModel` interface


Suggested change

* Alternate to `start` and `end`, maps to `GridPaginationModel` interface

* Alternate to `start` and `end`, maps to `GridPaginationModel` interface.

oliviertassinari · 2023-11-15T17:48:11Z

docs/data/data-grid/server-side-data/index.md

+<DataGridPro
+  columns={columns}
+  dataSource={customDataSource} // this automatically means `sortingMode="server"`, `filterMode="server"`, `paginationMode="server"`
+/>


It overflows, it's hard to process:

Suggested change

<DataGridPro

columns={columns}

dataSource={customDataSource} // this automatically means `sortingMode="server"`, `filterMode="server"`, `paginationMode="server"`

/>

<DataGridPro

columns={columns}

{/*

This automatically means:

`sortingMode="server"`

`filterMode="server"`

`paginationMode="server"`

*/}

dataSource={customDataSource}

/>

oliviertassinari · 2023-11-15T17:49:53Z

docs/data/data-grid/server-side-data/index.md

+   * Array of keys returned by `getGroupKey` of all the parent rows until the row for which the data is requested
+   * `getGroupKey` prop must be implemented to use this
+   * Useful for `treeData` and `rowGrouping` only


Overflowing in the page

Suggested change

* Array of keys returned by `getGroupKey` of all the parent rows until the row for which the data is requested

* `getGroupKey` prop must be implemented to use this

* Useful for `treeData` and `rowGrouping` only

* Array of keys returned by `getGroupKey` of all the parent rows until the row for

* which the data is requested.

* `getGroupKey` prop must be implemented to use this.

* This prop is only useful for `treeData` and `rowGrouping`.

oliviertassinari · 2023-11-15T17:51:29Z

docs/data/data-grid/server-side-data/index.md

+The data grid server-side data source has an initial set of required methods that you need to implement. The data grid will call these methods internally when the data is required for a specific page.
+
+```tsx
+interface DataSource {


We miss the prefix to make this type unique within all MUI products, no?

Suggested change

interface DataSource {

interface GridDataSource {

x the other types

Yep, nice catch, thanks!

oliviertassinari · 2023-11-15T18:04:34Z

docs/data/data-grid/server-side-data/aggregation.md

+title: React Server-side row grouping
+---
+
+# Data Grid - Server-side aggregation 🚧


Missing plan

Suggested change

# Data Grid - Server-side aggregation 🚧

# Data Grid - Server-side aggregation 🚧[](/x/introduction/licensing/#premium-plan 'Premium plan')

``

oliviertassinari · 2023-11-15T18:05:10Z

docs/data/pages.ts

+      {
+        pathname: '/x/react-data-grid/server-side-data-group',
+        title: 'Server-side data 🚧',
+        plan: 'pro',


Are we sure about this one?

Suggested change

plan: 'pro',

I can't find the Notion discussion about it but I had assumed that it's mostly upsides to make this match the features used in the data grid, since pagination is MIT, this would span all the plans.

This is an interesting discussion. 👍

The decision was to not support the MIT features (i.e filtering, sorting, and pagination) with the data source (see existing server-side features section here), and I tried to cover under this section only those sub-sections that correspond to the server-side features bound to the data source. You are right, it might be confusing though as most users would think all the server-side features (including MIT) might be covered in the server-side data section.

Two possibilities we could go with:

Go with the current assumption and alias the MIT corresponding features to the original sections and vice versa like this for example:

Server-side filtering (MIT) linked to https://mui.com/x/react-data-grid/filtering/server-side/

Server-side sorting (MIT) linked to https://mui.com/x/react-data-grid/sorting/#server-side-sorting

Server-side pagination (MIT) linked to https://mui.com/x/react-data-grid/pagination/#server-side-pagination

Or we could move all the server-side features (MIT and Pro) under the server-side data root section, create new sub-sections for filtering, sorting, and pagination, and have them cover both MIT (without data source) and Pro (with data source) sub-sections. The original sections for filtering, sorting, and pagination (linked in point no. 1) will then either have to be removed or aliased to the new sections.

What do you think?

@mui/xgrid Feel free to hop in

[DataGridPro] Datasource interface

0dba87e

MBilalShafi added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request feature: Server integration Better integration with backends, e.g. data source labels Oct 2, 2023

MBilalShafi commented Oct 2, 2023

View reviewed changes

Improve a bit

b3ed720

cherniavskii reviewed Oct 11, 2023

View reviewed changes

romgrk reviewed Oct 11, 2023

View reviewed changes

packages/grid/x-data-grid-pro/src/models/dataSource.ts Show resolved Hide resolved

MBilalShafi commented Oct 11, 2023

View reviewed changes

packages/grid/x-data-grid-pro/src/models/dataSource.ts Show resolved Hide resolved

romgrk reviewed Oct 11, 2023

View reviewed changes

docs/data/data-grid/server-side-data/index.md Outdated Show resolved Hide resolved

Update a bit the documentation

fa3f3fc

MBilalShafi mentioned this pull request Oct 31, 2023

[data grid] Improve Server-side support with new data source #8179

Open

9 tasks

MBilalShafi added 2 commits November 1, 2023 15:47

Add more pages and refinement

24e6a2a

Merge branch 'master' into datasource-interface

46bde47

MBilalShafi changed the title ~~WIP [DataGridPro] Datasource interface~~ [DataGridPro] Datasource interface Nov 1, 2023

MBilalShafi added the typescript label Nov 1, 2023

MBilalShafi changed the title ~~[DataGridPro] Datasource interface~~ [DataGridPro] Add data source interface and initiate documentation Nov 1, 2023

MBilalShafi changed the title ~~[DataGridPro] Add data source interface and initiate documentation~~ [DataGridPro] Add data source interface and basic documentation Nov 1, 2023

MBilalShafi added 2 commits November 1, 2023 16:03

Fix markdownlint

03845e5

Improvement

7af3217

MBilalShafi marked this pull request as ready for review November 1, 2023 11:16

MBilalShafi requested review from romgrk and cherniavskii November 1, 2023 11:16

michelengelen changed the base branch from master to next November 6, 2023 14:21

cherniavskii approved these changes Nov 6, 2023

View reviewed changes

MBilalShafi commented Nov 7, 2023

View reviewed changes

Apply suggestions from code review

7d3413b

Signed-off-by: Bilal Shafi <[email protected]>

MBilalShafi changed the base branch from next to master November 7, 2023 09:44

MBilalShafi merged commit 98debeb into mui:master Nov 7, 2023
5 checks passed

MBilalShafi deleted the datasource-interface branch November 7, 2023 10:05

MBilalShafi mentioned this pull request Nov 9, 2023

[release] v7.0.0-alpha.0 #10966

Merged

15 tasks

oliviertassinari reviewed Nov 15, 2023

View reviewed changes

MBilalShafi added the feature: data source label Jul 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGridPro] Add data source interface and basic documentation #10543

[DataGridPro] Add data source interface and basic documentation #10543

MBilalShafi commented Oct 2, 2023 •

edited

Loading

mui-bot commented Oct 2, 2023 •

edited

Loading

MBilalShafi Oct 2, 2023

cherniavskii Oct 11, 2023

MBilalShafi Oct 11, 2023 •

edited

Loading

MBilalShafi Oct 31, 2023 •

edited

Loading

cherniavskii left a comment

MBilalShafi left a comment

oliviertassinari left a comment

oliviertassinari Nov 15, 2023

oliviertassinari Nov 15, 2023

oliviertassinari Nov 15, 2023

oliviertassinari Nov 15, 2023

oliviertassinari Nov 15, 2023

oliviertassinari Nov 15, 2023

oliviertassinari Nov 15, 2023

MBilalShafi Nov 20, 2023

oliviertassinari Nov 15, 2023 •

edited

Loading

oliviertassinari Nov 15, 2023 •

edited

Loading

MBilalShafi Nov 20, 2023


		By default, the data grid will use the tanstack react-query library to cache the data. A `QueryClient` is created internally and used with the data source. You can also pass your own instance of `QueryClient` in order to have access to the cached data outside the data grid. You can also use this client to invalidate the cache when you need to.

		In order to access the current keys for the `QueryClient`, you can wrap the application into the `DataSourceProvider`.

	title: React Server-side row grouping
	title: React Server-side row aggregation


		# Data Grid - Server-side data

		<p class="description">The data grid server-side data</p>

	It may return a `rowCount` to update the total count of rows in the grid
	It may return a `rowCount` to update the total count of rows in the grid.

	* Alternate to `start` and `end`, maps to `GridPaginationModel` interface
	* Alternate to `start` and `end`, maps to `GridPaginationModel` interface.

	# Data Grid - Server-side aggregation 🚧
	# Data Grid - Server-side aggregation 🚧[<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
	``

[DataGridPro] Add data source interface and basic documentation #10543

[DataGridPro] Add data source interface and basic documentation #10543

Conversation

MBilalShafi commented Oct 2, 2023 • edited Loading

mui-bot commented Oct 2, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MBilalShafi Oct 11, 2023 • edited Loading

Choose a reason for hiding this comment

MBilalShafi Oct 31, 2023 • edited Loading

Choose a reason for hiding this comment

cherniavskii left a comment

Choose a reason for hiding this comment

MBilalShafi left a comment

Choose a reason for hiding this comment

oliviertassinari left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Nov 15, 2023 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Nov 15, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MBilalShafi commented Oct 2, 2023 •

edited

Loading

mui-bot commented Oct 2, 2023 •

edited

Loading

MBilalShafi Oct 11, 2023 •

edited

Loading

MBilalShafi Oct 31, 2023 •

edited

Loading

oliviertassinari Nov 15, 2023 •

edited

Loading

oliviertassinari Nov 15, 2023 •

edited

Loading