React-table。 header 列从第二行开始,而不是第一行
React-table. the column header starts with the second line, not the first
我希望第一个单元格的 header 从第一行开始,而不是从第二行开始。这样细胞就是一个整体,而不是一分为二。
沙盒:https://codesandbox.io/s/react-table-pagination-and-sort-forked-slnpt4?file=/src/App.js
解决方法如下:
<thead>
{headerGroups.map((headerGroup, index) =>
index > 0 ? (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
// Add the sorting props to control sorting. For this example
// we can add them into the header props
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render("Header")}
{/* Add a sort direction indicator */}
</th>
))}
</tr>
) : null
)}
</thead>
here is the running code
可以在 Header
属性 中留空 space。所以代码看起来像这样:
const columns = React.useMemo(
() => [
{
Header: "First Name",
columns: [
{
Header: "",
accessor: "firstName"
}
]
},
{
Header: "Фамилия",
columns: [
{
Header: "lastName",
accessor: "lastName"
}
]
}
],
[]
);
看起来像这样:
Please, see the complete example at codesandbox
更新:
可以通过CSS:
删除单元格中的边框线table thead tr:first-child th:first-child {
border-bottom: 0px solid #777;
}
table thead tr:nth-child(even) th:first-child {
border-top: 0px;
}