React Data Table Expandable Rows : how to pass additional Props

Question

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?

you probably need to make a HOC (Higher Order Component) for the ExpandableRowComponent. — Jackstine, Jan 21 '22 at 18:02
@Jackstine I did make a higher order component, following the instructions in the Docs — NicoWheat, Jan 21 '22 at 18:05

score 5 · Accepted Answer · answered Jan 21 '22 at 18:09

5

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}}    
    />;
}

answered Jan 21 '22 at 18:09

NicoWheat

2,157
2
26
34

2

I take my answer back, this is the best way to do it! – Nader Zouaoui Jan 21 '22 at 18:16
2

this works and in that way you can pass functions as well. Thanks a lot. – ppolyzos Feb 21 '22 at 21:34
Can this be used to close all the other expanded rows? Trying to find a solution which does that (one row expanded only and if clicking new rows, closes prior row) – rom Aug 11 '22 at 00:56

score 1 · Answer 2 · answered Jan 21 '22 at 18:09

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.

Here's a sandbox with the solution : https://codesandbox.io/s/react-data-table-sandbox-custom-grow-wrap-forked-0vovz?file=/src/index.js — Nader Zouaoui, Jan 21 '22 at 18:12

React Data Table Expandable Rows : how to pass additional Props

expandableComponentProps

2 Answers2