0

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;
aleks
  • 41
  • 6
  • That's exactly how you would do it. – Roberto Zvjerković Feb 25 '21 at 12:49
  • `So I could map that object further in component` - here's a possible idea: don't, just pass children, or a render function to that component and then your component doesn't have to worry about what kind of data it;s displaying. – Adam Jenkins Feb 25 '21 at 13:04

0 Answers0