REACT TABLE- Hide rows in table & reset button to display hidden rows

Question

In my column Show there is a switch button (Toggle doesn't seems working in sandbox, maybe because of tailwindcss? but it works in local...) when you click on it, it will turn the selected row into gray (as if the row is disabled but you can still view the content). We may have also the possibility to switch again and the original row (without gray) appears.

The VisibilityIcon button above the table will remove from all the table the gray/disabled rows (not working either). And a VisibilityoffIcon button that resets all (we get the original table).

Here what I have done but when I click on the Toggle I get errors and all the table is hidden:

export default function MenuDisplay() {
    const { menuId } = useParams();
    const { match } = JsonRules;
    const dataFindings = match.find((el) => el._id_menu === menuId)?._ids ?? [];
    const [disabled, setDisabled] = useState(false);

  const toggler_disabled = () => {
    disabled ? setDisabled(false) : setDisabled(true);
  };


    const data = useMemo(
        () => [
            //some headers ....    
            {
                Header: 'Show',
                accessor: (row) =>  
                  
            }
        ],[]
    );
    ...
    return (
        {
            disabled?
                
            : null
        }
    );
}

user_9201587 · Answer

You're using useMemo under row data that memoize all rows which have the same click event without dependencies. If you want to call useMemo with an updated state, you can implement it this way

//`show` is your state
//`data` is your rows
useMemo(() => data, [show])

And the second problem is you track the show state which is only a true/false value. If you want to have multiple row states, you need to keep it as an array.

Here is the full code with some explanation (You also can check this playground)

import Table from "./Table";
import React, { useState, useMemo } from "react";
import JsonData from "./match.json";
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import VisibilityIcon from "@mui/icons-material/Visibility";

export default function MenuDisplay() {
  const { menuId } = useParams();
  const { match } = JsonData;
  const [hiddenRows, setHiddenRows] = useState([]);

  const matchData = match.find((el) => el._id_menu === menuId)?._ids ?? [];

  //update hidden row list
  const updateHiddenRows = (rowId) => {
    if (hiddenRows.includes(rowId)) {
      //remove the current clicked row from the hidden row list
      setHiddenRows(hiddenRows.filter((row) => row !== rowId));
    } else {
      //add the current clicked row from the hidden row list
      setHiddenRows([...hiddenRows, rowId]);
    }
  };

  const data = useMemo(() => [
    {
      Header: "Name",
      accessor: (row) =>
        //check current row is in hidden rows or not
        !hiddenRows.includes(row._id) && (
          
            {row.name}
          
        )
    },
    {
      Header: "Description",
      //check current row is in hidden rows or not
      accessor: (row) => !hiddenRows.includes(row._id) && row.description
    },
    {
      Header: "Dishes",
      //check current row is in hidden rows or not
      accessor: (row) => !hiddenRows.includes(row._id) && row.dishes,
      Cell: ({ value }) => value && Object.values(value[0]).join(", ")
    },
    {
      Header: "Show",
      accessor: (row) => (
        
      )
    }
  ], [hiddenRows]);

  const initialState = {
    sortBy: [
      { desc: false, id: "id" },
      { desc: false, id: "description" },
      { desc: false, id: "dishes" }
    ]
  };

  return (
    
      
  );
}

user_8690857 · Answer

Keep a map of item ids that are selected and toggle these values via the Toggle component.
Use separate state for the toggle button to filter the selected items.
Implement a row props getter.

Example:

MenuDisplay

function MenuDisplay() {
  const { menuId } = useParams();
  const { match } = JsonData;

  // toggle show/hide button
  const [hideSelected, setHideSelected] = useState(false);

  // select rows by item id
  const [selected, setSelected] = useState({});

  const rowSelectHandler = (id) => (checked) => {
    setSelected((selected) => ({
      ...selected,
      [id]: checked
    }));
  };

  const toggleShow = () => setHideSelected((hide) => !hide);

  const matchData = (
    match.find((el) => el._id_menu === menuId)?._ids ?? []
  ).filter(({ _id }) => {
    if (hideSelected) {
      return !selected[_id];
    }
    return true;
  });

  const getRowProps = (row) => {
    return {
      style: {
        backgroundColor: selected[row.values.id] ? "lightgrey" : "white"
      }
    };
  };

  const data = [
    {
      // add item id to row data
      Header: "id",
      accessor: (row) => row._id
    },
    {
      Header: "Name",
      accessor: (row) => (
        {row.name}
      )
    },
    {
      Header: "Description",
      accessor: (row) => row.description
    },
    {
      Header: "Dishes",
      accessor: (row) => row.dishes,
      id: "dishes",
      Cell: ({ value }) => value && Object.values(value[0]).join(", ")
    },
    {
      Header: "Show",
      accessor: (row) => (
        
      )
    }
  ];

  const initialState = {
    sortBy: [
      { desc: false, id: "id" },
      { desc: false, id: "description" }
    ],
    hiddenColumns: ["dishes", "id"] // <-- hide id column too
  };

  return (
    
      

      
  );
}
Table
export default function Table({
  className,
  data,
  columns,
  initialState,
  withCellBorder,
  withRowBorder,
  withSorting,
  withPagination,
  withColumnSelect,
  rowProps = () => ({}) // <-- destructure row props getter
}) {
  ...

  return (
    
      ...
      
        

    


            ...
          
            {(withPagination ? page : rows).map((row) => {
              prepareRow(row);
              return (
                
                  ...
                
              );
            })}
          
          
          
        

      

    
  );
}

REACT TABLE- Hide rows in table & reset button to display hidden rows

2 Answers