React Data Grid - Custom New Record Position

The DevExtreme DataGrid API includes a newRowPosition property. With this property, you can specify the desired "new record" position as follows.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

​x
 
import React, { useCallback, useState } from 'react';
import DataGrid, {  Column, Editing, ValidationRule, Button, IButtonProps, Toolbar, Item, Scrolling, DataGridTypes, Pager,} from 'devextreme-react/data-grid';import SelectBox from 'devextreme-react/select-box';import Guid from 'devextreme/core/guid';import { dataSource, positionLabel, scrollingModeLabel } from './data.ts';​const newRowPositionOptions = ['first', 'last', 'pageTop', 'pageBottom', 'viewportTop', 'viewportBottom'];const scrollingModeOptions = ['standard', 'virtual'];​const isAddButtonVisible = ({ row }) => !row.isEditing;​const onRowInserted = (e: DataGridTypes.RowInsertedEvent) => {  e.component.navigateToRow(e.key);};​const App = () => {  const [newRowPosition, setNewRowPosition] = useState<DataGridTypes.NewRowPosition>('viewportTop');  const [scrollingMode, setScrollingMode] = useState<DataGridTypes.DataGridScrollMode>('standard');  const [changes, setChanges] = useState([]);  const [editRowKey, setEditRowKey] = useState(null);​  const onAddButtonClick = useCallback<IButtonProps['onClick']>((e) => {    const key = new Guid().toString();    setChanges([{      key,      type: 'insert',      insertAfterKey: e.row.key,    }]);    setEditRowKey(key);  }, []);​  return (    <React.Fragment>      <DataGrid        id='gridContainer'        dataSource={dataSource}        showBorders={true}        columnAutoWidth={true}        remoteOperations={true}        onRowInserted={onRowInserted}      >        <Scrolling mode={scrollingMode} />​        <Editing          mode='row'          allowAdding={true}          allowDeleting={true}          allowUpdating={true}          confirmDelete={false}          useIcons={true}          newRowPosition={newRowPosition}          changes={changes}          onChangesChange={setChanges}          editRowKey={editRowKey}          onEditRowKeyChange={setEditRowKey}        />        <Pager visible={true} />​        <Column dataField='OrderID' allowEditing={false} />        <Column dataField='OrderDate' dataType='date'>          <ValidationRule type='required' />        </Column>        <Column dataField='ShipName' />        <Column dataField='ShipCity' />        <Column dataField='ShipPostalCode' />        <Column dataField='ShipCountry' />        <Column type='buttons'>          <Button icon='add'            text='Add'            onClick={onAddButtonClick}            visible={isAddButtonVisible}          />          <Button name='delete' />          <Button name='save' />          <Button name='cancel' />        </Column>​        <Toolbar>          <Item name='addRowButton' showText='always' />        </Toolbar>      </DataGrid>​      <div className='options'>        <div className='caption'>Options</div>        <div className='option-container'>          <div className='option'>            <span>New Row Position</span>            <SelectBox              id='newRowPositionSelectBox'              value={newRowPosition}              inputAttr={positionLabel}              items={newRowPositionOptions}              onValueChange={setNewRowPosition}            />          </div>          <div className='option'>            <span>Scrolling Mode</span>            <SelectBox              id='scrollingModeSelectBox'              value={scrollingMode}              inputAttr={scrollingModeLabel}              items={scrollingModeOptions}              onValueChange={setScrollingMode}            />          </div>        </div>      </div>    </React.Fragment>  );};​export default App;​

xxxxxxxxxx
 
