Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGridPro] Server-side tree data support #12317

Merged
merged 107 commits into from
Jun 28, 2024
Merged
Show file tree
Hide file tree
Changes from 83 commits
Commits
Show all changes
107 commits
Select commit Hold shift + click to select a range
3d71bf4
First rough implementation of data source with tree data
MBilalShafi Mar 4, 2024
b83276c
Minor improvement
MBilalShafi Mar 4, 2024
0354ba2
Merge branch 'next' into feat-datasource
MBilalShafi Mar 10, 2024
20b56f2
Add paginationType
MBilalShafi Mar 10, 2024
82f0446
Merge branch 'next' into feat-datasource
MBilalShafi Mar 10, 2024
0a32a43
Merge branch 'next' into feat-datasource
MBilalShafi Mar 12, 2024
9695647
Merge master into feat-datasource
MBilalShafi Mar 22, 2024
5c3e69c
useDemoDataSource, useGridServerSideCache + minor improvements
MBilalShafi Apr 2, 2024
4799165
Merge 'master' into feat-datasource
MBilalShafi Apr 5, 2024
cc10806
Merge 'master' into feat-datasource
MBilalShafi Apr 17, 2024
e6eb3e5
Merge branch 'master' into feat-datasource
MBilalShafi Apr 21, 2024
e1af3b9
Run docs:api script
MBilalShafi Apr 21, 2024
cb0d5bb
Move unstable_dataSource interface to MIT package
MBilalShafi Apr 22, 2024
0c3d45e
Remove extra export
MBilalShafi Apr 22, 2024
e11117a
Initial support for defaultGroupingExpansionDepth and isGroupExpanded…
MBilalShafi Apr 29, 2024
d682a7a
Merge branch 'master' into feat-datasource
MBilalShafi Apr 29, 2024
6a7b9ac
Cache BE data
MBilalShafi Apr 29, 2024
000ca99
Move the getRowsParams logic outside the hook
MBilalShafi Apr 29, 2024
66f0d99
Minor improvement
MBilalShafi Apr 29, 2024
24bd862
Minor docs update
MBilalShafi Apr 29, 2024
ddccb00
Updates
MBilalShafi Apr 29, 2024
1618447
Improvements
MBilalShafi May 5, 2024
931831c
Improve defaultGroupingExpansionDepth fetch logic
MBilalShafi May 6, 2024
6266921
Add error handling demo
MBilalShafi May 10, 2024
d2188c0
Merge branch 'master' into feat-datasource
MBilalShafi May 10, 2024
67e0384
Add an internal cache + a few demos
MBilalShafi May 12, 2024
7f35108
Fix client-side tree-data regression
MBilalShafi May 13, 2024
0bad3b4
Add tree data error handling, add state for data source, other minor …
MBilalShafi May 13, 2024
ac7b58c
Add more demos + rename dataSourceCache
MBilalShafi May 13, 2024
909a71d
Docs improvements
MBilalShafi May 13, 2024
0a27143
Merge branch 'master' into feat-datasource
MBilalShafi May 17, 2024
2ae9563
Try msw as a network interceptor
MBilalShafi May 19, 2024
5867429
Update API url
MBilalShafi May 19, 2024
c698b09
Add the mock server to other demos on overview
MBilalShafi May 19, 2024
1213416
Add the mock server to the tree data example
MBilalShafi May 19, 2024
acc47b4
Remove msw from many demos due to limitation + some refactors
MBilalShafi May 20, 2024
1986f74
Rename loading slate file
MBilalShafi May 20, 2024
a998152
Disable client-side features with data source
MBilalShafi May 20, 2024
9d25100
Fix broken reference
MBilalShafi May 20, 2024
af771c6
Minor improvement
MBilalShafi May 20, 2024
2f30d5c
Merge branch 'master' into feat-datasource
MBilalShafi May 27, 2024
19a4952
Minor updates
MBilalShafi May 27, 2024
2593dc8
lint
MBilalShafi May 27, 2024
444f960
lint
MBilalShafi May 27, 2024
ab621a6
Add verbose mode to 'useMockServer'
MBilalShafi May 27, 2024
9c2602b
Rename isServerSide -> hasServerChildren
MBilalShafi May 28, 2024
bb73c0e
Improve NestedDataManager
MBilalShafi May 28, 2024
c072c10
Clean proptypes
MBilalShafi May 28, 2024
3b2bb68
Add enqueue to handleCellKeyDown
MBilalShafi May 28, 2024
ae378cb
Merge branch 'master' into feat-datasource
MBilalShafi Jun 3, 2024
d7ca580
Fix collapsing of nodes using keyboard
MBilalShafi Jun 3, 2024
9ac088f
Rename enqueueChildrenFetch -> queueChildrenFetch
MBilalShafi Jun 3, 2024
9054f4e
Rename serverSide in related props to dataSource
MBilalShafi Jun 3, 2024
1f496d9
Rename variables in useDataGridXProps hooks
MBilalShafi Jun 3, 2024
21b2da4
Refactor variables, files, and folders naming
MBilalShafi Jun 3, 2024
12cedf8
Rename enums
MBilalShafi Jun 3, 2024
0d9026c
Move relevant props to dataSource interface
MBilalShafi Jun 3, 2024
102a8fe
Use useLazyRef for initilization
MBilalShafi Jun 3, 2024
ba269ea
Use derived selector for row + remove extra useCallbacks
MBilalShafi Jun 3, 2024
8b56585
Use rootProps in GridTreeDataGroupingCell
MBilalShafi Jun 3, 2024
fb3c15a
Move processQueue to run on Status change
MBilalShafi Jun 5, 2024
5e93c82
Remove hasChildren in favor of getChildrenCount
MBilalShafi Jun 5, 2024
7d0d26d
Move loading container styling to root styles
MBilalShafi Jun 5, 2024
0d42b81
Remove msw and add console printing
MBilalShafi Jun 5, 2024
f06bff6
Add TTL option to the default cache
MBilalShafi Jun 5, 2024
0b185a3
Fix prop validation
MBilalShafi Jun 5, 2024
4c28dcd
Fix loading indicator not showing with less concurrent requests
MBilalShafi Jun 5, 2024
2646b36
Fix types' issues
MBilalShafi Jun 5, 2024
53be563
Merge branch 'master' into feat-datasource
MBilalShafi Jun 5, 2024
30909ad
Fix a few issues
MBilalShafi Jun 5, 2024
3576334
Improve docs a bit
MBilalShafi Jun 5, 2024
7b119fc
Resolve a few comments
MBilalShafi Jun 6, 2024
6a58259
Update filter condition
MBilalShafi Jun 6, 2024
39d241d
Fix valueParser in serverUtils
MBilalShafi Jun 7, 2024
e3f77b8
Resolve a few comments
MBilalShafi Jun 7, 2024
c5e0cb3
docs:typescript:formatted
MBilalShafi Jun 7, 2024
4997e3f
Refactor cache API
MBilalShafi Jun 10, 2024
ffa8b79
GridDataSourceDefaultCache -> GridDataSourceCacheDefault
MBilalShafi Jun 10, 2024
8b1ced8
Make behavior of isLoading consistent
MBilalShafi Jun 10, 2024
f4ad39c
Combine API methods into one
MBilalShafi Jun 10, 2024
2bb357d
Group pubic methods under unstable_dataSource namespace
MBilalShafi Jun 10, 2024
e54602a
Cleanup
MBilalShafi Jun 10, 2024
0848913
Fix nasty cache sync bug
MBilalShafi Jun 10, 2024
df9eceb
Some docs improvements
MBilalShafi Jun 10, 2024
4fd8e49
Resolve a few comments
MBilalShafi Jun 10, 2024
e048ace
Resolve a few more comments
MBilalShafi Jun 10, 2024
655cc09
Move cache to data source hook
MBilalShafi Jun 11, 2024
f304ca5
Add comment
MBilalShafi Jun 11, 2024
957c1f3
Make the CI happy
MBilalShafi Jun 11, 2024
35b221c
State update optimization
MBilalShafi Jun 11, 2024
f8f680d
Memory optimization
MBilalShafi Jun 11, 2024
c5e69bd
Docs improvement
MBilalShafi Jun 11, 2024
f175ebf
Stop preserving null in cache state
MBilalShafi Jun 11, 2024
c240baf
Remove redundant condition
MBilalShafi Jun 13, 2024
cdb40bc
Improve comment
MBilalShafi Jun 13, 2024
a022d54
Loading state optimization
MBilalShafi Jun 13, 2024
6676357
Get rid of the swr demo
MBilalShafi Jun 13, 2024
17acfc1
Move updateServerRows to private
MBilalShafi Jun 13, 2024
3e970e7
Merge branch 'master' into feat-datasource
MBilalShafi Jun 14, 2024
b3d43ed
Rename everything to use DataSource
MBilalShafi Jun 19, 2024
39e90de
Merge branch 'master' into feat-datasource
MBilalShafi Jun 19, 2024
c13d7d4
Update a leftover
MBilalShafi Jun 19, 2024
7cdec25
lint
MBilalShafi Jun 19, 2024
1304eb4
Lint
MBilalShafi Jun 25, 2024
935c9a3
Merge branch 'master' into feat-datasource
MBilalShafi Jun 25, 2024
71c37a3
Some final docs improvements
MBilalShafi Jun 28, 2024
b6fb914
Merge branch 'master' into feat-datasource
MBilalShafi Jun 28, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions docs/data/data-grid/server-side-data/ServerSideDataGrid.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useMockServer } from '@mui/x-data-grid-generator';

