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.

Sign up for GitHub

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

[docs] Use Base UI Portal for the quick filter recipe #10188

Merged
merged 3 commits into from
Sep 5, 2023
Merged

[docs] Use Base UI Portal for the quick filter recipe #10188

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ba39ee1
Use Base UI Portal
DanailH Aug 31, 2023
df5546a
remove preview
DanailH Aug 31, 2023
19c240d
Update docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid…
DanailH Sep 5, 2023
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
9 changes: 4 additions & 5 deletions docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Portal } from '@mui/base/Portal';
MBilalShafi marked this conversation as resolved.
Show resolved Hide resolved
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
Expand All @@ -8,10 +8,9 @@ import { useDemoData } from '@mui/x-data-grid-generator';
function MyCustomToolbar(props) {
return (
<React.Fragment>
{ReactDOM.createPortal(
<GridToolbarQuickFilter />,
document.getElementById('filter-panel'),
)}
<Portal container={() => document.getElementById('filter-panel')}>
Copy link
Member

@MBilalShafi MBilalShafi Sep 4, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is using the function-based selector needed here, could we directly use the selector here?

Suggested change
<Portal container={() => document.getElementById('filter-panel')}>
<Portal container={document.getElementById('filter-panel')}>

As per docs:
image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would break during server side rendering, I guess.

<GridToolbarQuickFilter />
</Portal>
<GridToolbar {...props} />
</React.Fragment>
);
Expand Down
9 changes: 4 additions & 5 deletions docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Portal } from '@mui/base/Portal';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
Expand All @@ -8,10 +8,9 @@ import { useDemoData } from '@mui/x-data-grid-generator';
function MyCustomToolbar(props: any) {
return (
<React.Fragment>
{ReactDOM.createPortal(
<GridToolbarQuickFilter />,
document.getElementById('filter-panel')!,
)}
<Portal container={() => document.getElementById('filter-panel')}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have doubt about the types in https://github.com/mui/material-ui/blob/ffa4751a513cee56a8cd069c788a209d8beae7c7/packages/mui-base/src/Portal/Portal.types.ts#L15. This feels so strange. Why should it allow <Portal container={() => null}>

Suggested change
<Portal container={() => document.getElementById('filter-panel')}>
<Portal container={() => document.getElementById('filter-panel')!}>

<GridToolbarQuickFilter />
</Portal>
<GridToolbar {...props} />
</React.Fragment>
);
Expand Down
22 changes: 22 additions & 0 deletions docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<Grid container spacing={2}>
<Grid item>
<Box id="filter-panel" />
</Grid>
<Grid item style={{ height: 400, width: '100%' }}>
<DataGrid
{...data}
columns={columns}
slots={{
toolbar: MyCustomToolbar,
}}
initialState={{
filter: {
filterModel: {
items: [],
quickFilterExcludeHiddenColumns: true,
},
},
}}
/>
</Grid>
</Grid>