I ran into the same issue but noticed that I had simply misplaced useSortBy in the useTable parameters like this

useTable(
{
  columns,
  data,
  useSortBy, // 🚨 useSortBy inside the options object will lead to "Property 'getSortByToggleProps' does not exist on type 'HeaderGroup'"
}
);

But it should be like this

useTable(
{
  columns,
  data,
}
useSortBy, // ✅  useSortBy placed after the options object
);

Hope this helps.

Hey Tanner, I figured out the issue. I wasn’t included the useSortBy inside of the useTable hook.

headerGroup.headers.map((column: any ) => ()

So basically the acceptable fix for this incompatibility with types is to force the compiler to ignore them? That doesn’t sound like a good idea.

Sorry for reopening this issue but I’m facing teh same problem. https://gist.github.com/GunB/73d32ff41992e434aee2f50c1d5a4756 I’m using “react-table”: “^7.7.0” with typescript. Using “@types/react-table”: “^7.7.11” to reach the types needed. Am I doing something wrong? I’m new to this library

const columnsMemo: Array<Column<T extends object ? any : any>> = useMemo(() => [...columns], []);
const dataMemo: Array<T extends object ? any : any> = useMemo(() => [...data], []);

    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
        {
            columns: columnsMemo,
            data: dataMemo,
        },
        useSortBy,
    );

And if I use the soltion given at #2970 (comment) then this happens…

I am getting the same error.

A workaround would be to change the interface of column to any.

<thead>
{headerGroups.map((headerGroup) => (
  <tr
    {...headerGroup.getHeaderGroupProps()}
  >
    {headerGroup.headers.map((column: any) => (
      <th
        {...column.getHeaderProps(
          column.getSortByToggleProps()
        )}
      >
        {column.render('Header')}
      </th>
    ))}
  </tr>
))}
</thead>

Sorry for reopening this issue but I’m facing the same problem. https://gist.github.com/GunB/73d32ff41992e434aee2f50c1d5a4756 I’m using “react-table”: “^7.7.0” with typescript. Using “@types/react-table”: “^7.7.11” to reach the types needed. Am I doing something wrong? I’m new to this library

const columnsMemo: Array<Column<T extends object ? any : any>> = useMemo(() => [...columns], []);
const dataMemo: Array<T extends object ? any : any> = useMemo(() => [...data], []);

    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
        {
            columns: columnsMemo,
            data: dataMemo,
        },
        useSortBy,
    );

And if I use the soltion given at https://github.com/TanStack/react-table/issues/2970#issuecomment-756364081 then this happens…

Sorry for reopening this issue but I’m facing teh same problem. https://gist.github.com/GunB/73d32ff41992e434aee2f50c1d5a4756 I’m using “react-table”: “^7.7.0” with typescript. Using “@types/react-table”: “^7.7.11” to reach the types needed. Am I doing something wrong? I’m new to this library

const columnsMemo: Array<Column<T extends object ? any : any>> = useMemo(() => [...columns], []);
const dataMemo: Array<T extends object ? any : any> = useMemo(() => [...data], []);

    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
        {
            columns: columnsMemo,
            data: dataMemo,
        },
        useSortBy,
    );

And if I use the soltion given at #2970 (comment) then this happens…

I am getting the same error.

I know this is old, however I am getting the exact same error and I have actually included the useSortBy inside of the useTable hook.

I get “Property ‘getSortByToggleProps’ does not exist on type ‘HeaderGroup<object>’”

This prop remains hidden even after having used the useSortBy hook. Is there a solution for this.

I worked on react-table 7.8.0 and was facing the same issue: column.getSortByToggleProps() is not function of HeaderGroup.

But I resolved it using below code, and it works in correct order.

Pass type any inside the map of element headerGroup.headers.map((column: any ) => ()

Issue persists

All the Developer friends who are facing issue with respect to “column.getSortByToggleProps is not a function”

I would like to tell you that, check your useTable functions argument structure. If you are calling useTable as

const tableInstance = useTable(
      {
        columns: columnsData
        data: tableData,
        useSortBy,        
      }
    );

Then you will get this error. It’s a silly mistake, but yes, it’s important. Rather, useSortBy should be called outside the curly braces as follows

const tableInstance = useTable(
      {
        columns: columnsData
        data: tableData,        
      },
      useSortBy
    );

Also, please check from where are you importing useSortBy, is it from “react-table” or something else.

I think this should solve the problem for people without Typescript. For Typescript Developers, (column: any) will be required

Hope finally this issue is resolved with this fixes

Same issue , getSortByToggleProps is not available in column . In my case I have used useSortBy as recommended on docs

@tannerlinsley - I would love to understand what the issue is.