Im fetching an array of rows from firebase, with each row looking like the one below.
row = [
{
index: 1,
body: 'description'
options: ['option1', 'option2', 'option3']
}
]
I'm currently rendering these rows to a table in React as so:
{this.state.rows.map((row) => (
<TableRow key={row.visit}>
<TableCell align="left">{row.index}</TableCell>
<TableCell align="left">{row.body}</TableCell>
<TableCell align="left">{row.options}</TableCell>
</TableRow>))}
However, I'm trying to get the options to be in a dropdown or similar, so as to look neater and not take up too much vertical space. Is there a way to map through a nested array and output it into a dropdown?
You can also map the nested data. I suggest using a select element.
{this.state.rows.map((row) => (
<TableRow key={row.visit}>
<TableCell align="left">{row.index}</TableCell>
<TableCell align="left">{row.body}</TableCell>
<TableCell align="left">
<select>
{row.options.map((option, i) => (
<option key={i} value={option}>{option}</option>
))}
</select>
</TableCell>
</TableRow>
))}
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 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 implemented a Material UI table and forming up the table based on the array of objects.
For example my array of objects:
[{id:1, name:abc, age: 12},{id:2, name:def, age: 13},{id:3, name:ghi, age: 14}].
This is my code for generating the table using material-ui for react.
return (
<div className={classes.root}>
{data.name}
<Paper className={classes.paper}>
<EnhancedTableToolbar handleSearch={handleSearch} value={searchValue} />
<TableContainer className={classes.container}>
<Table
className={classes.table}
aria-labelledby="tableTitle"
stickyHeader aria-label="sticky table"
>
<EnhancedTableHead
classes={classes}
order={order}
orderBy={orderBy}
onRequestSort={handleRequestSort}
/>
<TableBody>
{displaySortedData(data, getComparator(order, orderBy))
.map((row, index) => {
return (
<TableRow
hover
tabIndex={-1}
key={row.ID}
>
<TableCell style={{ textAlign: "center", cursor: "pointer" }}>
<EditIcon />
</TableCell>
<TableCell component="th" scope="row" align="right">
{row.ID}
</TableCell>
<TableCell align="left"><span className={row.name.match(searchValue) ? classes.tableCell : "" }>{row.SOR_NAME}</span></TableCell>
<TableCell align="left">{row.age}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</Paper>
</div>
);
Now whenever user type in search box i capture that in searchValue. Based on the searchValue i change the array of objects and display the table. Now i need to highlight the text too in the table for the searched text.
For that i compare the search value in the 4rth table cell as you can see above in the code.
But my issue is that it highlights the entire column and not just the single table cell in which it found the exact search match. I understand as i am writing the comparison in the tableCell, that is why it highlights the entire column. But i only want to highlight a specific cell of that table if it exactly matches the searched text.
The EnhancedTableHead returns the table headers.
This one works for highlighting the table cell and not the word. For example if user types "match" in search field. Then with the help of following function it highlights the table cell but doesnt highlight the actual characters of the word. For example if in a table cell the word "MatchingWord", it will highlight the full word but not just "Match" in "MatchingWord"
const highlight = (classes, rowValues) =>{
if(searchValue == null || searchValue == "" || rowValues == null || rowValues == "") {
return classes.notMatchingTableCell
} else if(rowValues.toLowerCase().includes(searchValue.toLowerCase()) == true) {
return classes.tableCell
}
return classes.notMatchingTableCell
}
Here classes i pass is the actual css class for higlighting. And rowValues is the value of the row for that object. So in the material ui table part add this function in tag like this
<TableCell align="left"><span className= {highlight(classes, row.age)}>{row.age}</span></TableCell>
Having a simple react Component:
<Table>
<TableBody>
<TableCell>
x
</TableCell>
</TableBody>
</Table>
How can I conditionally enclose the TableBody in yet another component (e.g. Paper)? I thought of something like the below, but this does not seem to do it.
<Table>
{paper && <Paper>}
<TableBody>
<TableCell>
x
</TableCell>
</TableBody>
{paper && </Paper>}
</Table>
If you want to avoid repeating the code for the Table body, you can assign it to a variable and use that.
const content = (
<TableBody>
<TableCell>
x
</TableCell>
</TableBody>
);
return (
<Table>
{paper ? <Paper>{content}</Paper> : content}
</Table>
)
You can do it this way. I considered null condition for paper variable, you can do it with any.
<Table>
{paper !== null ? (
<Paper>
<TableBody>
<TableCell>
x
</TableCell>
</TableBody>
</Paper>
):(<TableBody>
<TableCell>
x
</TableCell>
</TableBody>)}
</Table>