I'm developing a contacts application where all data is stored on client-side temporarily. I've used material-ui table to display the contacts.
When add new contact button on the bottom right is clicked it displays a Dialog with a form in it. When save button is clicked the data is saved in the state. But the problem I'm facing is how to insert a new row within the table with the form data in it. I searched for it but I couldn't find even a single query regarding the same. The add new contact button is in AddContact component and table is in Contacts component but both have same parent component which is in Main. So in a nutshell I'm not able to display the new contact in the table.
Maintain an array in state variable, when you click on submit in Dialog, push that data in state array. Use the array to generate the rows dynamically, like this:
<Table>
<TableHeader>
<TableRow>
/*Define the headers*/
</TableRow>
</TableHeader>
<TableBody>
{this._generateRows()}
</TableBody>
</Table>
Write the _generateRows function like this to generate the rows:
_generateRows(){
return this.state.data.map(el => {
return <TableRow>
<TableRowColumn>{el.a}</TableRowColumn>
<TableRowColumn>{el.b}</TableRowColumn>
<TableRowColumn>{el.c}</TableRowColumn>
</TableRow>
})
}
Reference : Material-UI table.
Note: Replace el.a, el.b, el.c with the original data.
I see you are using react. This means that when you bind a list of items to the
row components in your render function.
{list.map(item => <RowComponent key={item.id}/>)}
Now when you click the button all you have to do is push to this list and your new row is rendered on screen.
Related
return (
<>
<div className='table-wrapper'>
<Table
onUserChange={this.onUserChange} columns={headerColumn} data={rows}
rowsPerPage={50}
/>
</div>
{
selectedUser && <GradeReportChart
closeGradeReport={this.clearSelectedUser}
selectedUser={selectedUser}
/>
}
</>
)
GradeReportChart component fetches data and display it in the new window, using react-new-window library, which uses ReactDOM.createPortal API. I want to display datas for each row in the table in new window. But GradeReportChart component opens one window and change the content whenever new row is selected. I don't want that I want every row on the table when clicked to display the data in a new window. A quick fix may be mount GradeReportChart component whenever row is clicked, how can I do that? Or any way to open new windows in every new row click?
Goal
I'm currently attempting to use React-Transition-Group to animate the rows of a table in and out. There are two different scenarios that can happen:
the entire contents of the table will be swapped out (most common option)
individual rows may be added and removed
Where I am now
I used this todo list example as a starting point to make the table animation. Here is my sandbox.
My main problem is when the table data is being completely swapped out, you can see both data sets at the same time. The old data is sliding out while the new data is sliding in. This causes the old data to snap down as it's transitioning out (see image below).
Ideally the initial table data would completely disappear before the new data comes in, but instead the new data pops in while the old data is there.
Code
Table Prop that maps through rows
<table>
<TransitionGroup component="tbody">
{this.props.tables[this.props.currentTable].rows.map((row, i) => {
return (
<CSSTransition
timeout={500}
classNames="SlideIn"
key={`${row}-${i}`}
>
<tr>
{row.map((column, i) => {
return <td>{column}</td>;
})}
</tr>
</CSSTransition>
);
})}
</TransitionGroup>
</table>
Function to change table dataset:
changeTable = () => {
this.setState({
currentTable:
this.state.currentTable < this.state.tables.length - 1
? this.state.currentTable + 1
: 0
});
};
I am using reactable to draw table in my react app.
I get data from server in json object and pass this data to Table
render(){
return(
<Table className="table" data= {this.state.content}
defaultSort={{column: 'account_status', direction: 'desc'}}
/>
)}
This works fine and draws the table like this.
Now i want to add 2 buttons with each row, Approve/reject.
I want to know the possibility of adding buttons with each row when using reactable
So here is my question. How can I display the header names and its respective rows dynamically? I am using a simple react table right now.
I have hardcoded the names as you can see in the table (2017-8, 2017-9, .....) from the image.
the columns should be label and rows should be its respective value from the referencePoints array.
Just place a code block in the table header as follows:
<th>{header}</th>
You can receive your header from props or state in the render method. If you are receiving it from Redux your render method might contain:
const {header} = this.props;
return(
<table>
<tr> <th>{header}</th>...</tr>
...
</table>
)
You might also loop through your headers if you want:
<tr> {headers.map((head, i)=>(<th key={i}>{head}</th>))} </tr>
Make sure to add a key to items added with an array. React will warn you if you don't.
You can write a loop across your table headers like
header = [];
Dates.forEach(date => {
header.push(<td>{date.value}</td>
});
you can render like
<th>
{header}
<th>
The code is just a representation and not actual code
I'm currently trying to highlight the top element in a react native ListView.
Is it possible to for ListView identify which row component is located at the top of the view on scroll?
If not, how would I go about selecting the lowest integer rowID of the visible rows?
renderRow(rowData, sectionID, rowID) {
return (
<MyRow
{...rowData}
key={rowData.detailID}
onDetailPress={() => this.onDetailPress(rowData, rowID)}
/>
);
}
You can use onChangeVisibleRows which gives you a list of the visible rows and the rows that have changed their visibility. Something like this should do:
<MyRow
{...rowData}
key={rowData.detailID}
onDetailPress={() => this.onDetailPress(rowData, rowID)}
onChangeVisibleRows={(visible, changed) => this.highlightRow(visible[0])}
/>
You would probably need to update the data source with the item you want to be highlighted containing a state that will indicate it.