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>
Related
I am having an issue rendering a React functional component when included as subcompnent in a parent component.
The following renders perfectly:
<Table title="Actions">
<TableHeaderCell>Name</TableHeaderCell>
<TableHeaderCell>Description</TableHeaderCell>
<TableHeaderCell>Start Date</TableHeaderCell>
{data.data.map(item => (
<TableRow>
<TableCell>
{item.name}
</TableCell>
<TableCell>
{item.activity_type.description}
</TableCell>
<TableCell>
{item.startDate}
</TableCell>
</TableRow>))}
</Table>
However, when replacing the TableRow with a functional component, then the TableRow is never shown. I created the following Subcomponent:
export const ActivityRowComponent = props => {
console.log('entered ActivityRowComponent');
const item = props.activityItem;
return (
<TableRow>
<TableCell>
{item.name}
</TableCell>
<TableCell>
{item.activity_type.description}
</TableCell>
<TableCell>
{item.startDate}
</TableCell>
</TableRow>
);
};
ActivityRowComponent.propTypes = {
activityItem: PropTypes.object.isRequired,
};
and changed the code from above to:
<Table title="Actions">
<TableHeaderCell>Name</TableHeaderCell>
<TableHeaderCell>Description</TableHeaderCell>
<TableHeaderCell>Start Date</TableHeaderCell>
{data.data.map(item => (
<ActivityRowComponent key={item.activity_id} activityItem={item} />
))}
</Table>
Note that the "console.log" in "ActivityRowComponent" is never reached. Also, if I set a breakpoint I can observe that "ActivityRowComponent" is never called. And, note that the array data.data has a length of 1.
Any ideas what I am doing wrong? What to do in order for the ActivityRowComponent to be rendered?
I've reproduced your scenario at CodeSandbox using HTML table.
And your component is rendering OK. Changed a bit though.
Please check.
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 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
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'm using http://www.material-ui.com, Is it possible to hide/show columns based on the device? For example, on desktop, I want to show 6 columns but on a phone, I might want to show 3 specific columns. How to do this?
I know I am late but this answer is for someone who wants to do it with only material-ui.
Material-ui provides theme breakpoints and withWidth HOC. Both of them can be used to show/hide columns on device size.
Here is an example of using theme breakpoints to change styles based on device width. Same concept can be used to hide/show columns.
You can specify a CSS className on the corresponding TableHeaderColumn and TableRowColumn elements that is hidden/shown depending on a CSS #media query.
For convenience sake, I'm using Bootstrap below and its "hidden-xs" CSS class, which provides such a media query. You'll see that the "Status" column is hidden when you resize the browser window below a certain width.
https://jsfiddle.net/2uepwbd9/1/
class Example extends React.Component {
render() {
return (
<div>
<Table>
<TableHeader>
<TableRow>
<TableHeaderColumn>ID</TableHeaderColumn>
<TableHeaderColumn>Name</TableHeaderColumn>
<TableHeaderColumn className="hidden-xs">Status</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableRowColumn>1</TableRowColumn>
<TableRowColumn>John Smith</TableRowColumn>
<TableRowColumn className="hidden-xs">Employed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>2</TableRowColumn>
<TableRowColumn>Randal White</TableRowColumn>
<TableRowColumn className="hidden-xs">Unemployed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>3</TableRowColumn>
<TableRowColumn>Stephanie Sanders</TableRowColumn>
<TableRowColumn className="hidden-xs">Employed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>4</TableRowColumn>
<TableRowColumn>Steve Brown</TableRowColumn>
<TableRowColumn className="hidden-xs">Employed</TableRowColumn>
</TableRow>
</TableBody>
</Table>
</div>
);
}
}
You could use a grid library like reflexbox.
There's a Hidden component that does exactly what you're asking for. See the documentation.