I have a list of users and their account status as a table in my react js application. This table entry is fetched from an API call. Now when I click on a button, the value of account status has to be updated in the database. The endpoint is working fine and I've tested it also.
I've created a button for each user to update the database. It's currently not updating the value in the database.
React Material UI code :-
<TableBody>
{items.map(item => (
<TableRow key={item.username}>
<TableCell component="th" scope="item">
{item.username}
</TableCell>
<TableCell>
<Button onClick={this.onItemClick} variant="contained">
Update Status
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
the onItemClick handler has to make an API Call and update the database value accordingly.
Kindly provide some help regarding the approach to be followed. Thank you
Related
I am having an issue where I can't seem to get TransitionGroup to work with Material UI ReactJS library
My expectation is pretty simple, upon entry into the table the row should be animated in like sliding into the table.
I have tried the following but this only end up scattering the table, the headers and everything becomes out of shape.
Here is what I have tried using the Material UI library for ReactJS
<TableContainer>
<Table aria-label="stats-table">
<TableHead>
<TableRow>
{...}
</TableRow>
</TableHead>
<TransitionGroup
transitionName="fade"
transitionEnterTimeout={1000}
transitionLeaveTimeout={300}
transitionAppearTimeout={1000}
transitionAppear={true}
component="tbody">
<TableBody>
{
(rowsPerPage > 0 ? games.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : games
).map((row: Game) => (
<SimpleTableRow row={row} key={row.id}/>
))}
{
emptyRows > 0 && (
<TableRow style={{height: 53 * emptyRows}}>
<TableCell colSpan={6}/>
</TableRow>
)
}
</TableBody>
</TransitionGroup>
</TableContainer>
The moment I add the TransitionGroup, the entire table headers and body becomes scattered.
How can I make this work? Thanks
You can try to pass component={null} instead component="tbody".
I was using the older version of React Table for last couple of months and now when i started using Latest version v7, i started facing difficulty in customizing the table while no data is found in the table to be displayed. It doesn't show any message like 'No Rows Found' which was earlier displayed in previous versions of the table. How could i render the noDataComponent.
As v7 is headless, you are responsible for the output under the varying conditions. You likely have something like map() in place to iterate over the data array similar to:
<TableBody>
{page.map((row) => {
prepareRow(row);
return (
<TableRow {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
You can add some code to detect the condition where no rows are found similar to:
{page.length === 0 &&
<TableRow>
<TableCell>
No data to display
</TableCell>
</TableRow>
}
I have a requirement to show popovers, when clicking on table cell (used Material UI table cell). Tried adding onclick function to cell, but not able to pass the element value to the function. How can I achieve this? Below is the code snippet which used to render table.
<TableBody>
{dataObject.map((data) => (
<TableRow key={data.id}>
<TableCell>
<Button>
{data.info}
</Button>
</TableCell>
<TableCell>
{data.request}
</TableCell>
</TableRow>
))}
</TableBody>
Thanks in advance.
The <TableCell> component is eventually a td/th in your html, so you don't really have a value attached to it (it's not like a pure react component that you can just use value, or an input element that has value that you can access).
What you can do is access the element's innerHTML / textContent to access the content of the cell using the event itself:
const handleCellClick = (e) => {
console.log(e.target.textContent);
}
<TableCell onClick={handleCellClick}>{data.request}</TableCell>
Warning: Unknown event handler property onCellClick. It will be ignored.
in table (created by Table)
in Table (created by WithStyles(Table))
We were using Table from material-ui old version and the onCellClick handler was attached to it. I tried using Table component from material-ui v1 instead but I've been seeing this warning in the console.
I searched in the MUI v1 docs but onCellClick isn't mentioned in the api for Table or any of its child components.
This is my code:
<Dialog
open={schedulerOpened}
title={TITLE}
large
onClose={toggleScheduler}
>
<Table className="table-scheduler" onCellClick={onPickSlot}>
<TableHead>
<TableRow>
<TableCell>
</TableCell>
</TableRow>
</TableHead>
</Table>
</Dialog>
);
Any help would be appreciated.
I have a table that retrieves data from a json called approvalsData with fields name, type, and owners. Table pulls the data just fine. And the dialog opens. But I can't figure out how to pull that row data in the dialog. Not the entire json data, just the row I am clicking on.
What am I missing here? I'm guessing a lot :)
<TableBody>
{approvalsData.map( (row, index) => (
<TableRow
key={index}
onTouchTap={this.handleApprovalDialogOpen}>
<TableRowColumn>{row.name}</TableRowColumn>
<TableRowColumn>{row.type}</TableRowColumn>
<TableRowColumn>{row.owner}</TableRowColumn>
<Dialog
modal={false}
contentStyle={dialogStyle}
open={this.state.open}
onRequestClose={this.handleApprovalDialogClose}>
<Col key={index}>
<div>Name: <span>{this.name}</span></div>
<div>Type: <span>{this.type}</span></div>
<div>Owner: <span>{this.owner}</span></div>
</Col>
</Dialog>
</TableRow>
))}
</TableBody>
UPDATE
Inspecting the source, I realized that by including the Dialog inside the loop, I was displaying a dialog for every instance of the table rows. No wonder I was just seeing the last one. The others were behind it lol. ANyway, I moved it outside of the loop but now I can't reach the table row data from the table itself. I can reach the data by pointing to the json itself. The example below is showing the first index in the json, but that is not what I want. I want to show the row that I want to click on.
<TableBody>
{approvalsData.map( (row, index) => (
<TableRow
key={index}
onTouchTap={this.handleApprovalDialogOpen}>
<TableRowColumn>{row.name}</TableRowColumn>
<TableRowColumn>{row.type}</TableRowColumn>
<TableRowColumn>{row.owner}</TableRowColumn>
</TableRow>
))}
</TableBody>
<Dialog
modal={false}
contentStyle={dialogStyle}
open={this.state.open}
onRequestClose={this.handleApprovalDialogClose}>
<Col>
<div>Name: <span>{approvalsData[0].name}</span></div>
<div>Type: <span>{approvalsData[0].type}</span></div>
<div>Owner: <span>{approvalsData[0].owner}</span></div>
</Col>
</Dialog>
See the webpackbin
Thanks in advance
I am assuming that you set the open state in handleApprovalDialogOpen callback. You can bind the callback to the index (or id if any) of the row.
// some code
onTouchTap={this.handleApprovalDialogOpen.bind(this, index)}
<Dialog
modal={false}
contentStyle={dialogStyle}
open={this.state.open}
onRequestClose={this.handleApprovalDialogClose}>
<Col>
<div>Name: <span>{approvalsData[this.state.openRowIndex].name}</span></div>
<div>Type: <span>{approvalsData[this.state.openRowIndex].type}</span></div>
<div>Owner: <span>{approvalsData[this.state.openRowIndex].owner}</span></div>
</Col>
</Dialog>
handleApprovalDialogOpen(rowIndex, event) {
this.setState({open: true, openRowIndex: rowIndex})
}
#mukesh's approach looks solid. You're probably getting undefined because you're trying to access approvalsData with an index that does not exist. Try his solution and add:
<TableBody>
{approvalsData.map( (row, index) => (
<TableRow
key={index}
onTouchTap={(e) => this.handleApprovalDialogOpen(index, e)}>
<TableRowColumn>{row.name}</TableRowColumn>
<TableRowColumn>{row.type}</TableRowColumn>
<TableRowColumn>{row.owner}</TableRowColumn>
</TableRow>
))}
</TableBody>