[FEATURE]: Add support for explicit prop passing to expandableRowsComponent

[EBruchet]

Feature Check list

• [x] Agree to the Code of Conduct
• [x] Read the README to ensure the feature is not already present
• [x] You read Creating Issues, Features and Pull Requests
• [x] Considered the value versus complexity for all users of the library as well as library maintenance
• [x] Considered if this can be a storybook or documentation example

Is your feature request related to a problem? Please describe

In using typescript, I'm unable to pass a component that takes a single prop of type T to expandableRowsComponent prop when columns are of type IDataTableColumn<T>[].

import * as React from "react";
import { SomeType } from "./SomeType";

export interface Props {
    data: SomeType;
}

export const ExampleExpandedRowComponent = (props: Props) => {
    return <div>{props.data.someProperty}</div>;
};

...
<DataTable
  columns={SOME_ARRAY}
  data={SOME_DATA}
  expandableRows
  expandableRowsComponent={<ExampleExpandedRowComponent />}
/>
...

The above returns the following error: TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & Props'. Type '{}' is not assignable to type 'Props'.

Describe the solution you'd like

The ability to pass a function with explicit typing on its arguments as follows:

<DataTable 
      expandableRowsComponent={(t: T) => <ExampleExpandedRowComponent data={t}/>} 
      {...otherProps} 
/>

Describe alternatives you've considered

I have attempted the above solution I've suggested above and have been met with the following error:

Warning: Failed prop type: Invalid prop 'children' supplied to 'ExpanderRow'. in ExpanderRow

It's very likely I'm missing a simple resolution to this TS-related issue, but would appreciate guidance nonetheless. Thank you.

[ondratra]

The solution right now is setting data to some empty value for the expandable component and then check for this empty value in the component itself:

export interface Props {
    data: SomeType;
}
export const ExampleExpandedRowComponent = (props: Props) => {
    if (!props.data) {
        return null
    }
    return <div>{props.data.someProperty}</div>;
};

...

<DataTable
  columns={SOME_ARRAY}
  data={SOME_DATA}
  expandableRows
  expandableRowsComponent={<ExampleExpandedRowComponent data={null} />}
/>

But In the future, I would also like to see an option to give React.ReactNode (or preact's VNode) as acceptable parameter to expandableRowsComponent, like you mentioned:

<DataTable 
      expandableRowsComponent={(t: T) => <ExampleExpandedRowComponent data={t}/>} 
      {...otherProps} 
/>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.