const tableColumns:ColumnModel[] = [
  { title: 'Id', field: 'id', align:'center', width: '50px'},
  { title: 'Avatar',  width: '50px', render: (rowData:any) => <img src={`https://api.adorable.io/avatars/36/${rowData.id}.png`}/>},
  { title: 'Name', field: 'name'},
  { title: 'Email', field: 'email', render: (rowData:any) => <a href={`mailto:${rowData.email}`}>{rowData.email}</a> },
  { title: 'Age', field: 'age', align:'right'}
];
 
const tableData = createData(20);
const exportButtons:ExportButtonModel[] = [
  {
    icon:'save',
    label:'CSV',
    exportFn: (columns:ColumnModel[], data:any[]) => {
      alert('Implement a code to export CSV');
    }
  },
  {
    icon:'picture_as_pdf',
    label:'',
    exportFn: (columns:ColumnModel[], data:any[]) => {
      alert('Implement a code to export PDF');
    }
  },
  {
    icon:'save_alt',
    label:'Excel',
    exportFn: (columns:ColumnModel[], data:any[]) => {
      alert('Implement a code to export Excel');
    }
  }
];
 
 
return  <NiceTable 
    columns={tableColumns} 
    data={tableData} 
    height="300px"
    exportButtons={exportButtons}
    hasPagination={true}
    selectable={true}
/>;

type NiceTableProps = {
  columns: ColumnModel[];
  data: any[] | RemoteDataFn;
  hasPagination?: boolean;
  pageSizeOptions?: number[];
  height?:string;
  width?:string;
  filterComponent?: React.ReactNode;
  filterData?: FilterDataModel;
  sortable?:boolean;
  defaultSortBy?:string;
  defaultSortOrder?:string;
  selectable?:boolean;
  onSelectionChange?(selectedRowDataIds:any[]):void;
  defaultSelectedIds?:any[];
  fullRowSelectable?:boolean;
  dataIdField?:string;
  exportButtons?:ExportButtonModel[];
  actionButtons?:ActionButtonModel[];
}

type ColumnModel = {
    title: string;
    field?: string;
    align?: string;
    width?: any;
    render?(rowData:any): void;
}