import React, { useCallback, useState } from 'react';
import DataGrid, {  Column,  Editing,  ValidationRule,  Button,  Toolbar,  Item,  Scrolling,  Pager,} from 'devextreme-react/data-grid';import SelectBox from 'devextreme-react/select-box';import Guid from 'devextreme/core/guid';import { dataSource, positionLabel, scrollingModeLabel } from './data.js';​const newRowPositionOptions = [  'first',  'last',  'pageTop',  'pageBottom',  'viewportTop',  'viewportBottom',];const scrollingModeOptions = ['standard', 'virtual'];const isAddButtonVisible = ({ row }) => !row.isEditing;const onRowInserted = (e) => {  e.component.navigateToRow(e.key);};const App = () => {  const [newRowPosition, setNewRowPosition] = useState('viewportTop');  const [scrollingMode, setScrollingMode] = useState('standard');  const [changes, setChanges] = useState([]);  const [editRowKey, setEditRowKey] = useState(null);  const onAddButtonClick = useCallback((e) => {    const key = new Guid().toString();    setChanges([      {        key,        type: 'insert',        insertAfterKey: e.row.key,      },    ]);    setEditRowKey(key);  }, []);  return (    <React.Fragment>      <DataGrid        id="gridContainer"        dataSource={dataSource}        showBorders={true}        columnAutoWidth={true}        remoteOperations={true}        onRowInserted={onRowInserted}      >        <Scrolling mode={scrollingMode} />​        <Editing          mode="row"          allowAdding={true}          allowDeleting={true}          allowUpdating={true}          confirmDelete={false}          useIcons={true}          newRowPosition={newRowPosition}          changes={changes}          onChangesChange={setChanges}          editRowKey={editRowKey}          onEditRowKeyChange={setEditRowKey}        />        <Pager visible={true} />​        <Column          dataField="OrderID"          allowEditing={false}        />        <Column          dataField="OrderDate"          dataType="date"        >          <ValidationRule type="required" />        </Column>        <Column dataField="ShipName" />        <Column dataField="ShipCity" />        <Column dataField="ShipPostalCode" />        <Column dataField="ShipCountry" />        <Column type="buttons">          <Button            icon="add"            text="Add"            onClick={onAddButtonClick}            visible={isAddButtonVisible}          />          <Button name="delete" />          <Button name="save" />          <Button name="cancel" />        </Column>​        <Toolbar>          <Item            name="addRowButton"            showText="always"          />        </Toolbar>      </DataGrid>​      <div className="options">        <div className="caption">Options</div>        <div className="option-container">          <div className="option">            <span>New Row Position</span>            <SelectBox              id="newRowPositionSelectBox"              value={newRowPosition}              inputAttr={positionLabel}              items={newRowPositionOptions}              onValueChange={setNewRowPosition}            />          </div>          <div className="option">            <span>Scrolling Mode</span>            <SelectBox              id="scrollingModeSelectBox"              value={scrollingMode}              inputAttr={scrollingModeLabel}              items={scrollingModeOptions}              onValueChange={setScrollingMode}            />          </div>        </div>      </div>    </React.Fragment>  );};export default App;​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';​import App from './App.tsx';​ReactDOM.render(  <App />,  document.getElementById('app'),);​

xxxxxxxxxx
 
import { createStore } from 'devextreme-aspnet-data-nojquery';
​const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi';​export const dataSource = createStore({  key: 'OrderID',  loadUrl: `${url}/Orders`,  insertUrl: `${url}/InsertOrder`,  updateUrl: `${url}/UpdateOrder`,  deleteUrl: `${url}/DeleteOrder`,  onBeforeSend: (method, ajaxOptions) => {    ajaxOptions.xhrFields = { withCredentials: true };  },});​export const positionLabel = { 'aria-label': 'Position' };export const scrollingModeLabel = { 'aria-label': 'Scrolling Mode' };​

xxxxxxxxxx
 
