reactjs 页脚未出现tanstackReact表

zxlwwiss  于 2023-05-17  发布在  React
关注(0)|答案(1)|浏览(87)

版本:"@tanstack/react-table": "^8.2.6",
我试图添加页脚到我的表,我不能让他们呈现任何东西。如果我设置页脚文本为静态值,它就会出现,但是当我尝试以实现页眉的相同方式实现时,它不会呈现任何值。没有警告/错误出现在 chrome 开发工具或客栈VSCode这是我的页脚代码

<tfoot>
  {table.getFooterGroups().map((footerGroup) => {
    <tr key={footerGroup.id} className={el`footer-row`}>
      {footerGroup.headers.map((header) => {
        return (
          <th
            key={header.id}
            colSpan={header.colSpan}
            className={el`footer-cell`}
          >
          {header.isPlaceholder ? null : (
            <div>
              {flexRender(
                header.column.columnDef.footer,
                header.getContext()
              )}
            </div>
          )}
          </th>
        );
      })}
    </tr>
  })}
</tfoot>

我的useReactTable钩子

const table = useReactTable<T>({
  data: p.data,
  columns: p.columns,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  debugTable: true,
});

组件级别的页脚实现:

footer: () => {
  return <Text className={el`table-row`}>Totals:</Text>;
},
cvxl0en2

cvxl0en21#

这里的问题是map函数根本没有返回任何东西。
一些函数使用圆括号(),而其他函数使用大括号{}。这个关键的区别是圆括号将隐式返回最后一个语句,而大括号需要显式返回语句。

{table.getFooterGroups().map((footerGroup) => (
  <tr key={footerGroup.id} className={el`footer-row`}>
  //...
  </tr>
)}

或:

{table.getFooterGroups().map((footerGroup) => {
 return (
  <tr key={footerGroup.id} className={el`footer-row`}>
  //...
  </tr> )
})}

相关问题