[v7] Types problem for different columns and data.

[meloshnikov]

I just started using react-table and trying to create a generic table component.
I want to use this component for different columns and data. But when I specify types for columns I get a types error.

Table.tsx:

import React from "react";
import { Column, useTable } from "react-table";
import { IBio } from "../Bio";
import { IUser } from "../Users";
import styles from "./Table.css";

interface IProps {
  title: string;
  headerData: Array<Column<IUser | IBio>>;
  DATA: Array<IUser | IBio>;
  edit: (props: any) => void;
}

const Table: React.FC<IProps> = ({ title, headerData, DATA, edit }) => {
  const tableInstance = useTable({ columns: headerData, data: DATA });
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = tableInstance;

  return (
    <div className={styles.tableWrapper}>
      <h3>{title}</h3>
      <table className={styles.table} {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row) => {
            prepareRow(row);

            return (
              <tr
                className={styles.companyRow}
                {...row.getRowProps()}
                onClick={() => {
                  edit(row.original);
                }}
              >
                {row.cells.map((cell, idx) => (
                  <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default Table;

Users.tsx

import React from "react";
import Table from "./Table/Table";
import { Column } from "react-table";

export interface IUser {
  id: number;
  name: string;
  status: string;
}

const Users = () => {
  const headers: Array<Column<IUser>> = [
    {
      Header: "ID",
      Cell: ({ row }) => (row.original.id === 21 ? "-" : row.original.id)
    },
    {
      Header: "name",
      accessor: "name"
    },
    {
      Header: "Status",
      accessor: "status"
    }
  ];

  const data: Array<IUser> = [
    {
      id: 20,
      name: "Jon Snow",
      status: "Alive"
    },
    {
      id: 21,
      name: "Rhaegar Targaryen",
      status: "Deceased"
    },
    {
      id: 22,
      name: "Ramsay Bolton",
      status: "Deceased"
    }
  ];

  const func1 = () => alert("Hello world");

  return (
    <Table title="Table Users" edit={func1} DATA={data} headerData={headers} />
  );
};

export default Users;

Bio.tsx

import React from "react";
import { Column } from "react-table";
import Table from "./Table/Table";

export interface IBio {
  culture: string;
  religion: string;
  title: string;
}

const Bio = () => {
  const headers: Array<Column<IBio>> = [
    {
      Header: "culture",
      accessor: "culture"
    },
    {
      Header: "religion",
      accessor: "religion"
    },
    {
      Header: "title",
      accessor: "title"
    }
  ];

  const data: Array<IBio> = [
    {
      culture: "Northman",
      religion: "Old Gods of the Forest",
      title: "King in the North"
    },
    {
      culture: "Valyrian",
      religion: "Faith of the Seven",
      title: "Prince of Dragonstone"
    },
    {
      culture: "Northman",
      religion: "Old Gods of the Forest",
      title: "Warden of the North"
    }
  ];

  const func1 = () => alert("Hello world");

  return (
    <Table title="Table Bio" edit={func1} DATA={data} headerData={headers} />
  );
};

export default Bio;

The Bio component for headerData returns a type error:

Type 'Column<IBio>[]' is not assignable to type 'Column<IUser | IBio>[]'.
  Type 'Column<IBio>' is not assignable to type 'Column<IUser | IBio>'.
    Type 'ColumnInterface<IBio> & ColumnGroupInterface<IBio> & { Header: string; } & { accessor?: Accessor<IBio> | undefined; }' is not assignable to type 'Column<IUser | IBio>'.
      Type 'ColumnInterface<IBio> & ColumnGroupInterface<IBio> & { Header: string; } & { accessor?: Accessor<IBio> | undefined; }' is not assignable to type 'ColumnInterface<IUser | IBio> & ColumnGroupInterface<IUser | IBio> & { id: string; } & { Header: Renderer<HeaderProps<IUser | IBio>>; } & { ...; }'.
        Type 'ColumnInterface<IBio> & ColumnGroupInterface<IBio> & { Header: string; } & { accessor?: Accessor<IBio> | undefined; }' is not assignable to type 'ColumnGroupInterface<IUser | IBio>'.
          Types of property 'columns' are incompatible.
            Type 'Column<IBio>[]' is not assignable to type 'Column<IUser | IBio>[]'.
              Type 'Column<IBio>' is not assignable to type 'Column<IUser | IBio>'.
                Type 'ColumnInterface<IBio> & ColumnGroupInterface<IBio> & { Header: string; } & { accessor?: Accessor<IBio> | undefined; }' is not assignable to type 'Column<IUser | IBio>'.ts(2322)

A similar error is returned in the Users component.

Sandbox here: https://codesandbox.io/s/ecstatic-sound-ou7ldk?file=/src/components/Bio.tsx

Does anyone know how to solve the problem of types without using: any ?

Any help would be much appreciated!
Thanks 🙏

[meloshnikov]

The problem is solved with the help of generics.

interface IProps<T extends OptionData> {
  title: string;
  headerData: Array<Column<T>>;
  DATA: Array<T>;
  edit: (props: T) => void;
}

const Table = <T extends OptionData>({
  title,
  headerData,
  DATA,
  edit
}: IProps<T>) => {....};