score:2
my first suggestion - do not do this. editable grids are quite tough components to implement on your own.
therefore you have some options to choose from:
- use existing frameworks with editable grids: kendoui, wijmo, etc. although they are quite pricely and most of them have quite pure support for react as for now.
- there are some standalone grids with editing functionality: ag-grid, react data grid etc. some of them are free, other paid.
- you can develop your own editable grid based on powerfull components like fixed-data-table, react-virtualized, etc. this approach will still will require some coding to be done but will save you a lot of time.
- make your own components as you are trying now.
if you still would like to go with #4 you can do it this way:
4.1. in state store column of the currently edited cell: editingcolumn
.
4.2. assign onclick handler on your <td>
tags: <td onclick={(ev) => this.oncellclick(ev))}>
. in the handler set editingcolumn
4.3. in your render replace
<td>{doc.registrationinfo['registrationtype']}</td>
with
<td>{this.rendercell('columnname')}</td>
.
and rendercell
will look something like this:
private rendercell(colname)
{
if(this.state.editingcolumn >= 0 && this.state.editingrow >= 0)
{
// render your editing control here
// assign to its 'onchange' like event and save changes to this.props.registrationinfo[colname];
}
else
{
return this.props.registrationinfo[colname];
}
}
this is very rough description but i hope it will help you get on going.
Source: stackoverflow.com
Related Query
- React make table clickable and edit details
- How to make a column as clickable in a react bootstrap table and avoid showing it as text field in "Add Row"?
- How to make some columns align left and some column align center in React Table - React
- How to make the API call and display it in React JS using React Table and Axios?
- How to edit react bootstrap table and save data after editing
- Semantic UI React - Table - Make whole row selectable and link somewhere
- Make table cell clickable in React
- How to make react data grid table cell editable and focused on click of a button without performing a double click action
- How to make only text of react bootstrap table header clickable
- How to make a react table whose rows and columns come from a JSON object
- How to make some columns fixed and some columns draggable in React Table - ReactJS
- React - edit profile -first display read only fields and click on edit make fields editable
- How to hide a column on REACT Material table in all rows and show it on Edit for the Particular Row I am editing and Add Operations on new row adding?
- How to detect if String contains url and make url clickable using javascript react js
- Edit and Delete React Bootstrap table rows
- table's both column and row reordering , drag and drop also edit the table cell in react js
- React - Triggering click event on table row and display the selected row details in another page
- React Material Table action OnClick event for edit and delete does not fire action
- How to make a clickable header in react table
- How can i make the entire row of a table clickable in react js using <Link> or any other way?
- Make the first column of table clickable and navigate to another page in reactjs
- edit and update table cell dynamically in react
- How do I wrap a React component that returns multiple table rows and avoid the "<tr> cannot appear as a child of <div>" error?
- How to make the whole Card component clickable in Material UI using React JS?
- How to make react router work with static assets, html5 mode, history API and nested routes?
- How to make React and Meteor fit together
- How to use drag and drop functionality both columns and rows in my React Table - ReactJS
- react redux architecting table actions and reducers
- React table dynamic page size but with size limit and pagination
- React component with Edit Mode and View Mode, is this a correct pattern?
More Query from same tag
- React + Grails image loading
- Dictionaries in React js
- How to get parent component's name in React?
- Redux onClick action not firing from Component, no errors or console errors
- Injecting HTML code in React using Helmet
- React - Loop through an array of objects, and highlight the selected item onClick
- Unit test componentDidMount React
- Style the dropdown element of MUI Select
- Google Chart Component is being re-rendered in the screen- react js
- Make a GET-request to an endpoint API and use data
- Register form similar to facebook once CSS
- How to avoid using setProps in React?
- React Router (v4) Navbar
- Why useState is throwing error when used in main App functional component?
- Accessing dom elements in react
- defaultValue is not working in react DatePicker
- react js user gets redirected to another page on refresh
- onClick event opens all Material-UI dialogs
- Convert sass styles to inline styles object in react
- Getting 404 error if i am navigating to any URL other than homepage URL with react-router
- saving and displaying array to states in react
- Select only one plan at the time React State Hook
- React render icons according to number that is stored in json file
- Check pages already created in Gatsby
- React error Cannot POST /TrajetBus after calling setState on a button
- Custom useEffect Second Argument
- How can I make my array into a map when saved in Firestore?
- Calling an Api with React
- how to render with ReactDOM.render() using ES6?
- Form data Error Cannot set headers after they are sent to the client