CODEWITHSUNDEEP
javascriptreactjstypescriptreact-data-grid
M.A Shahbazi
M.A Shahbazi

Reputation: 1081

Trying to make a reuseable DataGrid component with my own defaults from ReactDataGrid, but Typescript giving me errors

I'm trying to use ReactDataGrid library in TypeScript to create a base <BaseDataGrid /> component with my own defaults so I can stop repeating myself when using <ReactDataGrid /> in other pages and other components. Here's my base component:

import React from "react";
import ReactDataGrid from "@inovua/reactdatagrid-enterprise";
import { TypeDataGridProps } from "@inovua/reactdatagrid-community/types";

const BaseDataGrid = ({
    columns = [],
    dataSource = [],
    rtl = true,
    nativeScroll = true,
    showZebraRows = false,
    checkboxOnlyRowSelect = true,
    rowHeight = 60,
    showColumnMenuTool = false,
    sortable = false,
    ...otherProps
}: TypeDataGridProps) => (
    <ReactDataGrid
        columns={columns}
        dataSource={dataSource}
        className='h-full'
        rtl={rtl}
        nativeScroll={nativeScroll}
        showZebraRows={showZebraRows}
        checkboxOnlyRowSelect={checkboxOnlyRowSelect}
        showColumnMenuTool={showColumnMenuTool}
        sortable={sortable}
        rowHeight={rowHeight}
        {...otherProps}
    />
);

export default BaseDataGrid;

But when I'm trying to use it I get this error from TypeScript:

Type '{ columns: TypeColumns; dataSource: any[]; }' is missing the following properties from type 'TypeDataGridPropsNoI18n': isBinaryOperator, sortFunctions, editStartEvent, clearNodeCacheOnDataSourceChange, and 58 more

Here's an example of how I'm trying to use it:

import React  from "react";
import BaseDataGrid from "../../../../components/Common/BaseDataGrid";


const Test = () => {
    return (
        <div className='w-full h-96 lg:flex-grow'>
            <BaseDataGrid columns={[]} dataSource={[]} />
        </div>
    );
};

export default Test;

And here is also a codesandbox: https://codesandbox.io/s/adoring-faraday-mw1rp?file=/src/App.tsx

Why is it not working when I'm trying to make it as a separate component, but it does work when I import it from library? How can I make a reusable component with my own defaults so that I can pass my own props to it and also keep the component flexible?

I know that the error says I'm missing some default props, but is it logical to type out all of the default props from the library?

Upvotes: 2

Views: 601

Answers (2)

pkumar
pkumar

Reputation: 79

The error means you haven't defined values for other required props but are passing them to the component. The props for BaseDataGrid are of type TypeDataGridProps which has a lot of other properties. Try changing the prop type to any and see if it works

Upvotes: 0

Oblosys
Oblosys

Reputation: 15106

With this type signature

const BaseDataGrid = ({ .. }: TypeDataGridProps) => ( .. )

you're specifying that all the TypeDataGridProps props are required, even though you specify default values for all of them. You can use Partial to explicitly declare the props as optional:

const BaseDataGrid = ({ .. }: Partial<TypeDataGridProps>) => ( .. )

Upvotes: 2

Related Questions