Reusable React Component with material-table

Home.tsx

import React, { PureComponent } from "react";
// Components
import { KTable } from "../../components";
import { ETypes, EEditable } from "../../components/types";

const columns = [
  {
    title: "Name",
    field: "name",
    type: ETypes.string,
    editable: EEditable.always
  },
  {
    title: "Surname",
    field: "surname",
    type: ETypes.string,
    editable: EEditable.always
  },
  {
    title: "Birth Year",
    field: "birthYear",
    type: ETypes.string,
    editable: EEditable.always
  },
  {
    title: "Birth Place",
    field: "birthCity",
    lookup: { 34: "İstanbul", 63: "Şanlıurfa", 1: "Berlin", 2: "Tunis" },
    type: ETypes.string,
    editable: EEditable.always
  }
];

const data = [
  { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
  { name: "Zerya Betül", surname: "Baran", birthYear: 2017, birthCity: 34 },
  { name: "Zied Hf", surname: "Baran", birthYear: 1111, birthCity: 2 },
  { name: "Dali", surname: "Baran", birthYear: 1111, birthCity: 2 },
  { name: "Dominik", surname: "Baran", birthYear: 1111, birthCity: 1 },
  { name: "Yomna", surname: "Hn", birthYear: 1111, birthCity: 1 }
];

interface IData {
  name: string;
  surname: string;
  birthYear: number;
  birthCity: number;
}

class HomePage extends PureComponent {
  public render() {
    return (
      <div>
        <KTable<IData> data={data} columns={columns} /> {/* ERROR on IData : Expected 0 type arguments, but got 1. */}
      </div>
    );
  }
}

export default HomePage;

Table.tsx

import React, { PureComponent } from "react";
// Components
import MaterialTable, { MaterialTableProps } from "material-table";
// Stylus
import { WithStyles } from "@material-ui/core";
import withStyles from "@material-ui/core/styles/withStyles";
import styles from "./KTable.style";

export enum ETypes {
  string = "string",
  boolean = "boolean",
  numeric = "numeric",
  date = "date",
  datetime = "datetime",
  time = "time",
  currency = "currency"
}

export enum EEditable {
  always = "always",
  onUpdate = "onUpdate",
  onAdd = "onAdd",
  never = "never"
}

type IProps<IData extends object> = MaterialTableProps<IData> &
  WithStyles<typeof styles>;

class KTable<IData extends object> extends PureComponent<IProps<IData>> {
  public render() {
    const { columns, data } = this.props;
    return <MaterialTable title="Table Demo" columns={columns} data={data} />;
  }
}

export default withStyles(styles)(KTable);

types.d.ts

/// ........
export interface MaterialTableProps<RowData extends object> {
  actions?: (Action<RowData> | ((rowData: RowData) => Action<RowData>))[];
  columns: Column<RowData>[];
  components?: Components;
  data: RowData[] | ((query: Query<RowData>) => Promise<QueryResult<RowData>>);
  detailPanel?: ((rowData: RowData) => React.ReactNode) | (DetailPanel<RowData> | ((rowData: RowData) => DetailPanel<RowData>))[];
  editable?: {
    isEditable?: (rowData: RowData) => boolean;
    isDeletable?: (rowData: RowData) => boolean;
    onRowAdd?: (newData: RowData) => Promise<void>;
    onRowUpdate?: (newData: RowData, oldData?: RowData) => Promise<void>;
    onRowDelete?: (oldData: RowData) => Promise<void>;
  }
  icons?: Icons;
  isLoading?: boolean;
  title?: string | React.ReactElement<any>;
  options?: Options;
  parentChildData?: (row: RowData, rows: RowData[]) => RowData | undefined;
  localization?: Localization;
  onChangeRowsPerPage?: (pageSize: number) => void;
  onChangePage?: (page: number) => void;
  onChangeColumnHidden?: (column:Column<RowData>, hidden:boolean) => void;
  onColumnDragged?: (sourceIndex: number, destinationIndex: number) => void;
  onOrderChange?: (orderBy: number, orderDirection: ("asc" | "desc")) => void;
  onGroupRemoved?: (column:Column<RowData>, index:boolean) => void;
  onRowClick?: (event?: React.MouseEvent, rowData?: RowData, toggleDetailPanel?: (panelIndex?: number) => void) => void;
  onRowSelected?: (rowData: RowData) => void;
  onSearchChange?: (searchText: string) => void;
  onSelectionChange?: (data: RowData[], rowData?: RowData) => void;
  onTreeExpandChange?: (data: any, isExpanded: boolean) => void;
  onQueryChange?: (query: Query<RowData>) => void;
  style?: React.CSSProperties;
  tableRef?: any;
  page?: number;
  totalCount?: number;
}

// ...
export interface Column<RowData extends object> {
  cellStyle?: React.CSSProperties | ((data: RowData[], rowData: RowData) => React.CSSProperties);
  currencySetting?: { locale?: string, currencyCode?: string, minimumFractionDigits?: number, maximumFractionDigits?: number };
  customFilterAndSearch?: (filter: any, rowData: RowData, columnDef: Column<RowData>) => boolean;
  customSort?: (data1: RowData, data2: RowData, type: (('row' | 'group'))) => number;
  defaultFilter?: any;
  defaultGroupOrder?: number;
  defaultGroupSort?: ('asc' | 'desc');
  defaultSort?: ('asc' | 'desc');
  disableClick?: boolean;
  editComponent?: ((props: EditComponentProps<RowData>) => React.ReactElement<any>);
  emptyValue?: string | React.ReactElement<any> | ((data: any) => React.ReactElement<any> | string);
  export?: boolean;
  field?: keyof RowData | string;
  filtering?: boolean;
  filterPlaceholder?: string;
  filterCellStyle?: React.CSSProperties;
  grouping?: boolean;
  headerStyle?: React.CSSProperties;
  hidden?: boolean;
  initialEditValue?: any,
  lookup?: object;
  editable?: ('always' | 'onUpdate' | 'onAdd' | 'never' | ((columnDef: Column<RowData>, rowData: RowData) => boolean));
  removable?: boolean;
  render?: (data: RowData, type: ('row' | 'group')) => any;
  searchable?: boolean;
  sorting?: boolean;
  title?: string | React.ReactElement<any>;
  type?: ('string' | 'boolean' | 'numeric' | 'date' | 'datetime' | 'time' | 'currency');
}
// ...