function ServerSideDataGrid() {
const { columns, initialState, fetchRows } = useMockServer(
{},
{ useCursorPagination: false },
);

const dataSource = React.useMemo(
() => ({
getRows: async (params) => {
const urlParams = new URLSearchParams({
paginationModel: encodeURIComponent(
JSON.stringify(params.paginationModel),
),
filterModel: encodeURIComponent(JSON.stringify(params.filterModel)),
sortModel: encodeURIComponent(JSON.stringify(params.sortModel)),
});
const getRowsResponse = await fetchRows(
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
);
return {
rows: getRowsResponse.rows,
rowCount: getRowsResponse.rowCount,
};
},
}),
[fetchRows],
);

const initialStateWithPagination = React.useMemo(
() => ({
...initialState,
pagination: {
paginationModel: { pageSize: 10, page: 0 },
rowCount: 0,
},
}),
[initialState],
);

return (
<div style={{ width: '100%', height: 400 }}>
<DataGridPro
columns={columns}
unstable_dataSource={dataSource}
pagination
initialState={initialStateWithPagination}
pageSizeOptions={[10, 20, 50]}
/>
</div>
);
}

export default ServerSideDataGrid;
57 changes: 57 additions & 0 deletions docs/data/data-grid/server-side-data/ServerSideDataGrid.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import * as React from 'react';
import { DataGridPro, GridDataSource } from '@mui/x-data-grid-pro';
import { useMockServer } from '@mui/x-data-grid-generator';

