DataTable: The parameter of the function passed to sortIcon has the wrong type

[Suppen]

Describe the bug

When using a function for the sortIcon prop of a <DataTable>, the function's first parameter, options, is of type IconOptions<DataTable<TValue>>. This type knows about icons, but not about sorting.

Logging the options parameter to console shows it has more props than its type claims. The most important one is sortOrder, telling which direction a column is sorted. TS does not know about this, so options.sortOrder defaults to type any. It should be 0 | 1 | -1

In addition to sortOrder, there is also a property sorted which the type does not know about. Its actual type appears to for some reason be null | true, instead of boolean.

Reproducer

https://stackblitz.com/edit/vitejs-vite-s3jiwf?file=src%2FApp.tsx

PrimeReact version

9.6.0

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

Hover options.sortOrder and options.sorted in the reproducer. They both show type any.

Check the console, where both props are logged. They clearly have values.

Expected behavior

The type should know about options.sortOrder, which should have type 0 | 1 | -1.

In addition, the type should know about options.sorted , which for some reason should have type null | true

[EmirBoyaci]

After my wrong PR (🤣), I found that these sortOrder and sorted properties should be exposed into IconOptions interface. We may have define 2nd generic parameter to expose these two properties into IconOptions.

primereact/components/lib/utils/utils.d.ts

Lines 137 to 142 in 39c5c98

	export interface IconOptions<ParentProps> {
	iconProps: React.HTMLProps<HTMLElement>;
	element: React.ReactNode;
	props?: ParentProps;
	[key: string]: any;
	}

[melloware]

I can fix it. Give me 5 minutes.

[melloware]

OK not as easy as I thought.

if I do...

sortIcon?: IconType<IconOptions<DataTable<TValue>> & { sorted?: boolean; sortOrder?: number }> | undefined;

I can see the options has this:

But it is still showing as any when I hover sorted

[EmirBoyaci]

OK not as easy as I thought.

if I do...

sortIcon?: IconType<IconOptions<DataTable<TValue>> & { sorted?: boolean; sortOrder?: number }> | undefined;

I can see the options has this:

But it is still showing as any when I hover sorted

This one was my first attempt but didn't worked. Because when I look at the IconOptions, I saw the options is type IconOptions<ParentType> and, these two additional properties sorted and sortOrder have to be defined in IconOptions.

See:

primereact/components/lib/utils/utils.d.ts

Line 144 in 39c5c98

export type IconType<ParentProps> = React.ReactNode | ((options: IconOptions<ParentProps>) => React.ReactNode);

[melloware]

Yep but...

export interface IconOptions<ParentProps> {
    iconProps: React.HTMLProps<HTMLElement>;
    element: React.ReactNode;
    props?: ParentProps;
    [key: string]: any;
}

The [key: string]: any; says ANY extra props can be included so I was hoping by just appending the sorted props it would be allowed because of the [key: string]: any;

[EmirBoyaci]

I also thought exactly the same as you but didn't worked 😄 I think it is because the ParentProps is going to the props field not the IconOptions interface..

[melloware]

Yep I think the generics for IconType need to be extended a little to make it more flexible but I am trying to figure out how. 😄

[EmirBoyaci]

I have a suggestion, let me finalize and I can raise PR