Is this possible in react-table: Displaying colored circles according to numbers?

Question

Hello I have no idea on how to get the result on the right side picture. Is this possible with react-table ?? If yes, how do I do? I have grades for comments 1,2,3,4, and instead of display numbers, I would like to fill in different colors (regarding the value) circles.

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

  const [hideSelected, setHideSelected] = useState(false);
  const [selected, setSelected] = useState({});

 ... 
  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 = [
    
    {
      Header: "Comments",
      accessor: (row) => row.comments
    },
    {
      Header: "Dishes",
      accessor: (row) => row.dishes,
      id: "dishes",
      Cell: ({ value }) => value && Object.values(value[0]).join(", ")
    },
  ];

  return (
    <div>
      <Table
        data={matchData}
        columns={data}
      />
    </div>
  );
}

Answer 1

Define a Counter component that takes the count value & generates $count number of divs over a flex container div .... the child div can be fine tuned in width, height and border radius to make it circle of desired size & the background color set appropriately.

I forked your sandbox and made a sample implementation for you here

Hope this helps.