import React , { FC , HTMLAttributes } from 'react' ; import MaterialTable from 'material-table' ; import { LinkedDataIdentifier } from '../../../atoms/LinkedDataIdentifier' ; import { ContentTableRow } from './ContentTableRow' ; export interface Props extends HTMLAttributes < HTMLDivElement > { label ? : string ; rows ? : any [ ] ; } export const WalletContentTable = ( { label , rows } ) => { const columns = [ { title : 'Type' , field : 'type' , render : ( rowData ) => { return Array . isArray ( rowData . type ) ? rowData . type [ 0 ] : rowData . type ; } } , { title : 'Identifier' , field : 'id' , render : ( rowData ) => { if ( rowData . id ) { return < LinkedDataIdentifier value = { rowData . id } />; } return < LinkedDataIdentifier value = { rowData . proof . challenge } />; } } , ] ; return ( < MaterialTable style = { { width : '100%' } } title = { label || 'Contents' } columns = { columns } data = { rows } options = { { rowStyle : { fontFamily : 'Roboto' } } } detailPanel = { ( rowData ) => { const withoutMutation = { ... rowData } ; delete withoutMutation . tableData ; return < ContentTableRow document = { withoutMutation } />; } } />); } ;