how can i append selected row data in another table

what my task is I am using a table with two different conditions like in the first table whatever data coming I will show that in the first table and in the second table whatever row I select in the first table that I want to show in the second table as the second table I called select summary so my task is in the first table whatever row I selected in need to how that row in the second table I am using same table component for this for better you can see CodeSandBox link

import React, { useState, useMemo, useEffect } from "react";
import {
  Grid,
  makeStyles,
  CardContent,
  Card,
  Box
} from "@material-ui/core";
import EnhancedTable from "./EnhancedTable";

const useStyles = makeStyles((theme) => ({
  root: {
    padding: theme.spacing(0, 2, 2),
  },
  formGrid: {
    padding: theme.spacing(2),
  },
  cardColor: {
    borderColor: "#0bb7a7",
  },
  
}));


function AddToExclusionList() {
  const classes = useStyles();
  const [sanctionsList, setSanctionsList] = useState([]);
  const updateListsRow = ({ index, value, row }, listType) => {
    switch (listType) {
      case "sanctions":
        setSanctionsList((prevState) => {
          prevState[index].status = value;
          return [...prevState];
        });
        break;
      default:
    }
  };

  return (
    <Grid className={classes.root}>
      <Grid item xs={12} style={{ textTransform: "capitalize" }}>
        <Card className={classes.cardColor} variant="outlined">
          <CardContent>
              <>
                <EnhancedTable
                  show={true}
                  step="first"
                />
              </>
          </CardContent>
        </Card>
      </Grid>
      <Box mt={3}></Box>
      <Grid item xs={12} style={{ textTransform: "capitalize" }}>
        <Card className={classes.cardColor} variant="outlined">
          <CardContent>
              <>
                <h3>summary table</h3>
                <EnhancedTable 
                checkboxToggle={(rowDetails) => {
                  updateListsRow(rowDetails, "sanctions");
                }}
                />
              </>
          </CardContent>
        </Card>
      </Grid>
    </Grid>
  );
}

export default AddToExclusionList;





CodeSandBox Link

Answer

You’ve achieved your goal very weird! Anyway, based on your code in codesandbox. You need to add a state to AddToExclusionList component, like this:

  const [newRows, setNewRows] = useState([]);
  const setSummaryRows = (selectedRows) => {
    const copy = [...rows];
    const filteredRows = copy.filter((x) => selectedRows.includes(x.name));
    setNewRows(filteredRows);
  };

We need the mentioned state to update the summary table’s rows. Also add rows and setNewRows prop to EnhancedTable and give it rows from out of the component. In addition move rows and createData to App.js. So you should use EnhancedTable in App.js same as bellow:

<Grid className={classes.root}>
      <Grid item xs={12} style={{ textTransform: "capitalize" }}>
        <Card className={classes.cardColor} variant="outlined">
          <CardContent>
            <>
              <h3>first table</h3>
              <EnhancedTable
                // passing data for rendering table according condition
                step="first"
                rows={rows}
                setNewRows={(selected) => {
                  setSummaryRows(selected);
                }}
              />
            </>
          </CardContent>
        </Card>
      </Grid>
      <Box mt={3}></Box>
      <Grid item xs={12} style={{ textTransform: "capitalize" }}>
        <Card className={classes.cardColor} variant="outlined">
          <CardContent>
            <>
              <h3>summary table</h3>
              <EnhancedTable
                // trying to pasing selected data
                rows={newRows}
                setNewRows={() => {}}
              />
            </>
          </CardContent>
        </Card>
      </Grid>
    </Grid>

And the last part is using useEffect based on selected in EnhancedTable component:

  useEffect(() => {
    setNewRows(selected);
  }, [selected]);

Edit dazzling-bohr-srnh3