window.exports = window.exports || {};
window.config = {  transpiler: 'ts',  typescriptOptions: {    module: 'system',    emitDecoratorMetadata: true,    experimentalDecorators: true,    jsx: 'react',  },  meta: {    'react': {      'esModule': true,    },    'typescript': {      'exports': 'ts',    },    'devextreme/time_zone_utils.js': {      'esModule': true,    },    'devextreme/localization.js': {      'esModule': true,    },    'devextreme/viz/palette.js': {      'esModule': true,    },    'devextreme-aspnet-data-nojquery': {      'esModule': true,    },    'openai': {      'esModule': true,    },  },  paths: {    'npm:': 'https://unpkg.com/',    'bundles:': 'bundles/',    'externals:': 'bundles/externals/',  },  defaultExtension: 'js',  map: {    'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',    'typescript': 'npm:typescript@4.2.4/lib/typescript.js',    'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',    'react': 'npm:react@17.0.2/umd/react.development.js',    'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',    'prop-types': 'npm:prop-types/prop-types.js',    'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@5.0.0/index.js',    'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',    'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',    'es6-object-assign': 'npm:es6-object-assign',    'devextreme': 'npm:devextreme@24.2.5/cjs',    'devextreme-react': 'npm:devextreme-react@24.2.5/cjs',    'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',    'devexpress-diagram': 'npm:devexpress-diagram@2.2.15/dist/dx-diagram.js',    'devexpress-gantt': 'npm:devexpress-gantt@4.1.59/dist/dx-gantt.js',    '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',    'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',    'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',    'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',    'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',    'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',    'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',    'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',    'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',    'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',    // SystemJS plugins    'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',    'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',    // Prettier    'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',    'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',  },  packages: {    'devextreme': {      defaultExtension: 'js',    },    'devextreme-react': {      main: 'index.js',    },    'devextreme/events/utils': {      main: 'index',    },    'devextreme/localization/messages': {      format: 'json',      defaultExtension: 'json',    },    'devextreme/events': {      main: 'index',    },    'es6-object-assign': {      main: './index.js',      defaultExtension: 'js',    },  },  packageConfigPaths: [    'npm:@devextreme/*/package.json',    'npm:@devextreme/runtime@3.0.12/inferno/package.json',  ],  babelOptions: {    sourceMaps: false,    stage0: true,    react: true,  },};System.config(window.config);​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';import App from './App.js';​ReactDOM.render(<App />, document.getElementById('app'));​

xxxxxxxxxx
 
import { createStore } from 'devextreme-aspnet-data-nojquery';
​const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi';export const dataSource = createStore({  key: 'OrderID',  loadUrl: `${url}/Orders`,  insertUrl: `${url}/InsertOrder`,  updateUrl: `${url}/UpdateOrder`,  deleteUrl: `${url}/DeleteOrder`,  onBeforeSend: (method, ajaxOptions) => {    ajaxOptions.xhrFields = { withCredentials: true };  },});export const positionLabel = { 'aria-label': 'Position' };export const scrollingModeLabel = { 'aria-label': 'Scrolling Mode' };​

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">  <head>↔</head>​  <body class="dx-viewport">    <div class="demo-container">      <div id="app"></div>    </div>  </body></html>​

xxxxxxxxxx
 
#gridContainer {
  height: 440px;}​.options {  margin-top: 20px;  padding: 20px;  background-color: rgba(191, 191, 191, 0.15);  position: relative;}​.caption {  font-size: 18px;  font-weight: 500;}​.option-container {  display: flex;  margin: 0 auto;  justify-content: space-between;}​.option {  margin-top: 10px;  display: flex;  align-items: center;}​.option-caption {  white-space: nowrap;  margin: 0 8px;}​.option > span {  position: relative;  margin-right: 10px;}​#newRowPositionSelectBox {  width: 150px;}​#scrollingModeSelectBox {  width: 150px;}​

"viewportTop" (default)
Insert a new row at the top of the viewport.
"viewportBottom"
Insert a new row at the bottom of the viewport.
"pageTop"
Insert a new row at the top of the current page. In virtual and infinite scrolling modes, "pageTop" works like "viewportTop".
"pageBottom"
Insert a new row at the bottom of the current page. In virtual and infinite scrolling modes, "pageBottom" works like "viewportBottom".
"first"
Navigate to the beginning of the dataset and insert a new row at the top.
"last"
Navigate to the end of the dataset and insert a new row at the bottom. Does not apply in infinite scrolling mode.

In this demo, you can use a drop-down menu to change the newRowPosition property value at runtime. To see how your choice affects "new record" position, click the "Add a row" button in the toolbar. This demo also allows you to switch between standard and virtual scrolling modes (you can also see how newRowPosition works with each scrolling mode).

If you wish to position new records in a more flexible manner, you can specify the key before/after which a new record must be inserted. To apply this feature, set the insertBeforeKey or insertAfterKey property in the pending changes array. In this demo, each row contains an "Add row" button that inserts a new row after the current row. The insertAfterKey property is used to implement this functionality. Review the button's onClick event handler for more information.

A new record remains at a specified position until it is saved. Once saved, the DevExtreme DataGrid reloads data and sorts all records. As a result, the saved record may appear outside the viewport. To navigate to this record, call the navigateToRow(key) method from the onRowInserted event handler (as illustrated in this demo). As an alternative, you can set the refreshMode to "repaint". In this instance, the record retains its custom position after a save operation (however, position may change once data is shaped in the future).