react-table - react-table ：添加带有标题组的选择（复选框）列

Question

出于美学原因，我尝试将 HeaderGroup 添加到 react-teable 示例中提供的“选择”（复选框）列解决方案中。

hooks => {
  hooks.visibleColumns.push(columns => {
    return [
      {
        id: 'selection',
        // Make this column a groupByBoundary. This ensures that groupBy columns
        // are placed after it
        groupByBoundary: true,
        // The header can use the table's getToggleAllRowsSelectedProps method
        // to render a checkbox
        Header: ({ getToggleAllRowsSelectedProps }) => (
          <div>
            <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
          </div>
        ),
        // The cell can use the individual row's getToggleRowSelectedProps method
        // to the render a checkbox
        Cell: ({ row }) => (
          <div>
            <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
          </div>
        ),
      },
      ...columns,
    ]
  })

来源： https ://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink

我已经尝试了许多使用 hooks 对象的方法，但没有一种方法有效（例如嵌套调用 hooks.headerGroups.push 和 hooks.visibleColumns.push）。

这是我最后一次尝试，它是有意义的，但也不起作用（TypeError: Cannot read property 'forEach' of undefined）：

   hooks => {
        hooks.headerGroups.push(headerGroups => {
            return [
                {
                    Header: 'X',

                    columns: [
                        {
                            id: 'selection',
                            // Make this column a groupByBoundary. This ensures that groupBy columns
                            // are placed after it
                            groupByBoundary: true,
                            // The header can use the table's getToggleAllRowsSelectedProps method
                            // to render a checkbox
                            Header: ({ getToggleAllRowsSelectedProps }) => (
                                <div>
                                    <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
                                </div>
                            ),
                            // The cell can use the individual row's getToggleRowSelectedProps method
                            // to the render a checkbox
                            Cell: ({ row }) => (
                                <div>
                                    <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
                                </div>
                            ),
                        }
                    ]
                },
                ...headerGroups
            ]
        })
    })

谢谢你的帮助^^