github.com/filecoin-project/bacalhau@v0.3.23-0.20230228154132-45c989550ace/dashboard/frontend/src/components/widgets/SimpleTable.tsx (about)

     1  import React, { FC } from 'react'
     2  
     3  import Box from '@mui/material/Box'
     4  import Table from '@mui/material/Table'
     5  import TableBody from '@mui/material/TableBody'
     6  import TableCell from '@mui/material/TableCell'
     7  import TableHead from '@mui/material/TableHead'
     8  import TableRow from '@mui/material/TableRow'
     9  import TableContainer from '@mui/material/TableContainer'
    10  import Paper from '@mui/material/Paper'
    11  
    12  export interface ITableField {
    13    name: string,
    14    title: string,
    15    numeric?: boolean,
    16    style?: React.CSSProperties,
    17    className?: string,
    18  }
    19  
    20  const SimpleTable: FC<{
    21    fields: ITableField[],
    22    data: Record<string, any>[],
    23    compact?: boolean,
    24    withContainer?: boolean,
    25    hideHeader?: boolean,
    26    hideHeaderIfEmpty?: boolean,
    27    actionsTitle?: string,
    28    actionsFieldClassname?: string,
    29    onRowClick?: {
    30      (row: Record<string, any>): void,
    31    },
    32    getActions?: {
    33      (row: Record<string, any>): JSX.Element,
    34    },
    35  }> = ({
    36    fields,
    37    data,
    38    compact = false,
    39    withContainer = false,
    40    hideHeader = false,
    41    hideHeaderIfEmpty = false,
    42    actionsTitle = 'Actions',
    43    actionsFieldClassname,
    44    onRowClick,
    45    getActions, 
    46  }) => {
    47  
    48    const table = (
    49      <Table size={ compact ? 'small' : 'medium' }>
    50        {
    51          (!hideHeader && (!hideHeaderIfEmpty || data.length > 0)) && (
    52            <TableHead>
    53              <TableRow>
    54                {
    55                  fields.map((field, i) => {
    56                    return (
    57                      <TableCell key={ i } align={ field.numeric ? 'right' : 'left' }>
    58                        { field.title }
    59                      </TableCell>
    60                    )
    61                  })
    62                }
    63                {
    64                  getActions ? (
    65                    <TableCell align='right'>
    66                      { actionsTitle }
    67                    </TableCell>
    68                  ) : null
    69                }
    70              </TableRow>
    71            </TableHead>
    72          )
    73        }
    74        <TableBody>
    75          {data.map((dataRow, i) => {
    76            return (
    77              <TableRow
    78                hover
    79                onClick={e => {
    80                  if(!onRowClick) return
    81                  onRowClick(dataRow)
    82                }}
    83                tabIndex={-1}
    84                key={ i }
    85              >
    86                {
    87                  fields.map((field, i) => {
    88                    return (
    89                      <TableCell 
    90                        key={ i } 
    91                        align={ field.numeric ? 'right' : 'left' } 
    92                        className={ field.className }
    93                        style={ field.style }
    94                      >
    95                        { dataRow[field.name] }
    96                      </TableCell>
    97                    )
    98                  })
    99                }
   100                {
   101                  getActions ? (
   102                    <TableCell align='right' className={ actionsFieldClassname || '' }>
   103                      { getActions(dataRow) }
   104                    </TableCell>
   105                  ) : null
   106                }
   107              </TableRow>
   108            );
   109          })}
   110        </TableBody>
   111      </Table>
   112    )
   113  
   114    const renderTable = withContainer ? (
   115      <TableContainer component={Paper}>
   116        { table }
   117      </TableContainer>
   118    ) : table
   119    
   120    return (
   121      <Box component="div" sx={{ width: '100%' }}>
   122        <Box component="div" sx={{ overflowX: 'auto' }}>
   123          { renderTable }
   124        </Box>
   125      </Box>
   126    )
   127  }
   128  
   129  export default SimpleTable