How to clear entire react material ui table conent

Question

I have a table that is filled when the user inputs some data, I want to make a reset button so the table can be cleared completely.

Is there a way to do this without coding functions from scratch? (like clearLayers() for clearing a leaflet map for example)

Thanks. Edit: added code example

//this array is dynamically inputted & can have as many rows as user wants
    arrayNum = [
    {1, chair, test, blue, sky, 1000}
    {2, hair, test, orange, stars, 100}
    {3, bair, test, yellow, moon, 10000}
    {4, care, test, red, sun, 86399}
    ]

    addToTable(res) {
    rows.push (
       <TableRow> 
          <TableCell> {res} </TableCell>
       </TableRow>
    }

    //inside handleClick
    for ( var i = 0; i<arrayNum.length; i++)
    {
     //some more code
     addToTable(arrayNum(i));
    }

   //button using handleClick onClick
   <Table>
      <TableHead>
         //static header values
      </TableHead>
      <TableBody>
         {rows}
      </TableBody
   </Table>

I suspect that "coding functions from scratch" would be quite easy in this case. But some example of your code would be helpful. See https://stackoverflow.com/a/7271547/2224701 — Vojtěch Dohnal, Dec 07 '18 at 10:19
Thanks, I've read through this a few times and will try to adapt it so it does not only delete the specified row, but one big button deletes the whole table as said ion the Q — Uciebila, Dec 07 '18 at 14:25

score 0 · Accepted Answer · answered Dec 07 '18 at 15:05

0

Posting to help others in the future, my solution to this was to use .deleteRow.

var table = document.getElementById("TableID");
for(var i = table.rows.length - 1; i > 0; i--)
{
    table.deleteRow(i);
}

answered Dec 07 '18 at 15:05

Uciebila

481
2
9
27

score 0 · Answer 2 · answered Dec 13 '18 at 02:30

You can store two lists:

list of displayed rows
list of all possible rows

Your table will then only display the displayed rows like this:

render() {
  const rows = [
    [1, 'abc'],
    [2, 'def'],
    [3, 'ghi']
  ];
  const displayedRows = [rows[0], rows[1]];
  return (
    <Table>
      // more components here...
      <TableBody>
        {displayedRows.map((row) =>
           <TableRow key={row[0]}>
             <TableCell>{row[0]}</TableCell>
             <TableCell>{row[1]}</TableCell>
           </TableRow>
        )}
      </TableBody>
    </Table>
  );
}

You can then set displayedRows to an empty list. This kind of stuff belongs in the state of your React component.

How to clear entire react material ui table conent

2 Answers2