Enable to update my table after an edit with react data grid

Asked
Active3 hr before
Viewed126 times

9 Answers

enableupdatetablereact
90%

Connect and share knowledge within a single location that is structured and easy to search., In what ways was the Soviet STRELA computer "designed to function during a nuclear winter"? Or at least parts of it? , Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers

The sample code on the project website does not work with the current install of this grid component. You will need to use

onRowsUpdate = {
   onGridRowsUpdated
}
load more v
88%

Update all cells under a given cell by double clicking the cell's fill handle.,In order for the cells of a column to be editable, you need to do the following:,Update multiple cells by dragging the fill handle of a cell up or down to a destination cell.

  onGridRowsUpdated = ({
     fromRow,
     toRow,
     updated
  }) => {
     this.setState(state => {
        const rows = state.rows.slice();
        for (let i = fromRow; i <= toRow; i++) {
           rows[i] = {
              ...rows[i],
              ...updated
           };
        }
        return {
           rows
        };
     });
  };
72%

https://adazzle.github.io/react-data-grid/docs/examples/default-editor#enabling-cell-edit,but this only gets called with ALL the data from the FULL table. there used to be an onGridRowsUpdated method,this way I get only updated rows...

  onGridRowsUpdated = ({
        fromRow,
        toRow,
        updated
     }) => {
        ...
load more v
65%

The Grid component has options to dynamically insert, delete and update records. Editing feature requires a primary key column for CRUD operations. To define primary key, set columns.isPrimaryKey to true in particular column.,Automatically update the column based on another column edited value in Batch mode,Automatically update the column based on another column edited value

import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Edit, EditSettingsModel, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

export default class App extends React.Component<{}, {}> {
  public editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true };

  public render() {
    return <GridComponent dataSource={data} editSettings={this.editOptions} height={315}>
        <ColumnsDirective>
            <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true}/>
            <ColumnDirective field='CustomerID' headerText='Customer ID' width='120'/>
            <ColumnDirective field='Freight' headerText='Freight' width='120' format="C2" textAlign="Right"/>
            <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'/>
        </ColumnsDirective>
        <Inject services={[Edit]} />
    </GridComponent>
  }
}
load more v
75%

Bulk editing allows you to save the added, edited, and deleted records in a single request. This feature is used in the Data Grid by enabling the batch editing (cell editing) mode. This provides an Excel-like editing experience and saves all the changes.,Data Grid supports various edit modes such as inline, dialog, and batch edit (cell editing). These provide an interactive UI to add and edit records. In addition, editing can be performed programmatically.,Batch edit (cell editing) documentation

Pretag
 Pretag team - issue, fix, solve, resolve
40%

In this guide, you will learn to build a simple inventory table with the Unit Price column editable to enable updating the price of a product. The table will source its data from a Mock API, which you can create using this guide: Creating a Mock API in React.,In the Unit Price column, when in edit mode, an input is visible to enable editing of the unit price. Otherwise, the unit price value is visible.,In the table, you added a ternary operator on the Unit Price and Action columns.

1 {
   2 "inventory": [
      3 {
         4 "id": 1,
            5 "product_name": "Weetabix",
            6 "product_category": "Cereal",
            7 "unit_price": "501",
            8
      },
      9 {
         10 "id": 2,
            11 "product_name": "Colgate Toothpaste",
            12 "product_category": "Toiletries",
            13 "unit_price": "119",
            14
      },
      15 {
         16 "id": 3,
            17 "product_name": "Imperial Leather Soap",
            18 "product_category": "Toiletries",
            19 "unit_price": "235",
            20
      },
      21 {
         22 "id": 4,
            23 "product_name": "Sunlight Detergent",
            24 "product_category": "Toiletries",
            25 "unit_price": "401",
            26
      }
      27
   ]
   28
}
load more v
22%

In this demo, the DataGrid recalculates summaries when you edit data. To enable this feature, the recalculateWhileEditing property is set to true. You can add, delete, or update rows to change the summaries., Recalculate While Editing , Data Summaries Total Summaries Group Summaries Custom Summaries Recalculate While Editing

Pretag
 Pretag team - issue, fix, solve, resolve
60%

This sample using client-side data is implemented in all the popular web frameworks - React, Angular, VueJS. Please see the sample in action below:,In this post we'll go over how to set ag-Grid column definitions dynamically based on the columns in your row data. We demonstrate this in live examples in Angular, React, Vue.JS and JavaScript.,Learn how to perform CRUD operations in ag-Grid server-side row model using the GraphQL query language. We use a live sample in React to show adding, updating, deleting rows by generating GraphQL queries.

The code snippet below shows how to add a new row and update the grid to display it. Please see the relevant code in the addRowData method, the rowData state variable and the getRowNodeId callback below:

this.state = {
   rowData: [],
   ...rest of the state
};
}

getRowNodeId = data => {
   return data.id;
};

addRowData = () => {
   let newRowData = this.state.rowData.slice();
   let newId =
      this.state.rowData.length === 0 ?
      0 :
      this.state.rowData[this.state.rowData.length - 1].id + 1;
   let newRow = {
      athlete: 'new athlete',
      id: newId
   };
   newRowData.push(newRow);
   this.setState({
      rowData: newRowData
   });
};
 private rowData: [];

 constructor(private http: HttpClient) {
    this.getRowNodeId = (params) => {
       return params.id
    }
 }

 removeRowData = () => {
    let focusedNode = this.gridApi.getSelectedRows()[0]
    let newRowData = this.rowData.filter(row => {
       return row !== focusedNode;
    })
    this.rowData = newRowData
 }

See below the resetRowData method from our Vue live example:

 resetRowData() {
       this.rowData = this.backupRowData;
    },

    onGridReady() {
       const httpRequest = new XMLHttpRequest();
       onGridReady continues...

          this.rowData = data;
       this.backupRowData = data;
    };
 onGridReady continues...
 }
var gridOptions = {

   getRowNodeId: data => {
      return data.id;
   },
   immutableData: true,
   ...
};

const updateEvenRowData = () => {
   let newRowData = rowData.map((row) => {
      if (row.id % 2 === 0) {
         return {
            ...row,
            athlete: "Even Row"
         };
      }
      return row;
   });
   rowData = newRowData;
   gridOptions.api.setRowData(rowData);
};
load more v
48%

Basic features like grouping columns, sorting, searching, and filtering,For simple tables that need basic features like searching, sorting, filtering, etc.,Use react-data-grid when your data table needs:

Pretag
 Pretag team - issue, fix, solve, resolve

Other "enable-update" queries related to "Enable to update my table after an edit with react data grid"