Single editable table row on add or edit
I have a react-table in my react app which renders rows of transactions. I have logic that adds a new, empty row on a button click. I want this row (and only this row) to be editable so that I can use it to create new transactions. I've tried to accomplish this using the Cell
column property and the row index from the cellInfo. This works to make only the single column that I'm testing with editable, but the rest of the cells in that column are blank.
import React from 'react';
import axios from 'axios';
import ReactTable from "react-table";
import "react-table/react-table.css";
const API = 'http://127.0.0.1:8000/api/transactions/';
class Transactions extends React.Component
constructor()
super();
this.state =
data: ,
isLoading: true,
error: null
;
this.fetchData = this.fetchData.bind(this);
this.handleAddTransaction = this.handleAddTransaction.bind(this);
this.renderEditable = this.renderEditable.bind(this);
handleAddTransaction()
let newEmptyRow =
date: "",
payee: "",
category: "",
amount: ""
const insert = (arr, index, newItem) => [ ...arr.slice(0, index), newItem, ...arr.slice(index) ];
console.log(newEmptyRow);
this.setState(currentState => ( data: insert(currentState.data, 0, newEmptyRow) ));
fetchData(state, instance)
this.setState(
isLoading: true
);
axios.get(API).then(response =>
this.setState(
data: response.data.results,
isLoading: false
);
);
renderEditable(cellInfo)
if(cellInfo.row._index === 0)
return (
<div
style= backgroundColor: "#009999"
contentEditable
suppressContentEditableWarning
onBlur=e =>
const data = [...this.state.data];
data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
this.setState( data );
dangerouslySetInnerHTML=
__html: this.state.data[cellInfo.index][cellInfo.column.id]
/>
);
render()
const
data,
isLoading
= this.state;
return (
<div>
<button onClick=this.handleAddTransaction type="button">New +</button>
<div>
<ReactTable
columns = [
Header: 'Date',
accessor: 'date',
width: 200,
Cell: this.renderEditable
,
Header: 'Payee',
accessor: 'payee',
width: 400
,
Header: 'Category',
accessor: 'category',
width: 200
,
Header: 'Amount',
accessor: 'amount',
width: 200
,
Header: 'Balance',
accessor: 'balance',
width: 200
]
data = data
onFetchData=this.fetchData // Request new data when things change
defaultPageSize = 500
sortable = false
manual
style=
// This will force the table body to overflow and scroll
// TODO Finalize height
height: "800px"
loading=isLoading
className="-striped -highlight"
/>
</div>
</div>)
;
export default Transactions;
javascript reactjs react-table
add a comment |
I have a react-table in my react app which renders rows of transactions. I have logic that adds a new, empty row on a button click. I want this row (and only this row) to be editable so that I can use it to create new transactions. I've tried to accomplish this using the Cell
column property and the row index from the cellInfo. This works to make only the single column that I'm testing with editable, but the rest of the cells in that column are blank.
import React from 'react';
import axios from 'axios';
import ReactTable from "react-table";
import "react-table/react-table.css";
const API = 'http://127.0.0.1:8000/api/transactions/';
class Transactions extends React.Component
constructor()
super();
this.state =
data: ,
isLoading: true,
error: null
;
this.fetchData = this.fetchData.bind(this);
this.handleAddTransaction = this.handleAddTransaction.bind(this);
this.renderEditable = this.renderEditable.bind(this);
handleAddTransaction()
let newEmptyRow =
date: "",
payee: "",
category: "",
amount: ""
const insert = (arr, index, newItem) => [ ...arr.slice(0, index), newItem, ...arr.slice(index) ];
console.log(newEmptyRow);
this.setState(currentState => ( data: insert(currentState.data, 0, newEmptyRow) ));
fetchData(state, instance)
this.setState(
isLoading: true
);
axios.get(API).then(response =>
this.setState(
data: response.data.results,
isLoading: false
);
);
renderEditable(cellInfo)
if(cellInfo.row._index === 0)
return (
<div
style= backgroundColor: "#009999"
contentEditable
suppressContentEditableWarning
onBlur=e =>
const data = [...this.state.data];
data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
this.setState( data );
dangerouslySetInnerHTML=
__html: this.state.data[cellInfo.index][cellInfo.column.id]
/>
);
render()
const
data,
isLoading
= this.state;
return (
<div>
<button onClick=this.handleAddTransaction type="button">New +</button>
<div>
<ReactTable
columns = [
Header: 'Date',
accessor: 'date',
width: 200,
Cell: this.renderEditable
,
Header: 'Payee',
accessor: 'payee',
width: 400
,
Header: 'Category',
accessor: 'category',
width: 200
,
Header: 'Amount',
accessor: 'amount',
width: 200
,
Header: 'Balance',
accessor: 'balance',
width: 200
]
data = data
onFetchData=this.fetchData // Request new data when things change
defaultPageSize = 500
sortable = false
manual
style=
// This will force the table body to overflow and scroll
// TODO Finalize height
height: "800px"
loading=isLoading
className="-striped -highlight"
/>
</div>
</div>)
;
export default Transactions;
javascript reactjs react-table
add a comment |
I have a react-table in my react app which renders rows of transactions. I have logic that adds a new, empty row on a button click. I want this row (and only this row) to be editable so that I can use it to create new transactions. I've tried to accomplish this using the Cell
column property and the row index from the cellInfo. This works to make only the single column that I'm testing with editable, but the rest of the cells in that column are blank.
import React from 'react';
import axios from 'axios';
import ReactTable from "react-table";
import "react-table/react-table.css";
const API = 'http://127.0.0.1:8000/api/transactions/';
class Transactions extends React.Component
constructor()
super();
this.state =
data: ,
isLoading: true,
error: null
;
this.fetchData = this.fetchData.bind(this);
this.handleAddTransaction = this.handleAddTransaction.bind(this);
this.renderEditable = this.renderEditable.bind(this);
handleAddTransaction()
let newEmptyRow =
date: "",
payee: "",
category: "",
amount: ""
const insert = (arr, index, newItem) => [ ...arr.slice(0, index), newItem, ...arr.slice(index) ];
console.log(newEmptyRow);
this.setState(currentState => ( data: insert(currentState.data, 0, newEmptyRow) ));
fetchData(state, instance)
this.setState(
isLoading: true
);
axios.get(API).then(response =>
this.setState(
data: response.data.results,
isLoading: false
);
);
renderEditable(cellInfo)
if(cellInfo.row._index === 0)
return (
<div
style= backgroundColor: "#009999"
contentEditable
suppressContentEditableWarning
onBlur=e =>
const data = [...this.state.data];
data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
this.setState( data );
dangerouslySetInnerHTML=
__html: this.state.data[cellInfo.index][cellInfo.column.id]
/>
);
render()
const
data,
isLoading
= this.state;
return (
<div>
<button onClick=this.handleAddTransaction type="button">New +</button>
<div>
<ReactTable
columns = [
Header: 'Date',
accessor: 'date',
width: 200,
Cell: this.renderEditable
,
Header: 'Payee',
accessor: 'payee',
width: 400
,
Header: 'Category',
accessor: 'category',
width: 200
,
Header: 'Amount',
accessor: 'amount',
width: 200
,
Header: 'Balance',
accessor: 'balance',
width: 200
]
data = data
onFetchData=this.fetchData // Request new data when things change
defaultPageSize = 500
sortable = false
manual
style=
// This will force the table body to overflow and scroll
// TODO Finalize height
height: "800px"
loading=isLoading
className="-striped -highlight"
/>
</div>
</div>)
;
export default Transactions;
javascript reactjs react-table
I have a react-table in my react app which renders rows of transactions. I have logic that adds a new, empty row on a button click. I want this row (and only this row) to be editable so that I can use it to create new transactions. I've tried to accomplish this using the Cell
column property and the row index from the cellInfo. This works to make only the single column that I'm testing with editable, but the rest of the cells in that column are blank.
import React from 'react';
import axios from 'axios';
import ReactTable from "react-table";
import "react-table/react-table.css";
const API = 'http://127.0.0.1:8000/api/transactions/';
class Transactions extends React.Component
constructor()
super();
this.state =
data: ,
isLoading: true,
error: null
;
this.fetchData = this.fetchData.bind(this);
this.handleAddTransaction = this.handleAddTransaction.bind(this);
this.renderEditable = this.renderEditable.bind(this);
handleAddTransaction()
let newEmptyRow =
date: "",
payee: "",
category: "",
amount: ""
const insert = (arr, index, newItem) => [ ...arr.slice(0, index), newItem, ...arr.slice(index) ];
console.log(newEmptyRow);
this.setState(currentState => ( data: insert(currentState.data, 0, newEmptyRow) ));
fetchData(state, instance)
this.setState(
isLoading: true
);
axios.get(API).then(response =>
this.setState(
data: response.data.results,
isLoading: false
);
);
renderEditable(cellInfo)
if(cellInfo.row._index === 0)
return (
<div
style= backgroundColor: "#009999"
contentEditable
suppressContentEditableWarning
onBlur=e =>
const data = [...this.state.data];
data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
this.setState( data );
dangerouslySetInnerHTML=
__html: this.state.data[cellInfo.index][cellInfo.column.id]
/>
);
render()
const
data,
isLoading
= this.state;
return (
<div>
<button onClick=this.handleAddTransaction type="button">New +</button>
<div>
<ReactTable
columns = [
Header: 'Date',
accessor: 'date',
width: 200,
Cell: this.renderEditable
,
Header: 'Payee',
accessor: 'payee',
width: 400
,
Header: 'Category',
accessor: 'category',
width: 200
,
Header: 'Amount',
accessor: 'amount',
width: 200
,
Header: 'Balance',
accessor: 'balance',
width: 200
]
data = data
onFetchData=this.fetchData // Request new data when things change
defaultPageSize = 500
sortable = false
manual
style=
// This will force the table body to overflow and scroll
// TODO Finalize height
height: "800px"
loading=isLoading
className="-striped -highlight"
/>
</div>
</div>)
;
export default Transactions;
javascript reactjs react-table
javascript reactjs react-table
edited Nov 14 '18 at 4:10
brewcrazy
asked Nov 14 '18 at 3:22
brewcrazybrewcrazy
11114
11114
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53292731%2fsingle-editable-table-row-on-add-or-edit%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53292731%2fsingle-editable-table-row-on-add-or-edit%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown