मैं डेमो और इस दस्तावेज़ में देख सकता हूँ https://material-ui.com/components/tables / इस रूप में टेबल है

|कॉलम|कॉलम|कॉलम|
|--डेटा--|--डेटा--|--डेटा--|

बाईं ओर स्थित कॉलम और दाईं ओर स्थित डेटा के साथ रिएक्ट का उपयोग करके सामग्री UI टेबल बनाने का तरीका क्या है?

|स्तंभ|--|डेटा|
|स्तंभ|--|डेटा|
|स्तंभ|--|डेटा|

0
licer93 5 पद 2020, 16:58

1 उत्तर

सबसे बढ़िया उत्तर

मुझे फ्लेक्सबॉक्स के साथ कुछ मिलता है यह आदर्श नहीं है लेकिन काम करता है (यह सामग्री दस्तावेज़ में पाए गए सैंडबॉक्स कोड पर आधारित है):

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>
);
}
2
antoineso 5 पद 2020, 16:11