How to create a table component using material-react-table

[emanuella92gomesr]

I want to create a table component using material-react-table but I don't know which data type I should use to define its props (such as columns and data). I will define the props in an interface structure. I am using Typescript as programming language.

I used the MRT_ColumnDef as column type and an array of objects as data type and I know that they are incorrect. The columns can be defined using useMemo, for example,

 useMemo<MRT_ColumnDef<Employee>[]>(
     //define columns data
 );

and the data can be represented as an array of objects.

[KevinVandy]

You can define a re-usable MRT component that can take any data, but you will probably want to use a TypeScript generic.

//extend MaterialReactTableProps so you don't have to type out 200 props yourself
interface Props<TData extends Record<string, any> = {}> extends MaterialReactTableProps<TData> {
  columns: MRT_ColumnDef<TData>[];
  data: TData[];
 //etc.
}

export const YourCustomTableComponent = <TData extends Record<string, any> = {}>({
  columns,
  data,
  ...rest
}: Props<TData>) => {
  //code... maybe custom columns...
  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      //your prop customizations
      {...rest}
    />
  );
}

[emanuella92gomesr]

MRT and ColumnDef were not found. Should I import some library?
They weren't found and no fix was suggested.

[KevinVandy]

I had typed this out on my phone, fixed some typos

[emanuella92gomesr]

The solution works!!

Thank you very much!

[ronnyhaase]

Hi @KevinVandy !

We're currently having the same issue, so we tried your suggestion after struggling with it for hours on our own 😅 . But with the latest TS / MRT versions, we get this error with your example:

An interface can only extend an object type or intersection of object types with statically known members.

Can you maybe help? 🙏

[ronnyhaase]

Figured it out, without using interface:

import { MaterialReactTable, MaterialReactTableProps, MRT_ColumnDef } from 'material-react-table';

type Props<TData extends Record<string, any>> = MaterialReactTableProps<TData> & {
    columns: MRT_ColumnDef<TData>[];
    data: TData[];
    // etc.
};

export const YourCustomTableComponent = <TData extends Record<string, any>>({
    columns,
    data,
    ...rest
}: Props<TData>) => {
    return (
        <MaterialReactTable
            columns={columns}
            data={data}
            // your prop customizations
            {...rest}
        />
    );
};