expandableRowsComponent TypeScript props does not support expected usage

[grantbdev]

Issue Check list

• [x] Agree to the Code of Conduct
• [x] Read the README
• [x] You are using React 16.8.0+
• [x] You installed styled-components
• [x] Include relevant code or preferably a code sandbox

Describe the bug

Currently it is expected that an expandableRowsComponent receives a prop named data with the table's row data. However, a custom expandable rows component that expects this data prop in the TypeScript props is not compatible with the expandableRowsComponent prop. The TypeScript compilation is blocked due to a mismatch of the props types even though it should be safe to define the data prop type and it works functionally without TypeScript.

This type definition appears to be the issue because it is not compatible with adding the data prop type: https://github.com/jbetancur/react-data-table-component/blob/a7315c8a4d041f3841f25707273e623a80e47d85/src/DataTable/types.ts#L15

To Reproduce

Steps to reproduce the behavior:

1. Define a component with a data prop in TypeScript
2. Pass that component as an expandableRowsComponent prop
3. Compile with TypeScript
4. You should see a TypeScript error at the expandableRowsComponent prop assignment

Expected behavior

With TypeScript, a component with data as a required typed prop should be able to be passed into RDT's expandableRowsComponent prop.

Bonus: The type definition for RDT's TableProps<DataRow>['expandableRowsComponent'] should automatically include { data: DataRow } as part of the props to expandableRowsComponent.

Code Sandbox, Screenshots, or Relevant Code

https://codesandbox.io/s/react-data-table-forked-5dtvu?file=/src/index.tsx

The error does not appear in Code Sandbox itself, I guess because they are not doing a full TypeScript compile or something like that. If you download the project locally and try to build or start the app, you will see an error such as the following:

TypeScript error in /Users/gman/projects/react-data-table-forked/src/index.tsx(47,11):
Type 'FC<{ data: Movie; }>' is not assignable to type 'ExpandableRowsComponent | undefined'.
  Type 'FunctionComponent<{ data: Movie; }>' is not assignable to type 'FunctionComponent<Record<string, unknown>>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'PropsWithChildren<Record<string, unknown>>' is not assignable to type 'PropsWithChildren<{ data: Movie; }>'.
        Property 'data' is missing in type 'PropsWithChildren<Record<string, unknown>>' but required in type '{ data: Movie; }'.  TS2322

    45 |           defaultSortFieldId={1}
    46 |           expandableRows
  > 47 |           expandableRowsComponent={ExpandableRow}
       |           ^
    48 |           sortIcon={<SortIcon />}
    49 |           pagination
    50 |           selectableRows

Versions (please complete the following information)

• React 17.0.2
• Styled Components 5.3.1
• OS: macOS 10.15.7
• Browser: Firefox

[jbetancur]

Thank you for raising this. Working on a fix for 7.4.2.

[grantbdev]

@jbetancur Thank you for resolving this quickly. It works great now!