material-UI 有制式的 Table之外
还有像传统 Table一般 用TableContainer 包含TableHead 跟 TableBody
比较轻易可以调整表格内容
其中可以用flex的定位方式调整表格的排序方式 align="center 等等
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="spanning table">
<TableHead>
<TableRow>
<TableCell align="center" colSpan={3}>
Details
</TableCell>
<TableCell align="right">Price</TableCell>
</TableRow>
<TableRow>
<TableCell>项目</TableCell>
<TableCell align="right">数量</TableCell>
<TableCell align="right">单价</TableCell>
<TableCell align="right">总和</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.desc}>
<TableCell>{row.desc}</TableCell>
<TableCell align="right">{row.qty}</TableCell>
<TableCell align="right">{row.unit}</TableCell>
<TableCell align="right">{ccyFormat(row.price)}</TableCell>
</TableRow>
))}
<TableRow>
<TableCell rowSpan={3} />
<TableCell colSpan={2}>Subtotal</TableCell>
<TableCell align="right">{ccyFormat(invoiceSubtotal)}</TableCell>
</TableRow>
<TableRow>
<TableCell>Tax</TableCell>
<TableCell align="right">{`${(TAX_RATE * 100).toFixed(
0
)} %`}</TableCell>
<TableCell align="right">{ccyFormat(invoiceTaxes)}</TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={2}>Total</TableCell>
<TableCell align="right">{ccyFormat(invoiceTotal)}</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
<<: [Day28] React - 建立React 元件 (Component )
Chap.VI Management + Governance 管理方法 Advisor 概观 这边...
最近在某些机缘下认识了规则引擎,以华文介绍规则引擎的文章好像不多,这边试着粗浅的记下我对规则引擎的...
上一章节讲述了 PostgreSQL 的键置和 mybatis 连线到 DB 的配置,那今天就来实际...
主题 :从零开始食谱搜寻系统 Day1 (开赛) 开赛宣言 在开赛第一天,icebear希望自己可以...
前一天我们对HTTP有了基础的概念,今天就要来谈谈要怎麽在vue中发送HTTP请求。 我们会引用ax...