function ServerSideDataGrid() {
const { columns, initialState, fetchRows } = useMockServer(
{},
{ useCursorPagination: false },
);

const dataSource: GridDataSource = React.useMemo(
() => ({
getRows: async (params) => {
const urlParams = new URLSearchParams({
paginationModel: encodeURIComponent(
JSON.stringify(params.paginationModel),
),
filterModel: encodeURIComponent(JSON.stringify(params.filterModel)),
sortModel: encodeURIComponent(JSON.stringify(params.sortModel)),
});
const getRowsResponse = await fetchRows(
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
);
return {
rows: getRowsResponse.rows,
rowCount: getRowsResponse.rowCount,
};
},
}),
[fetchRows],
);

const initialStateWithPagination = React.useMemo(
() => ({
...initialState,
pagination: {
paginationModel: { pageSize: 10, page: 0 },
rowCount: 0,
},
}),
[initialState],
);

return (
<div style={{ width: '100%', height: 400 }}>
<DataGridPro
columns={columns}
unstable_dataSource={dataSource}
pagination
initialState={initialStateWithPagination}
pageSizeOptions={[10, 20, 50]}
/>
</div>
);
}

export default ServerSideDataGrid;
60 changes: 60 additions & 0 deletions docs/data/data-grid/server-side-data/ServerSideDataGridNoCache.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useMockServer } from '@mui/x-data-grid-generator';

const pageSizeOptions = [5, 10, 50];

const serverOptions = { useCursorPagination: false };
const dataSetOptions = {};

export default function ServerSideDataGridNoCache() {
const { fetchRows, columns, initialState } = useMockServer(
dataSetOptions,
serverOptions,
);

const dataSource = React.useMemo(
() => ({
getRows: async (params) => {
const urlParams = new URLSearchParams({
paginationModel: encodeURIComponent(
JSON.stringify(params.paginationModel),
),
filterModel: encodeURIComponent(JSON.stringify(params.filterModel)),
sortModel: encodeURIComponent(JSON.stringify(params.sortModel)),
});
const getRowsResponse = await fetchRows(
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
);
return {
rows: getRowsResponse.rows,
rowCount: getRowsResponse.rowCount,
};
},
}),
[fetchRows],
);

const initialStateWithPagination = React.useMemo(
() => ({
...initialState,
pagination: {
paginationModel: { pageSize: 10, page: 0 },
},
}),
[initialState],
);

return (
<div style={{ height: 400, width: '100%' }}>
<DataGridPro
initialState={initialStateWithPagination}
columns={columns}
unstable_dataSource={dataSource}
unstable_dataSourceCache={null}
pagination
pageSizeOptions={pageSizeOptions}
/>
</div>
);
}
60 changes: 60 additions & 0 deletions docs/data/data-grid/server-side-data/ServerSideDataGridNoCache.tsx
romgrk marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import * as React from 'react';
import { DataGridPro, GridDataSource } from '@mui/x-data-grid-pro';
import { useMockServer } from '@mui/x-data-grid-generator';

const pageSizeOptions = [5, 10, 50];

