-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
35 changed files
with
1,703 additions
and
54 deletions.
There are no files selected for viewing
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
Large diffs are not rendered by default.
Oops, something went wrong.
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,56 @@ | ||
| { | ||
| "name": "GridEditRowApi", | ||
| "description": "The editing API interface that is available in the grid `apiRef`.", | ||
| "properties": [ | ||
| { | ||
| "name": "commitCellChange", | ||
| "description": "Updates the field at the given id with the value stored in the edit row model.", | ||
| "type": "(params: GridCommitCellChangeParams, event?: any) => boolean" | ||
| }, | ||
| { | ||
| "name": "commitRowChange", | ||
| "description": "Updates the row at the given id with the values stored in the edit row model.", | ||
| "type": "(id: GridRowId, event?: any) => boolean" | ||
| }, | ||
| { | ||
| "name": "getCellMode", | ||
| "description": "Gets the mode of a cell.", | ||
| "type": "(id: GridRowId, field: string) => GridCellMode" | ||
| }, | ||
| { | ||
| "name": "getEditRowsModel", | ||
| "description": "Gets the edit rows model of the grid.", | ||
| "type": "() => GridEditRowsModel" | ||
| }, | ||
| { | ||
| "name": "getRowMode", | ||
| "description": "Gets the mode of a row.", | ||
| "type": "(id: GridRowId) => GridRowMode" | ||
| }, | ||
| { | ||
| "name": "isCellEditable", | ||
| "description": "Controls if a cell is editable.", | ||
| "type": "(params: GridCellParams) => boolean" | ||
| }, | ||
| { | ||
| "name": "setCellMode", | ||
| "description": "Sets the mode of a cell.", | ||
| "type": "(id: GridRowId, field: string, mode: GridCellMode) => void" | ||
| }, | ||
| { | ||
| "name": "setEditCellValue", | ||
| "description": "Sets the value of the edit cell.\nCommonly used inside the edit cell component.", | ||
| "type": "(params: GridEditCellValueParams, event?: SyntheticEvent<Element, Event>) => void" | ||
| }, | ||
| { | ||
| "name": "setEditRowsModel", | ||
| "description": "Set sthe edit rows model of the grid.", | ||
| "type": "(model: GridEditRowsModel) => void" | ||
| }, | ||
| { | ||
| "name": "setRowMode", | ||
| "description": "Sets the mode of a row.", | ||
| "type": "(id: GridRowId, mode: GridRowMode) => void" | ||
| } | ||
| ] | ||
| } |
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
73 changes: 73 additions & 0 deletions
73
docs/src/pages/components/data-grid/editing/BasicRowEditingGrid.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,73 @@ | ||
| /* eslint-disable @typescript-eslint/no-use-before-define */ | ||
| import * as React from 'react'; | ||
| import { DataGrid } from '@material-ui/data-grid'; | ||
| import { | ||
| randomCreatedDate, | ||
| randomTraderName, | ||
| randomUpdatedDate, | ||
| } from '@material-ui/x-grid-data-generator'; | ||
|
|
||
| export default function BasicRowEditingGrid() { | ||
| return ( | ||
| <div style={{ height: 300, width: '100%' }}> | ||
| <DataGrid editMode="row" rows={rows} columns={columns} /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const columns = [ | ||
| { field: 'name', headerName: 'Name', width: 180, editable: true }, | ||
| { field: 'age', headerName: 'Age', type: 'number', editable: true }, | ||
| { | ||
| field: 'dateCreated', | ||
| headerName: 'Date Created', | ||
| type: 'date', | ||
| width: 180, | ||
| editable: true, | ||
| }, | ||
| { | ||
| field: 'lastLogin', | ||
| headerName: 'Last Login', | ||
| type: 'dateTime', | ||
| width: 220, | ||
| editable: true, | ||
| }, | ||
| ]; | ||
|
|
||
| const rows = [ | ||
| { | ||
| id: 1, | ||
| name: randomTraderName(), | ||
| age: 25, | ||
| dateCreated: randomCreatedDate(), | ||
| lastLogin: randomUpdatedDate(), | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: randomTraderName(), | ||
| age: 36, | ||
| dateCreated: randomCreatedDate(), | ||
| lastLogin: randomUpdatedDate(), | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: randomTraderName(), | ||
| age: 19, | ||
| dateCreated: randomCreatedDate(), | ||
| lastLogin: randomUpdatedDate(), | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: randomTraderName(), | ||
| age: 28, | ||
| dateCreated: randomCreatedDate(), | ||
| lastLogin: randomUpdatedDate(), | ||
| }, | ||
| { | ||
| id: 5, | ||
| name: randomTraderName(), | ||
| age: 23, | ||
| dateCreated: randomCreatedDate(), | ||
| lastLogin: randomUpdatedDate(), | ||
| }, | ||
| ]; |
73 changes: 73 additions & 0 deletions
73
docs/src/pages/components/data-grid/editing/BasicRowEditingGrid.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,73 @@ | ||
| /* eslint-disable @typescript-eslint/no-use-before-define */ | ||
| import * as React from 'react'; | ||
| import { DataGrid, GridColumns, GridRowsProp } from '@material-ui/data-grid'; | ||
| import { | ||
| randomCreatedDate, | ||
| randomTraderName, | ||
| randomUpdatedDate, | ||
| } from '@material-ui/x-grid-data-generator'; | ||
|
|
||
| export default function BasicRowEditingGrid() { | ||
| return ( | ||
| <div style={{ height: 300, width: '100%' }}> | ||
| <DataGrid editMode="row" rows={rows} columns={columns} /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const columns: GridColumns = [ | ||
| { field: 'name', headerName: 'Name', width: 180, editable: true }, | ||
| { field: 'age', headerName: 'Age', type: 'number', editable: true }, | ||
| { | ||
| field: 'dateCreated', | ||
| headerName: 'Date Created', | ||
| type: 'date', | ||
| width: 180, | ||
| editable: true, | ||
| }, | ||
| { | ||
| field: 'lastLogin', | ||
| headerName: 'Last Login', | ||
| type: 'dateTime', | ||
| width: 220, | ||
| editable: true, | ||
| }, | ||
| ]; | ||
|
|
||
| const rows: GridRowsProp = [ | ||
| { | ||
| id: 1, | ||
| name: randomTraderName(), | ||
| age: 25, | ||
| dateCreated: randomCreatedDate(), | ||
| lastLogin: randomUpdatedDate(), | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: randomTraderName(), | ||
| age: 36, | ||
| dateCreated: randomCreatedDate(), | ||
| lastLogin: randomUpdatedDate(), | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: randomTraderName(), | ||
| age: 19, | ||
| dateCreated: randomCreatedDate(), | ||
| lastLogin: randomUpdatedDate(), | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: randomTraderName(), | ||
| age: 28, | ||
| dateCreated: randomCreatedDate(), | ||
| lastLogin: randomUpdatedDate(), | ||
| }, | ||
| { | ||
| id: 5, | ||
| name: randomTraderName(), | ||
| age: 23, | ||
| dateCreated: randomCreatedDate(), | ||
| lastLogin: randomUpdatedDate(), | ||
| }, | ||
| ]; |
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
110 changes: 110 additions & 0 deletions
110
docs/src/pages/components/data-grid/editing/ConditionalValidationGrid.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,110 @@ | ||
| import * as React from 'react'; | ||
| import { createMuiTheme } from '@material-ui/core/styles'; | ||
| import { makeStyles } from '@material-ui/styles'; | ||
| import { DataGrid } from '@material-ui/data-grid'; | ||
| import { randomPrice } from '@material-ui/x-grid-data-generator'; | ||
|
|
||
| function getThemePaletteMode(palette) { | ||
| return palette.type || palette.mode; | ||
| } | ||
|
|
||
| const defaultTheme = createMuiTheme(); | ||
|
|
||
| const useStyles = makeStyles( | ||
| (theme) => { | ||
| const isDark = getThemePaletteMode(theme.palette) === 'dark'; | ||
|
|
||
| return { | ||
| root: { | ||
| '& .MuiDataGrid-cell--editing': { | ||
| backgroundColor: 'rgb(255,215,115, 0.19)', | ||
| color: '#1a3e72', | ||
| }, | ||
| '& .Mui-error': { | ||
| backgroundColor: `rgb(126,10,15, ${isDark ? 0 : 0.1})`, | ||
| color: isDark ? '#ff4343' : '#750f0f', | ||
| }, | ||
| }, | ||
| }; | ||
| }, | ||
| { defaultTheme }, | ||
| ); | ||
|
|
||
| const columns = [ | ||
| { field: 'expense', headerName: 'Expense', width: 160, editable: true }, | ||
| { | ||
| field: 'price', | ||
| headerName: 'Price', | ||
| type: 'number', | ||
| width: 120, | ||
| editable: true, | ||
| }, | ||
| { field: 'dueAt', headerName: 'Due at', type: 'date', width: 160, editable: true }, | ||
| { | ||
| field: 'isPaid', | ||
| headerName: 'Is paid?', | ||
| type: 'boolean', | ||
| width: 140, | ||
| editable: true, | ||
| }, | ||
| { | ||
| field: 'paidAt', | ||
| headerName: 'Paid at', | ||
| type: 'date', | ||
| width: 160, | ||
| editable: true, | ||
| }, | ||
| ]; | ||
|
|
||
| const rows = [ | ||
| { | ||
| id: 1, | ||
| expense: 'Light bill', | ||
| price: randomPrice(0, 1000), | ||
| dueAt: new Date(2021, 6, 8), | ||
| isPaid: false, | ||
| }, | ||
| { | ||
| id: 2, | ||
| expense: 'Rent', | ||
| price: randomPrice(0, 1000), | ||
| dueAt: new Date(2021, 7, 1), | ||
| isPaid: false, | ||
| }, | ||
| { | ||
| id: 3, | ||
| expense: 'Car insurance', | ||
| price: randomPrice(0, 1000), | ||
| dueAt: new Date(2021, 7, 4), | ||
| isPaid: true, | ||
| paidAt: new Date(2021, 7, 2), | ||
| }, | ||
| ]; | ||
|
|
||
| export default function ConditionalValidationGrid() { | ||
| const classes = useStyles(); | ||
| const [editRowsModel, setEditRowsModel] = React.useState({}); | ||
|
|
||
| const handleEditRowsModelChange = React.useCallback((newModel) => { | ||
| const updatedModel = { ...newModel }; | ||
| Object.keys(updatedModel).forEach((id) => { | ||
| const hasError = | ||
| updatedModel[id].isPaid.value && !updatedModel[id].paidAt.value; | ||
| updatedModel[id].paidAt = { ...updatedModel[id].paidAt, error: hasError }; | ||
| }); | ||
| setEditRowsModel(updatedModel); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div style={{ height: 400, width: '100%' }}> | ||
| <DataGrid | ||
| className={classes.root} | ||
| rows={rows} | ||
| columns={columns} | ||
| editMode="row" | ||
| editRowsModel={editRowsModel} | ||
| onEditRowsModelChange={handleEditRowsModelChange} | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.