I create table component that i want to make reusable in other components. For example in one component i will have the latest jobs table, but in other component i will have list of customers table. So i want to add for example in props property with name tableTitle with type of object or array. So I could map that object further in component. This is my code:
import React, { FC } from 'react';
import styles from './Table.module.scss';
import Grid from '../../hoc/layout/Grid';
import Title from '../../components/Title';
import {
Table as MuiTable,
TableBody,
TableCell,
TableHead,
TableRow,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
Table: {
minWidth: 500,
},
});
interface Props {
title: string;
titleIcon: string;
tableTitle?: [];
}
const Table: FC<Props> = ({ title, titleIcon, tableTitle }: Props) => {
const classes = useStyles();
return (
<Grid xs={12} sm={12} md={12} lg={12}>
<Title title={title} icon={titleIcon} />
<MuiTable className={classes.Table} aria-label="simple table">
<TableHead className={styles.TableHeader}>
{tableTitle.map((test) => (
<TableRow key={test.id}>
<TableCell className={styles.MyTable} align="center">
{test}
</TableCell>
<TableCell className={styles.MyTable} align="center"></TableCell>
</TableRow>
))}
</TableHead>
<TableBody>
<TableRow>
<TableCell className={styles.MyTable} align="center">
test
</TableCell>
</TableRow>
</TableBody>
</MuiTable>
</Grid>
);
};
export default Table;