reactjs - 如何在 react-table v-7 中添加具有不同值的 subRow?
问题描述
如何在 react-table v-7 中添加具有不同列的子标题?需要能够配置子行
需要能够在 react-table v-7 中配置 subrowshow 添加具有不同列的子标题?
https://codesandbox.io/s/tannerlinsleyreact-table-expanding-k4rhe
function Table({ columns: userColumns, data }) {
const {
getTableProps,
headerGroups,
rows,
prepareRow,
state: [{ expanded }],
} = useTable(
{
columns: userColumns,
data,
},
useExpanded // Use the useExpanded plugin hook
)
return (
<>
<pre>
<code>{JSON.stringify({ expanded }, null, 2)}</code>
</pre>
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody>
{rows.map(
(row, i) =>
prepareRow(row) || (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
)
})}
</tr>
)
)}
</tbody>
</table>
<br />
<div>Showing the first 20 results of {rows.length} rows</div>
</>
)
}
function App() {
const columns = React.useMemo(
() => [
{
// Build our expander column
Header: () => null, // No header, please
id: 'expander', // Make sure it has an ID
Cell: ({ row }) =>
// Use the row.canExpand and row.getExpandedToggleProps prop getter
// to build the toggle for expanding a row
row.canExpand ? (
<span
{...row.getExpandedToggleProps({
style: {
// We can even use the row.depth property
// and paddingLeft to indicate the depth
// of the row
paddingLeft: `${row.depth * 2}rem`,
},
})}
>
{row.isExpanded ? '' : ''}
</span>
) : null,
},
{
Header: 'Name',
columns: [
{
Header: 'First Name',
accessor: 'firstName',
},
{
Header: 'age',
accessor: 'id',
},
{
Header: 'color',
accessor: 'color',
},
],
},
],
[]
)
const subColumns = React.useMemo(
() => [
{
},
{
Header: 'Name',
columns: [
{
Header: 'First Name',
accessor: 'id',
},
{
Header: 'age',
accessor: 'id',
},
{
Header: 'color',
accessor: 'color',
},
],
},
],
[]
)
const data = [
{firstName:'cat',subRows:[
{id:3,age:10, color:'red'}
]},
{firstName:'dog',lastName:'black',subRows:[
{id:3,age:10, color:'black'}]}
]
return (
<Styles>
<Table columns={columns} data={data} />
</Styles>
)
}
如何在 react-table v-7 中添加具有不同列的子标题?
解决方案
为什么不使用
const myColumns = [{
'Header': 'HEADER',
'columns': [
{
'Header': 'FIRST COLUMN',
'accessor': 'id',
},
],
//...more rows
}];
推荐阅读
- arrays - 循环遍历范围时应用程序定义的错误
- node.js - 如何在nest js中实现守卫的集成测试?
- angular - 如何在 ng2-charts 中动态使用 chartjs-plugin-annotation?
- angular - 通过 Web VPN 使用 Service Worker
- java - 如何从 SpringBoot 的 RestController 中的 REST 请求中获取日历字段?
- javascript - HTML表单输入值未在javascript函数中更新
- javascript - 如何以编程方式使用 javascript 添加按钮
- ios - 调试通过自定义 url 打开的 iOS 应用程序
- python - 如何修复'ModuleNotFoundError:没有名为'apt_pkg'的模块?
- python - Django QuerySet:按“值 LIKE 列”过滤