Property 'getResizerProps' does not exist on type 'HeaderGroup<object>'

[chyyran]

Describe the bug (required)
getResizerProps() property does not work when using TypeScript with @types/react-table@7.0.26

Steps To Reproduce (required)

  
    const tableInstance = useTable(
        { columns, data },
        useBlockLayout,
        useResizeColumns,
    );
        
    const {
        getTableProps,
        headerGroups,
    } = tableInstance;
    
return (
    // apply the table props
   <div {...getTableProps()} className="table">
       <div className="table-header">
           {
               headerGroups.map(headerGroup => (
                   <div {...headerGroup.getHeaderGroupProps()} className="table-header-row">
                        { headerGroup.headers.map(column => (
                            <div {...column.getHeaderProps()} className="th">
                            {column.render('Header')}
                            <div
                              {...column.getResizerProps()} //Property 'getResizerProps' does not exist on type 'HeaderGroup<object>'.  TS2339
                            />
                          </div>
                        ))}
                   </div>
               ))
           }
       </div>
   </div>
  )

Expected behavior (Recommended)

getResizerProps should exist on column

[chyyran]

It seems the other plugins don't work either. useSortBy doesn't add any of its properties onto the column.

[samyan]

I have a similar issue with other plugin. I think the main problem comes from outdated @types. They need to update it.

[DaniAkash]

As per @types/react-table package it only supports up to react-table 7.0.4

[anvlkv]

It needs this additional d.ts in your project to work with typescript https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table#example-type-file

[oltodo]

Simply add the below lines in a .d.ts file:

import { UseResizeColumnsColumnProps } from "react-table";

declare module "react-table" {
  export interface ColumnInstance<
    D extends Record<string, unknown> = Record<string, unknown>
  > extends UseResizeColumnsColumnProps<D> {}
}

[github-actions]

This issue is being marked as stale (no activity in the last 14 days)

[github-actions]

This issue has been detected as stale and automatically closed. It's very likely that your issue has remained here this long because it would require breaking changes to v7. React Table v8 is currently in alpha (soon beta!) and already contains bug fixes, performance improvements and architectural changes that likely address this issue.

• If your v7 issue has been previously labeled as requiring breaking changes, please try the new v8 alpha/beta releases
• If your v7 issue has not already been labeled as a breaking change, open a new issue.
• If this was a v8 issue and was closed by mistake, please reopen or leave a comment below.