Material-table: README example for material Icons not working

[zsid]

Describe the bug
README example about using material icons is not working

To Reproduce
Steps to reproduce the behavior:

1. Copy paste the readme example and you will see the error about type definitions when using typescript

Expected behavior

• To have consistent typescript interfaces and be able to use the example in README

Screenshots
README file example:

import { forwardRef } from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const tableIcons = {
    Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
    SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
    ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
  };

<MaterialTable
  icons={tableIcons}
  ...
/>

This is the type definitions in version 1.50.0

export interface Icons {
  Add?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  Check?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  Clear?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  Delete?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  DetailPanel?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  Edit?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  Export?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  Filter?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  FirstPage?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  SortArrow?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  LastPage?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  NextPage?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  PreviousPage?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  ResetSearch?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  Search?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  ThirdStateCheck?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
  ViewColumn?: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;
}

Additional context
Tech stack: React + Typescript.

[lgdelacruz92]

Frustrating, I really want to use it but I'm running to this issue as well "material-table": "^1.50.0"

[lgdelacruz92]

@zsid a workaround is to move the table icon to a file TableIcons.js or something

And where your material-table is you can do

import { tableIcons } from './Tableicons';

<MaterialTable
   icons={tableIcons}
   ...
/>

also adding this as a comment just incase anyone just wants to have a work around.

[zsid]

@bboyjacks, cool thanks.tableIcons: any also works

[lookfirst]

import React, {forwardRef, RefObject} from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Refresh from "@material-ui/icons/Refresh";
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';
import CreateIcon from '@material-ui/icons/Create';

import MaterialTable, {Action, MaterialTableProps, Icons} from "material-table";

const tableIcons: Icons = {
    Add: forwardRef((props, ref) => <AddBox {...props} ref={ref}/>),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref}/>),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref}/>),
    Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref}/>),
    DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref}/>),
    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref}/>),
    Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref}/>),
    Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref}/>),
    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref}/>),
    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref}/>),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref}/>),
    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref}/>),
    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref}/>),
    Search: forwardRef((props, ref) => <Search {...props} ref={ref}/>),
    SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref}/>),
    ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref}/>),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref}/>)
};

export function makeTable(props: MaterialTableProps<any>) {
    return (
        <div style={{maxWidth: "100%"}}>
            <MaterialTable {...props} icons={tableIcons}/>
        </div>
    );
}

export function makeRefreshAction(ref: RefObject<any>) {
    return {
        icon: () => <Refresh/>,
        tooltip: 'Refresh',
        isFreeAction: true,
        onClick: () => {
            if (ref.current) {
                ref.current.onQueryChange();
            }
        },
    } as Action<any>;
}

[baomastr]

import React, {forwardRef} from 'react';
import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';
// typings are here:
import {Icons} from 'material-table';

const tableIcons: Icons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
};

[jayarjo]

PRs are welcome and very much encouraged!

[tafelito]

what about typings for RowData?

const Table: React.FC<MaterialTableProps<RowData>> = props => (
  <MaterialTable icons={tableIcons} {...props} />
);

[Domino987]

This has been fixed

[chiranthaw]

Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),

Is there a way to use custom icons instead of material icons?

[johnthagen]

It would be helpful for new users if TypeScript were mentioned in the README and docs. I had to search the issue tracker for a TypeScript example for tableIcons.