-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[DataGridPro] Autosize columns (#10180)
Signed-off-by: Rom Grk <[email protected]> Co-authored-by: Olivier Tassinari <[email protected]>
- Loading branch information
1 parent
0666b40
commit c0796c5
Showing
51 changed files
with
1,358 additions
and
351 deletions.
There are no files selected for viewing
129 changes: 129 additions & 0 deletions
129
docs/data/data-grid/column-dimensions/ColumnAutosizing.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| import * as React from 'react'; | ||
| import Button from '@mui/material/Button'; | ||
| import Checkbox from '@mui/material/Checkbox'; | ||
| import FormControlLabel from '@mui/material/FormControlLabel'; | ||
| import Rating from '@mui/material/Rating'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import TextField from '@mui/material/TextField'; | ||
| import { useGridApiRef } from '@mui/x-data-grid'; | ||
| import { DataGridPro, DEFAULT_GRID_AUTOSIZE_OPTIONS } from '@mui/x-data-grid-pro'; | ||
| import { randomRating, randomTraderName } from '@mui/x-data-grid-generator'; | ||
|
|
||
| function renderRating(params) { | ||
| return <Rating readOnly value={params.value} />; | ||
| } | ||
|
|
||
| function useData(length) { | ||
| return React.useMemo(() => { | ||
| const names = [ | ||
| 'Nike', | ||
| 'Adidas', | ||
| 'Puma', | ||
| 'Reebok', | ||
| 'Fila', | ||
| 'Lululemon Athletica Clothing', | ||
| 'Varley', | ||
| ]; | ||
|
|
||
| const rows = Array.from({ length }).map((_, id) => ({ | ||
| id, | ||
| brand: names[id % names.length], | ||
| rep: randomTraderName(), | ||
| rating: randomRating(), | ||
| })); | ||
|
|
||
| const columns = [ | ||
| { field: 'id', headerName: 'Brand ID' }, | ||
| { field: 'brand', headerName: 'Brand name' }, | ||
| { field: 'rep', headerName: 'Representative' }, | ||
| { field: 'rating', headerName: 'Rating', renderCell: renderRating }, | ||
| ]; | ||
|
|
||
| return { rows, columns }; | ||
| }, [length]); | ||
| } | ||
|
|
||
| export default function ColumnAutosizing() { | ||
| const apiRef = useGridApiRef(); | ||
| const data = useData(100); | ||
|
|
||
| const [includeHeaders, setIncludeHeaders] = React.useState( | ||
| DEFAULT_GRID_AUTOSIZE_OPTIONS.includeHeaders, | ||
| ); | ||
| const [includeOutliers, setExcludeOutliers] = React.useState( | ||
| DEFAULT_GRID_AUTOSIZE_OPTIONS.includeOutliers, | ||
| ); | ||
| const [outliersFactor, setOutliersFactor] = React.useState( | ||
| String(DEFAULT_GRID_AUTOSIZE_OPTIONS.outliersFactor), | ||
| ); | ||
| const [expand, setExpand] = React.useState(DEFAULT_GRID_AUTOSIZE_OPTIONS.expand); | ||
|
|
||
| const autosizeOptions = { | ||
| includeHeaders, | ||
| includeOutliers, | ||
| outliersFactor: Number.isNaN(parseFloat(outliersFactor)) | ||
| ? 1 | ||
| : parseFloat(outliersFactor), | ||
| expand, | ||
| }; | ||
|
|
||
| return ( | ||
| <div style={{ width: '100%' }}> | ||
| <Stack | ||
| spacing={2} | ||
| direction="row" | ||
| alignItems="center" | ||
| sx={{ marginBottom: '1em' }} | ||
| > | ||
| <Button | ||
| variant="outlined" | ||
| onClick={() => apiRef.current.autosizeColumns(autosizeOptions)} | ||
| > | ||
| Autosize columns | ||
| </Button> | ||
| <FormControlLabel | ||
| control={ | ||
| <Checkbox | ||
| checked={includeHeaders} | ||
| onChange={(ev) => setIncludeHeaders(ev.target.checked)} | ||
| /> | ||
| } | ||
| label="Include headers" | ||
| /> | ||
| <FormControlLabel | ||
| control={ | ||
| <Checkbox | ||
| checked={includeOutliers} | ||
| onChange={(event) => setExcludeOutliers(event.target.checked)} | ||
| /> | ||
| } | ||
| label="Include outliers" | ||
| /> | ||
| <TextField | ||
| size="small" | ||
| label="Outliers factor" | ||
| value={outliersFactor} | ||
| onChange={(ev) => setOutliersFactor(ev.target.value)} | ||
| sx={{ width: '12ch' }} | ||
| /> | ||
| <FormControlLabel | ||
| control={ | ||
| <Checkbox | ||
| checked={expand} | ||
| onChange={(ev) => setExpand(ev.target.checked)} | ||
| /> | ||
| } | ||
| label="Expand" | ||
| /> | ||
| </Stack> | ||
| <div style={{ height: 400, width: '100%' }}> | ||
| <DataGridPro | ||
| apiRef={apiRef} | ||
| density="compact" | ||
| {...data} | ||
| autosizeOptions={autosizeOptions} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
132 changes: 132 additions & 0 deletions
132
docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| import * as React from 'react'; | ||
| import Button from '@mui/material/Button'; | ||
| import Checkbox from '@mui/material/Checkbox'; | ||
| import FormControlLabel from '@mui/material/FormControlLabel'; | ||
| import Rating from '@mui/material/Rating'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import TextField from '@mui/material/TextField'; | ||
| import { useGridApiRef } from '@mui/x-data-grid'; | ||
| import { | ||
| DataGridPro, | ||
| GridApiPro, | ||
| DEFAULT_GRID_AUTOSIZE_OPTIONS, | ||
| } from '@mui/x-data-grid-pro'; | ||
| import { randomRating, randomTraderName } from '@mui/x-data-grid-generator'; | ||
|
|
||
| function renderRating(params: any) { | ||
| return <Rating readOnly value={params.value} />; | ||
| } | ||
|
|
||
| function useData(length: number) { | ||
| return React.useMemo(() => { | ||
| const names = [ | ||
| 'Nike', | ||
| 'Adidas', | ||
| 'Puma', | ||
| 'Reebok', | ||
| 'Fila', | ||
| 'Lululemon Athletica Clothing', | ||
| 'Varley', | ||
| ]; | ||
| const rows = Array.from({ length }).map((_, id) => ({ | ||
| id, | ||
| brand: names[id % names.length], | ||
| rep: randomTraderName(), | ||
| rating: randomRating(), | ||
| })); | ||
|
|
||
| const columns = [ | ||
| { field: 'id', headerName: 'Brand ID' }, | ||
| { field: 'brand', headerName: 'Brand name' }, | ||
| { field: 'rep', headerName: 'Representative' }, | ||
| { field: 'rating', headerName: 'Rating', renderCell: renderRating }, | ||
| ]; | ||
|
|
||
| return { rows, columns }; | ||
| }, [length]); | ||
| } | ||
|
|
||
| export default function ColumnAutosizing() { | ||
| const apiRef = useGridApiRef<GridApiPro>(); | ||
| const data = useData(100); | ||
|
|
||
| const [includeHeaders, setIncludeHeaders] = React.useState( | ||
| DEFAULT_GRID_AUTOSIZE_OPTIONS.includeHeaders, | ||
| ); | ||
| const [includeOutliers, setExcludeOutliers] = React.useState( | ||
| DEFAULT_GRID_AUTOSIZE_OPTIONS.includeOutliers, | ||
| ); | ||
| const [outliersFactor, setOutliersFactor] = React.useState( | ||
| String(DEFAULT_GRID_AUTOSIZE_OPTIONS.outliersFactor), | ||
| ); | ||
| const [expand, setExpand] = React.useState(DEFAULT_GRID_AUTOSIZE_OPTIONS.expand); | ||
|
|
||
| const autosizeOptions = { | ||
| includeHeaders, | ||
| includeOutliers, | ||
| outliersFactor: Number.isNaN(parseFloat(outliersFactor)) | ||
| ? 1 | ||
| : parseFloat(outliersFactor), | ||
| expand, | ||
| }; | ||
|
|
||
| return ( | ||
| <div style={{ width: '100%' }}> | ||
| <Stack | ||
| spacing={2} | ||
| direction="row" | ||
| alignItems="center" | ||
| sx={{ marginBottom: '1em' }} | ||
| > | ||
| <Button | ||
| variant="outlined" | ||
| onClick={() => apiRef.current.autosizeColumns(autosizeOptions)} | ||
| > | ||
| Autosize columns | ||
| </Button> | ||
| <FormControlLabel | ||
| control={ | ||
| <Checkbox | ||
| checked={includeHeaders} | ||
| onChange={(ev) => setIncludeHeaders(ev.target.checked)} | ||
| /> | ||
| } | ||
| label="Include headers" | ||
| /> | ||
| <FormControlLabel | ||
| control={ | ||
| <Checkbox | ||
| checked={includeOutliers} | ||
| onChange={(event) => setExcludeOutliers(event.target.checked)} | ||
| /> | ||
| } | ||
| label="Include outliers" | ||
| /> | ||
| <TextField | ||
| size="small" | ||
| label="Outliers factor" | ||
| value={outliersFactor} | ||
| onChange={(ev) => setOutliersFactor(ev.target.value)} | ||
| sx={{ width: '12ch' }} | ||
| /> | ||
| <FormControlLabel | ||
| control={ | ||
| <Checkbox | ||
| checked={expand} | ||
| onChange={(ev) => setExpand(ev.target.checked)} | ||
| /> | ||
| } | ||
| label="Expand" | ||
| /> | ||
| </Stack> | ||
| <div style={{ height: 400, width: '100%' }}> | ||
| <DataGridPro | ||
| apiRef={apiRef} | ||
| density="compact" | ||
| {...data} | ||
| autosizeOptions={autosizeOptions} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.