react-data-table-component set model of expanded component

Question

There is react-data-table-component that works fine, Need to pass row type(typescript model) to Detail component which rendered when row expanded.

Detail:

export const Detail = (row: certificates) => { //it works fine if its set as 'any'
  return (
    <List>
      <ListItem>
..

Main Component:

import axios from "axios";
import { useContext, useEffect, useState } from "react";
import DataTable from "../datatable";
import { certificates, responseProps } from "../models";
import { TableColumn } from "react-data-table-component";
import { FavoriteContext } from "../store";
import { useMemo } from "react";
import { Detail } from "./detail";

function Main() {
  const [data, setData] = useState<certificates[]>([]);
  const [clipboardText, setClipboardText] = useState<string>("");

  const fetchCertificates = async () => {
    setLoading(true);
    const response = await axios.get<responseProps>(
      `https://demo.api.agreena.com/api/public/carbon_registry/v1/certificates?includeMeta=true&page=${pageNumber}&perPage=${pageSize}`
    );
    setData(response.data.result.data);
  };
...
  const columns: TableColumn<certificates>[] = useMemo(() => {
    return [
      ...
    ];
  }, []);

  return (
    <DataTable
      columns={columns}
      data={data}
      onChangePage={handlePageChange}
      expandableRows
      expandableRowsComponent={Detail}
    />
  );
}

export default Main;

model:

export interface certificates {
  id: number;
  uniqueNumber: string;
  status: string;
...

as I said its use as 'any' in Detail it works fine but here is the error message in vscode when use typescipt model (certificate):

Type '(row: certificates) => JSX.Element' is not assignable to type 'ExpandableRowsComponent | undefined'. Type '(row: certificates) => JSX.Element' is not assignable to type 'FunctionComponent<ExpanderComponentProps>'. Types of parameters 'row' and 'props' are incompatible. Type 'PropsWithChildren<ExpanderComponentProps>' is missing the following properties from type 'certificates': id, uniqueNumber, status, ownershipStatus, and 8 more.ts(2322) types.d.ts(52, 5): The expected type comes from property 'expandableRowsComponent' which is declared here on type 'IntrinsicAttributes & TableProps'

score 1 · Accepted Answer · answered Sep 15 '22 at 07:02

You should take a look at this: Expandable Basic

import {
  ...,
  ExpanderComponentProps,
} from "react-data-table-component";

...

export const Detail = ({ data }: ExpanderComponentProps<certificates>) => {
  return (
    <List>
      <ListItem>
...

react-data-table-component set model of expanded component

1 Answers1