Has anyone encountered an issue with the react-data-table-component? I need to pass a row type (typescript model) to the Detail component that is rendered when the row is 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;
...
Although using 'any' in Detail works fine, I am encountering an error message in vscode when trying to use the typescript 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'