const serverOptions = { useCursorPagination: false };
const dataSetOptions = {};

export default function ServerSideDataGridNoCache() {
const { fetchRows, columns, initialState } = useMockServer(
dataSetOptions,
serverOptions,
);

const dataSource: GridDataSource = React.useMemo(
() => ({
getRows: async (params) => {
const urlParams = new URLSearchParams({
paginationModel: encodeURIComponent(
JSON.stringify(params.paginationModel),
),
filterModel: encodeURIComponent(JSON.stringify(params.filterModel)),
sortModel: encodeURIComponent(JSON.stringify(params.sortModel)),
});
const getRowsResponse = await fetchRows(
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
);
return {
rows: getRowsResponse.rows,
rowCount: getRowsResponse.rowCount,
};
},
}),
[fetchRows],
);

const initialStateWithPagination = React.useMemo(
() => ({
...initialState,
pagination: {
paginationModel: { pageSize: 10, page: 0 },
},
}),
[initialState],
);

return (
<div style={{ height: 400, width: '100%' }}>
<DataGridPro
initialState={initialStateWithPagination}
columns={columns}
unstable_dataSource={dataSource}
unstable_dataSourceCache={null}
pagination
pageSizeOptions={pageSizeOptions}
/>
</div>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<DataGridPro
initialState={initialStateWithPagination}
columns={columns}
unstable_dataSource={dataSource}
unstable_dataSourceCache={null}
pagination
pageSizeOptions={pageSizeOptions}
/>
60 changes: 60 additions & 0 deletions docs/data/data-grid/server-side-data/ServerSideDataGridTTL.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import * as React from 'react';
import { DataGridPro, GridDataSourceCacheDefault } from '@mui/x-data-grid-pro';
import { useMockServer } from '@mui/x-data-grid-generator';

const lowTTLCache = new GridDataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 seconds

function ServerSideDataGridTTL() {
const { columns, initialState, fetchRows } = useMockServer(
{},
{ useCursorPagination: false },
);

const dataSource = React.useMemo(
() => ({
getRows: async (params) => {
const urlParams = new URLSearchParams({
paginationModel: encodeURIComponent(
JSON.stringify(params.paginationModel),
),
filterModel: encodeURIComponent(JSON.stringify(params.filterModel)),
sortModel: encodeURIComponent(JSON.stringify(params.sortModel)),
});
const getRowsResponse = await fetchRows(
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
);
return {
rows: getRowsResponse.rows,
rowCount: getRowsResponse.rowCount,
};
},
}),
[fetchRows],
);

const initialStateWithPagination = React.useMemo(
() => ({
...initialState,
pagination: {
paginationModel: { pageSize: 10, page: 0 },
rowCount: 0,
},
}),
[initialState],
);

return (
<div style={{ width: '100%', height: 400 }}>
<DataGridPro
columns={columns}
unstable_dataSource={dataSource}
unstable_dataSourceCache={lowTTLCache}
pagination
initialState={initialStateWithPagination}
pageSizeOptions={[10, 20, 50]}
/>
</div>
);
}

export default ServerSideDataGridTTL;
64 changes: 64 additions & 0 deletions docs/data/data-grid/server-side-data/ServerSideDataGridTTL.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import * as React from 'react';
import {
DataGridPro,
GridDataSource,
GridDataSourceCacheDefault,
} from '@mui/x-data-grid-pro';
import { useMockServer } from '@mui/x-data-grid-generator';

const lowTTLCache = new GridDataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 seconds

function ServerSideDataGridTTL() {
const { columns, initialState, fetchRows } = useMockServer(
{},
{ useCursorPagination: false },
);

const dataSource: GridDataSource = React.useMemo(
() => ({
getRows: async (params) => {
const urlParams = new URLSearchParams({
paginationModel: encodeURIComponent(
JSON.stringify(params.paginationModel),
),
filterModel: encodeURIComponent(JSON.stringify(params.filterModel)),
sortModel: encodeURIComponent(JSON.stringify(params.sortModel)),
});
const getRowsResponse = await fetchRows(
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
);
return {
rows: getRowsResponse.rows,
rowCount: getRowsResponse.rowCount,
};
},
}),
[fetchRows],
);

const initialStateWithPagination = React.useMemo(
() => ({
...initialState,
pagination: {
paginationModel: { pageSize: 10, page: 0 },
rowCount: 0,
},
}),
[initialState],
);

return (
<div style={{ width: '100%', height: 400 }}>
<DataGridPro
columns={columns}
unstable_dataSource={dataSource}
unstable_dataSourceCache={lowTTLCache}
pagination
initialState={initialStateWithPagination}
pageSizeOptions={[10, 20, 50]}
/>
</div>
);
}

export default ServerSideDataGridTTL;
Loading