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