英文:
How to fix my React Table cell problem (using React Table and MUI)
问题
I am new to React and I created a table component using React Table-MUI. Then I tried to put my table row into <Box></Box> like the code below. Then I saw my whole table body is only taking space of the first column, and other columns are empty.
How do I correct this problem? The <Box></Box> is mandatory to wrap every row.
<TableContainer>
<TableHeader>
.
.
.
</TableHeader>
<TableBody>
{data.map((item, index) => {
return (
<Box>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
</Box>
)
})}
</TableBody>
</TableContainer>
I need to get every column under its header. Right now, the whole row is under the first column. How can I do this?
英文:
I am new to React and I created table component using React Table-MUI. Then I try to put my table row in to <Box></Box> like below code. Then I saw my whole table body is only take space of y first column and other columns are empty.
How do I correct this problem? The <Box></Box> is mandatory to wrap every row.
<TableContainer>
<TableHeader>
.
.
.
</TableHeader>
<TableBody>
{data.map((item,index) => {
return(
<Box>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
</Box>
)
})}
</TableBody>
</TableContainer>
I need to get every column under to it header. Right now whole row is in under first column. How can I do this?
答案1
得分: 1
看表格语法: https://www.w3schools.com/html/html_tables.asp
以及 MUI 表格文档: https://mui.com/material-ui/react-table/
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
MUI 表格在底层是一个具有样式的简单表格。在tbody中不应使用div，而应该使用TableRow来包装单元格。
英文:
Look at table syntax: https://www.w3schools.com/html/html_tables.asp
And MUI table docs: https://mui.com/material-ui/react-table/
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Under hood MUI table simple table with styles. You should not use div in tbody. Wrap cells with TableRow.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论