github.com/pelicanplatform/pelican@v1.0.5/web_ui/frontend/components/DataTable.tsx (about)

     1  import React, {ReactElement, useMemo} from "react";
     2  import {Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@mui/material";
     3  
     4  export interface ColumnMap {
     5      [key: string]: Column
     6  }
     7  
     8  export interface Column {
     9      name: string
    10      cellNode: React.JSX.ElementType
    11  }
    12  
    13  export interface Record {
    14      [key: string]: string | number | boolean | null
    15  }
    16  
    17  const DataTable = ({ columnMap, data }: { columnMap: ColumnMap, data: Record[] }): ReactElement  => {
    18  
    19      // If there is data then show, if not then indicate no data
    20      const rows = useMemo(() => {
    21          if(data.length !==0) {
    22              return data.map((record, index) => (
    23                  <TableRow key={index}>
    24                      {Object.entries(columnMap).map(([key, column], index) => {
    25                          const CellNode = column.cellNode
    26                          return <CellNode key={index}>{record[key]}</CellNode>
    27                      })}
    28                  </TableRow>
    29              ))
    30          } else {
    31              return (
    32                  <TableRow>
    33                      {Object.entries(columnMap).map(([key, column], index) => {
    34                          return <TableCell key={index}>No Data</TableCell>
    35                      })}
    36                  </TableRow>
    37              )
    38          }
    39      }, [data])
    40  
    41      return (
    42          <TableContainer sx={{maxHeight: "500px"}}>
    43              <Table stickyHeader={true} sx={{tableLayout: "fixed"}}>
    44                  <TableHead>
    45                      <TableRow>
    46                          {Object.values(columnMap).map((column, index) => (
    47                              <TableCell key={index}>{column.name}</TableCell>
    48                          ))}
    49                      </TableRow>
    50                  </TableHead>
    51                  <TableBody>
    52                      {rows}
    53                  </TableBody>
    54              </Table>
    55          </TableContainer>
    56      )
    57  }
    58  
    59  export default DataTable