React 如何在 material UI table 的左侧定位列，在右侧定位数据

Question

我在演示和本文档中看到的所有内容 https://material-ui.com/components/tables/ 都是这种形式的表格

|列|列|列|
|--数据--|--数据--|--数据--|

如何使用 React 制作 material UI 表格，列位于左侧，数据位于右侧？

|列|--|数据|
|列|--|数据|
|列|--|数据|

Answer 1

我在 flexBox 中发现了一些不理想但有效的东西（它基于 material 文档中的沙盒代码）：

import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles({
table: {
 minWidth: 650,
 display: "flex"
},
tableHead: {
 display:"flex",
 flexDirection:"column",
},
tableBody: {
 display:"flex",

},
tableRow: {
 display:"flex",
 flexDirection:"column"
}
 
});

function createData(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
}

const rows = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Gingerbread', 356, 16.0, 49, 3.9),
];

export default function BasicTable() {
const classes = useStyles();

return (
 <TableContainer component={Paper}>
   <Table className={classes.table} aria-label="simple table">
   <TableRow className={classes.tableHead}>
 
         <TableCell>Dessert (100g serving)</TableCell>
         <TableCell align="right">Calories</TableCell>
         <TableCell align="right">Fat&nbsp;(g)</TableCell>
         <TableCell align="right">Carbs&nbsp;(g)</TableCell>
         <TableCell align="right">Protein&nbsp;(g)</TableCell>
       </TableRow>
         <TableBody className={classes.tableBody}>
   
       {rows.map((row) => (
         <TableRow  className={classes.tableRow} key={row.name}>
           <TableCell component="th" scope="row">
             {row.name}
           </TableCell>
           <TableCell align="right">{row.calories}</TableCell>
           <TableCell align="right">{row.fat}</TableCell>
           <TableCell align="right">{row.carbs}</TableCell>
           <TableCell align="right">{row.protein}</TableCell>
         </TableRow>
       ))}
     </TableBody>
   </Table>
 </TableContainer>
);
}

React 如何在 material UI table 的左侧定位列，在右侧定位数据

How to position columns at the left and data at the right of material UI table for React

position

reactjs