CODEWITHSUNDEEP
reactjstypescriptreact-data-table-component
NicoWheat
NicoWheat

Reputation: 2441

React Data Table Expandable Rows : how to pass additional Props

Reading the Docs for React Data Table, there seems to be a way to pass additional Props to an expandableRowsComponent.

This is copy-pasted from the docs:

expandableComponentProps

expandableComponentProps allows you to pass additional props to your expander component and prevents TypeScript from complaining:


import * as React from 'react';
import DataTable, { ExpanderComponentProps } from 'react-data-table-component';

interface Row {
    title: string;
    director: string;
    year: string;
}

interface Props extends ExpanderComponentProps<Row> {
    // currently, props that extend ExpanderComponentProps must be set to optional.
    someTitleProp?: string;
}

const ExpandableRowComponent: React.FC<Props> = ({ data, someTitleProp }) => {
    return (
        <>
            <p>{someTitleProp}</p>
            <p>{data.title}</p>
            <p>{data.director}</p>
            <p>{data.year}</p>
        </>
    );
};

I understand the above clearly.

However, this ExpandableRowComponent is passed as a parameter to the DataTable Component. It is not called as a React component itself, so I do not clearly see how to pass the additional prop someTitleProp.


function MyComponent({ someTitleProp }) {
    return 
     <DataTable
      columns={columns} 
      data={data} 
      expandableRows 
      expandableRowsComponent={ExpandedComponent} //where does someTitleProp go?
    />;
}

I've tried a few things, but so far all I get are either errors, or someTitleProp is undefined in the ExpandedComponent.

How do I pass someTitleProp to the ExpandedComponent?

Upvotes: 5

Views: 11923

Answers (2)

Nader Zouaoui
Nader Zouaoui

Reputation: 43

One way you can do this is going at it this way :

  • First you make your ExpandableRowComponent a Higher order function
const ExpandableRowComponent: (someTitleProp: string) => React.FC<Props> = (someTitleProp) => ({ data }) => {
    return (
        <>
            <p>{someTitleProp}</p>
            <p>{data.title}</p>
            <p>{data.director}</p>
            <p>{data.year}</p>
        </>
    );
};
  • Second you call the function with the desired parameter in the DataTable props like so:
function MyComponent({ someTitleProp }) {
    return 
     <DataTable
      columns={columns} 
      data={data} 
      expandableRows 
      expandableRowsComponent={ExpandedComponent(someTitleProps)} //where does someTitleProp go?
    />;
}

And that should solve your issue.

Upvotes: 1

NicoWheat
NicoWheat

Reputation: 2441

The way to pass additional props to the expandableRowsComponent parameter is to pass them as a named object to expandableRowsComponentProps parameter.


function MyComponent({ someTitleProp }) {
    return 
     <DataTable
      columns={columns} 
      data={data} 
      expandableRows 
      expandableRowsComponent={ExpandedComponent}
      expandableRowsComponentProps={{"someTitleProp": someTitleProp}}    
    />;
}

Upvotes: 5

Related Questions