NextJS开发：shadcn/ui实现table表头固定tbo
2023-11-06 本文已影响0人
ArslanRobot
NextJS + shadcn/ui实现
shadcn/ui的组件相比React中的Ant Design、Vue中的iview、element ui中的组件缺少太多属性，需要组合tailwindcss中定义好的class来实现效果，Headless UI有自己的优势，更加灵活，但要求对原生的css要有足够经验。
- 导入包
"use client"
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
- 定义数据
const invoices = [
{
id: "INV001",
paymentStatus: "Paid",
totalAmount: "$250.00",
paymentMethod: "Credit Card",
},
{
id: "INV002",
paymentStatus: "Pending",
totalAmount: "$150.00",
paymentMethod: "PayPal",
},
{
id: "INV003",
paymentStatus: "Unpaid",
totalAmount: "$350.00",
paymentMethod: "Bank Transfer",
},
{
id: "INV004",
paymentStatus: "Paid",
totalAmount: "$450.00",
paymentMethod: "Credit Card",
},
{
id: "INV005",
paymentStatus: "Paid",
totalAmount: "$550.00",
paymentMethod: "PayPal",
},
{
id: "INV006",
paymentStatus: "Pending",
totalAmount: "$200.00",
paymentMethod: "Bank Transfer",
},
{
id: "INV007",
paymentStatus: "Unpaid",
totalAmount: "$300.00",
paymentMethod: "Credit Card",
},
{
id: "INV008",
paymentStatus: "Pending",
totalAmount: "$150.00",
paymentMethod: "PayPal",
},
{
id: "INV009",
paymentStatus: "Unpaid",
totalAmount: "$350.00",
paymentMethod: "Bank Transfer",
},
{
id: "INV010",
paymentStatus: "Paid",
totalAmount: "$450.00",
paymentMethod: "Credit Card",
},
{
id: "INV011",
paymentStatus: "Paid",
totalAmount: "$550.00",
paymentMethod: "PayPal",
},
{
id: "INV012",
paymentStatus: "Pending",
totalAmount: "$200.00",
paymentMethod: "Bank Transfer",
},
{
id: "INV013",
paymentStatus: "Unpaid",
totalAmount: "$300.00",
paymentMethod: "Credit Card",
},
]
- 组件代码
const buildTable = () => {
return (
<Table className="h-60">
<TableCaption>A list of your recent invoices.</TableCaption>
<TableHeader>
<TableRow className=" table table-fixed">
<TableHead className="w-[100px]">Invoice</TableHead>
<TableHead className="w-[100px]">Status</TableHead>
<TableHead className="w-[100px]">Method</TableHead>
<TableHead className="text-right">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody className=" block overflow-y-auto" style={{height: 400}}>
{invoices.map((invoice) => (
<TableRow key={invoice.invoice} className=" table table-fixed">
<TableCell className="w-[100px] font-medium">{invoice.invoice}</TableCell>
<TableCell className="w-[100px]">{invoice.paymentStatus}</TableCell>
<TableCell className="w-[100px]">{invoice.paymentMethod}</TableCell>
<TableCell className=" w-[100px] text-right">{invoice.totalAmount}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)
}
-
效果
iShot_2023-11-07_12.09.27.jpg
html + css实现
- tbody增加display:block和overflow-y: auto属性
- tr和th增加display:table和table-layout: fixed属性
- tbody设置固定高度
<html>
<head>
<style>
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable tr {
display:table;
table-layout: fixed;
}
table.gridtable tbody {
display:block;
overflow-y: auto;
height:200px;
}
table.gridtable th,td {
border-width: 1px 0px 0px 0px;
padding: 8px;
border-style: solid;
border-color: #cccccc;
background-color: #ffffff;
width:100px;
}
</style>
</head>
<body>
<table class="gridtable">
<thead>
<tr>
<th width="100px">ID</th>
<th width="100px">姓名</th>
<th width="100px">年龄</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>用户1</td><td>20</td></tr>
<tr><td>2</td><td>用户2</td><td>20</td></tr>
<tr><td>3</td><td>用户3</td><td>20</td></tr>
<tr><td>4</td><td>用户4</td><td>20</td></tr>
<tr><td>5</td><td>用户5</td><td>20</td></tr>
<tr><td>6</td><td>用户6</td><td>20</td></tr>
<tr><td>7</td><td>用户7</td><td>20</td></tr>
<tr><td>8</td><td>用户8</td><td>20</td></tr>
<tr><td>9</td><td>用户9</td><td>20</td></tr>
</tbody>
</table>
</body>
</html>
iShot_2023-11-07_12.52.35.jpg
