react-table v7中useTable的getTableProps正确传参方法

react-table 的 useTable 钩子配置对象仅识别官方定义的配置字段（如columns、data、分页/排序规则、插件专属配置等），不会自动透传随意传入的自定义字段到getTableProps()返回值中。
你引入的useFlexLayout插件会覆写表格根元素的props生成逻辑，默认仅返回role: 'table'和布局相关内联样式，不会读取配置对象里的自定义className字段，因此打印返回值看不到该属性。

getTableProps原生支持传入自定义属性对象，入参属性会和内置生成的属性自动合并，直接在调用方法时传入className即可：

// 渲染表格根节点时传入自定义属性
<table {...getTableProps({ className: className })}>
  <thead>
    {/* 表头渲染逻辑 */}
  </thead>
  <tbody {...getTableBodyProps()}>
    {/* 表体行渲染逻辑 */}
  </tbody>
</table>

需要追加多个自定义属性时，直接在传参对象中补充即可，不会覆盖插件内置生成的合法属性（如useFlexLayout生成的布局样式）：

<table {...getTableProps({ 
  className: 'custom-react-table',
  id: 'business-data-table',
  'data-testid': 'base-list-table'
})}>

提示：getTableBodyProps、getHeaderGroupProps、getRowProps、getCellProps等所有react-table提供的元素props获取方法，都支持相同的传参合并规则，自定义DOM属性不需要写入useTable配置，在调用对应props方法时传入即可。

内容的提问来源于stack exchange，提问作者pepinillo6969