f9a1d02588
Adds working example with Material UI
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import * as React from 'react';
|
|
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
|
|
|
|
type sheetRow = {
|
|
sheetName: string;
|
|
goToButton: React.ReactNode;
|
|
deleteButton: React.ReactNode;
|
|
};
|
|
|
|
export default function SheetTable({ rows }: { rows: Array<sheetRow> }) {
|
|
return (
|
|
<TableContainer>
|
|
<Table aria-label="simple table">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Sheet Name</TableCell>
|
|
<TableCell align="center">Go To</TableCell>
|
|
<TableCell align="center">Delete</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{rows.map((row: sheetRow) => (
|
|
<TableRow
|
|
key={row.sheetName}
|
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
|
>
|
|
<TableCell component="th" scope="row">
|
|
{row.sheetName}
|
|
</TableCell>
|
|
<TableCell align="center">{row.goToButton}</TableCell>
|
|
<TableCell align="center">{row.deleteButton}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
);
|
|
}
|