#Cannot use expandercomponentprops with typescript

9 messages · Page 1 of 1 (latest)

cerulean comet
#

Hi all, When trying to follow the example for typescript expandable on: https://react-data-table-component.netlify.app/?path=/docs/expandable-basic--basic
I cannot seem to import the{ ExpanderComponentProps }, I get this error:
Module '"react-data-table-component"' has no exported member 'ExpanderComponentProps'. Did you mean to use 'import ExpanderComponentProps from "react-data-table-component"' instead?
But using typescript import ExpanderComponentProps from "react-data-table-component"
just never lets me access from the code:

const ExpandedComponent: React.FC<ExpanderComponentProps<DataRow>> = ({ data }) => {
    return <pre>{JSON.stringify(data, null, 2)}</pre>;
};```
(Says isnt found)
vestal dew
#

@cerulean comet Check your version of "react-data-table-component", perhaps?

#

I just tried importing that type from the sandbox and it worked okay:

mystic galeBOT
#
Retsam19#2505
Playground Link

Preview:ts import DataTable, { ExpanderComponentProps, } from "react-data-table-component"

You can choose specific lines to embed by selecting them before copying the link.
cerulean comet
vestal dew
#

Yeah, the latest version is 7.x - would guess that type didn't exist in 6.x?

cerulean comet
#

I get Parameter 'row' implicitly has an 'any' type.
for code selector: row =>row.ContractName,
but when i change code to
selector: (row: { ContractName: any; }) =>row.ContractName,
I get error

  Type '{ name: string; selector: (row: { ID_EC_Contract: any; }) => any; } | { name: string; selector: (row: { ContractName: any; }) => any; }' is not assignable to type 'TableColumn<{ ID_EC_Contract: any; }>'.
    Type '{ name: string; selector: (row: {    ContractName: any;}) => any; }' is not assignable to type 'TableColumn<{ ID_EC_Contract: any; }>'.
      Types of property 'selector' are incompatible.
        Type '(row: {    ContractName: any;}) => any' is not assignable to type 'Selector<{ ID_EC_Contract: any; }>'.
          Types of parameters 'row' and 'row' are incompatible.
            Property 'ContractName' is missing in type '{ ID_EC_Contract: any; }' but required in type '{ ContractName: any; }'.```
cerulean comet
#

Found fix